Main Menu

What is New in CSS3?

image

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.

CSS3
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:

CSS3
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;
}


Learn more about CSS3 |  Contact me: Jayme@i-happen.com