Home > DeveloperSection > Articles > New Features of CSS3

New Features of CSS3


CSS-CSS3 CSS-CSS3 
Ratings:
0 Comment(s)
 2576  View(s)
Rate this:

New Features of CSS3

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-shadow10px 10px 5px #888888;

    color:#fff;

    text-align:center;

    padding-top:30px;

}

Html:

<div class="box-shadow">

    <h2>MindStick Software PVT. LTD.</h2>

</div>

Output

New Features of CSS3

 

 

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 {

    width200px;

    height50px;

    background-color#0ae;

    color:#fff;

    border-radius:25px;

    padding:15px 0 0 10px;

    -ms-transformrotate(50deg);

    -webkit-transformrotate(50deg);

    transformrotate(50deg);

}

Html:

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

Output

New Features of CSS3

 

 

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 {

    width150px;

    height50px;

    background#16c7ef;

    -webkit-transitionwidth 2s;

    transitionwidth 2s;

}

 

.transitions:hover {

    width100%;

}

 

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-count4;

    -moz-column-count4;

    column-count4;

}

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

New Features of CSS3

 

CSS3 Multiple Background

CSS3 allows web designers to specify multiple background images for box elements, using nothing more than a simple comma-separated list. Multiple background 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 {

    width500px;

    height250px;

    background-imageurl(img/img-rocket.png)url(img/img-planet.png)url(img/img-space.jpg);

    background-repeatno-repeat;

    background-positionleft top120pxleft top;

}Html:

<div class="multiple-img-background">

        &nbsp

    </div>

Output

New Features of CSS3

 In my next post i'll explain about css4 animation


Don't want to miss updates? Please click the below button!

Follow MindStick