Top 5 New Features in CSS 3
Top 5 New Features in CSS 3
Cascading Style Sheets [CSS] , CSS3 is the latest version of the Cascading Style Sheets a lot's of new featured add like - rounded corners, shadows, gradients, transitions or animations new layouts like multi-columns, flexible box or grid layouts, Please see Below Top 5 New Features in CSS3.
#1. CSS Animations and Transitions
A transition is the simplest form of CSS3 animation A transition occurs when an element changes from one state to another, and the browser fills in that state change with a sequence of in-between frames. It has a beginning and an end state.
What are Transitions?
A transition occurs when an element changes from one state to another. We most often see transitions used on hover states, or when information on a page is added or removed. The hover states might be a subtle change in font color, The demonstration above works well but the state transition is very abrupt. Let’s apply a little CSS3 magic
What are Animations?
CSS Animations are a more powerful alternative to transitions. Rather than rely on a change from one beginning state to an end state, The second way for defining animations is a bit more complicated - it involves the description of specific moments of the animation with the code>@keyframe rule.
animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state
Fade in Fade Out custom slider using css3
#2. Rounded Corners: border-radius
The border-radius property is actually a shorthand. For our “a” element, the corners are all the same size and symmetrical. CSS rounded corners thus save us time in creating images and requests to the server.
<style>
div{
border-top-left-radius: 7px;
border-top-right-radius: 5px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 8px;
}
</style>
#3. Gradients
CSS gradients also look great on retina displays, because they are generated on the fly. They can be linear or radial, and can be set to repeat. We added the syntax for generating linear gradients with CSS3.
<style>
div{
background: linear-gradient(to right, red , yellow);
}
</style>
#4. CSS 3D Transforms
These effects will work in WebKit (Safari/iPhone/iPad and Chrome) and Mozilla (Firefox) browsers. Some simpler effects will work in Internet Explorer 10, but they don's support the preserve-3d setting needed for proper 3D layouts.
1) Scale , 2) Skew, 3) Rotate, 4) Translate, 5) Matrix
<style>
div {
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg);
}
</style>
#5. FLEXBOX
display, This defines a flex container; inline or block depending on the given value.
flex-direction
This establishes the main-axis, thus defining the direction flex items are placed in the flex container.
justify-content
This defines the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.
flex-start (default) & flex-end & center & space-between & space-around & space-evenly
Items are packed toward the start line. Items are packed toward to end line. Items are centered along the line. Items are evenly distributed in the line; first item is on the start line, last item on the end line. Items are evenly distributed in the line with equal space around them. Note that visually the spaces aren't equal, since all the items have equal space on both sides. Items are distributed so that the spacing between any two items (and the space to the edges) is equal.
align-items
This defines the default behavior for how flex items are laid out along the cross axis on the current line.
align-content - flex-start & flex-end & center & space-between & space-around & stretch (default)
lines packed to the start of the container. lines packed to the end of the container. lines packed to the center of the container. lines evenly distributed; the first line is at the start of the container while the last one is at the end. lines evenly distributed with equal space around each line. lines stretch to take up the remaining space.
flex-shrink
This defines the ability for a flex item to shrink if necessary.
flex-basis
This defines the default size of an element before the remaining space is distributed.
More information please visit this url https://www.papawebdesigner.com/
Follow On Social Media -
Follow on Facebook - https://www.facebook.com/Front-End-Issue-487743404963344
Follow on instagram - https://www.instagram.com/frontendissue/
Follow on Twitter - https://twitter.com/IssueEnd
Follow on Linkedin - https://www.linkedin.com/in/hitesh-patidar-34253a10a/
Follow on GooglePlus - https://plus.google.com/118238268171156252992
Follow on pinterest - https://in.pinterest.com/frontendissue/
Comments
Post a Comment