In this article I’m explaining about new features of CSS3. CSS3 is the latest standard for CSS. CSS3 is completely backwards-compatible with earlier versions of CSS. This section teaches you about the new features in CSS3.

1.       Some of the most important CSS3 modules are.

2.       Selectors

3.       Box Model

4.       Backgrounds and Borders

5.       Image Values and Replaced Content

6.       Text Effects

7.       2D/3D Transformations

8.       Animations

9.       Multiple Column Layout

10.   User Interface 

CSS3 Box Shadow Property

The box-shadow property allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset. The box-shadow property can accept a comma-separated list of shadows.

CSS:

.box-shadow
{
    width:30%;
    height:100px;
    margin:50px auto;
    background-color:#0ae;
    box-shadow: 10px 10px 5px #888888;
    color:#fff;
    text-align:center;
    padding-top:30px;
}

Html:

<div class='box-shadow'>
    <h2>MindStick Software PVT. LTD.</h2>
</div>

Output

CSS3 2D Transforms

One of the most powerful features of CSS3 are transforms, which allow us to take

any element in an HTML document, and while not changing its effect on the page

layout, rotate it, translate it (move it left, right, up and down). CSS3provides

both 2D and 3D transforms.

CSS:

.rotate {
    width: 200px;
    height: 50px;
    background-color: #0ae;
    color:#fff;
    border-radius:25px;
    padding:15px 0 0 10px;
    -ms-transform: rotate(50deg);
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);
}

Html:

<div class='rotate'>Contact Us</div>

Output

CSS3 Transitions

CSS transitions, which are part of the CSS3 set of specifications, provide a way to

control animation speed when changing CSS properties. Instead of having

property changes take effect immediately, you can cause the changes in a property

to take place over a period of time.

CSS:

.transitions {
    width: 150px;
    height: 50px;
    background: #16c7ef;
    -webkit-transition: width 2s;
    transition: width 2s;
}
 
.transitions:hover {
    width: 100%;
}
 

Html:

<div class='transitions'>
    &nbsp;
</div>

Output

CSS3 Multiple Columns

The CSS multi-column layout extends the block layout mode to allow the easy

definition of multiple columns of text. People have trouble reading text if lines are

too long; if it takes too long for the eyes to move from the end of the one line to the

beginning of the next, they lose track of which line they were on.

CSS:

.column {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
}

Html:

<div class='column'>
    <p>We are an IT company specializing in custom software development. We are dedicated to providing professional high quality services to both small and large business sectors through the use of cutting-edge programming technologies. With the demands on businesses growing more by the day, we provide practical IT solutions to make your business run more efficiently.We are a young and dynamic team and we strive to provide fresh and innovative software and web solutions at an affordable price. For a look at all the services we provide, click on our services tab.</p>
</div>

Output

CSS3 Multiple Background

CSS3 allows web designers to specify multiple background images foroxelements, using nothing more than a simple comma-separated list. Multiplebackground images can be specified using either the individual background properties. We’ll first look at an example using the individual background properties.

CSS:

.multiple-img-background {
    width: 500px;
    height: 250px;
    background-image: url(img/img-rocket.png), url(img/img-planet.png), url(img/img-space.jpg);
    background-repeat: no-repeat;
    background-position: left top, 120px, left top;
}

Html:

<div class='multiple-img-background'>
        &nbsp
    </div>

Output

 In my next post i'll explain about css4 animation