What is New in CSS3?
CSS3 is the latest standard. CSS3 is completely backwards-compatible with earlier versions of CSS. Lets explore some new features together. I have advanced experience with CSS.
CSS3 Modules
CSS3 has been split into "modules". It contains the "old CSS specification" (which has been split into smaller pieces). In addition, new modules are added.
Some of the important CSS3 modules are:
- Selectors
- Box Model
- Backgrounds and Borders
- Image Values and Replaced Content
- Text Effects
- 2D/3D Transformations
- Animations
- Multiple Column Layout
- User Interface
CSS3 Animations
With CSS3, we can create animations which can replace Flash animations that can be displayed on mobile devices.
JaymeHolmes
Code
#animated_div
{
animation:animated_div 5s 1;
-moz-animation:animated_div 5s 1;
-webkit-animation:animated_div 5s 1;
-o-animation:animated_div 5s 1;
border-radius:5px;
-webkit-border-radius:5px;
-webkit-animation-iteration-count: infinite;
}
CSS3 Transitions
Mouse over the element below:
JAYME
Code
.animated_div
{
width:60px;
height:40px;
background:#92B901;
color:#ffffff;
position:absolute;
font-weight:bold;
font-size:15px;
padding:10px;
float:left;
margin:5px;
-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
-webkit-border-radius:5px;
-o-transition-property:width,height,-o-transform,background,font-size,opacity;
-o-transition-duration:1s,1s,1s,1s,1s,1s;
-moz-transition-property:width,height,-o-transform,background,font-size,opacity;
-moz-transition-duration:1s,1s,1s,1s,1s,1s;
transition-property:width,height,transform,background,font-size,opacity;
transition-duration:1s,1s,1s,1s,1s,1s;
border-radius:5px;
opacity:0.4;
}
.animated_div:hover
{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
opacity:1;
background:#1ec7e6;
width:90px;
height:60px;
font-size:30px;
}