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.
3. Box Model
4. Backgrounds and Borders
5. Image Values and Replaced Content
6. Text Effects
7. 2D/3D Transformations
9. Multiple Column Layout
10. User Interface
CSS3 Box Shadow Property
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.
box-shadow: 10px 10px 5px #888888;
<h2>MindStick Software PVT. LTD.</h2>
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.
padding:15px 0 0 10px;
<div class="rotate">Contact Us</div>
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.
-webkit-transition: width 2s;
transition: width 2s;
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.
<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>
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.
background-image: url(img/img-rocket.png), url(img/img-planet.png), url(img/img-space.jpg);
background-position: left top, 120px, left top;
In my next post i'll explain about css4 animation