HTML CSS Tutorials: CSS3

CSS3 the new standard cascading style sheet.
CSS3 has the best features in it as multiple column concept and 2D/3D Transformations.
The CSS3 also has all the features which are existing in older version of CSS.

Most of all the browsers supports CSS3 features.

CSS3 Borders

CSS3 Borders helps in rounded corner border of division or any section this is achieved using -moz-border-radius as follows

<div style="border:5px solid blue;-moz-border-radius:5px;height:100px;width:200px;background:yellow;color:red;">hello from rounded corner division</div>

Which results as follows

hello from rounded corner division

Even border shadow can be implemented to any border using -moz-box-shadow

<div style="border:5px solid blue;-moz-border-radius:5px;height:100px;width:200px;background:yellow;color:red;-moz-box-shadow:10px 15px 20px #ccc;">hello from shadow division</div>

Which results as follows

hello from shadow division

CSS3 allows for 2d/3d Transforms which helps in giving the best look to any document.
This is performed using the transform tag.

CSS3 Transform Rotate
Example

<div style="background:yellow;height:100px;width:100px;-moz-transform:rotate(45deg);color:red;">hello from rotated div</div>

hello from rotated div

CSS3 Transform Translate

<div style="background:yellow;height:100px;width:100px;-moz-transform:translate(20px,70px);color:red;">hello from rotated div</div>

Which results as follows

hello from rotated div

CSS3 Transform Scale

<div style="background:yellow;height:100px;width:100px;-moz-transform:scale(1,1);color:red;">hello from scaled div</div>

hello from scaled div

CSS3 Transform Skew

<div style="background:yellow;height:100px;width:100px;-moz-transform:skew(30deg,20deg);color:red;">hello from skewed div</div>

Which results as follows

hello from skewed div

CSS3 Transition is a fantastic feature of CSS3 which allows a animated effect to a division.This is achieved using the transition tag.

Copy and paste the below piece of code to know the effect

<head><br />
<style type="text/css"> div{width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}
div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}</style></head><p><b>Note:</b> This example does not work in Internet Explorer.</p><br />
<div>Hover over this to see the transition effect</div>

transition-property
Specifies the name of the CSS property to which the transition is applied

transition-duration
Defines the length of time that a transition takes. Default 0

transition-timing-function
Describes how the speed during a transition will be calculated. Default "ease"

transition-delay
Defines when the transition will start. Default 0

HTML CSS Tutorials

Pages

CSS3

Followers

About Me