May | 2014 | Techbirds
Posted on: May 30, 2014 /
Categories: Mobile Applications
Top 10 New Features in CSS 3
The latest version of Cascade Style Sheets, CSS 3, was developed to make Web design easier but it became a hot topic for a while because not all browsers supported it. However, trends change quickly in technology and all browser makers currently are implementing complete CSS 3 support. Making that process easier for the browser manufacturers is CSS 3′s modularized specification, which allows them to provide support for modules incrementally without having to perform major refactoring of the browsers’ codebases. The modularization concept not only makes the process of approving individual CSS 3 modules easier and faster, but it also makes documenting the spec easier.
Eventually, CSS 3 — along with HTML5 — are going to be the future of the web. You should begin making your Web pages compatible with these latest specifications. In this article, I explore 10 of the exciting new features in CSS 3, which is going to change the way developers who used CSS2 build websites.
1. CSS 3 Selectors
In addition to the selectors that were available in CSS2, CSS 3 introduces some new selectors. Using these selectors you can choose DOM elements based on their attributes. So you don’t need to specify classes and IDs for every element. Instead, you can utilize the attribute field to style them.
The most useful attributes for selectors are: [attr^=val] A–- matches a DOM element with the attribute attr and a value starting with val [attr$=val] A–- matches a DOM element with the attribute attr and a value ending with the suffix val
[attr*=val] A- matches a DOM element with the attribute attr and a value containing the substring val
CSS Example: p[title^=”car”] {color: red;}
img[src*=”birth”] {border:3px solid green;}
2. CSS 3 Rounded Corners
Rounded corner elements can spruce up a website, but creating a rounded corner requires a designer to write a lot of code. Adjusting the height, width and positioning of these elements is a never-ending chore because any change in content can break them.
CSS 3 addresses this problem by introducing the border-radius property, which gives you the same rounded-corner effect and you don’t have to write all the code. Here are examples for displaying rounded corners in different places of a website.
CSS Example:
.box{ border-radius : 25px; }
3. CSS 3 Border Image
Another exciting feature in CSS 3 is the ability to swap out a border with an image. The property border-image allows you to specify an image to display instead of a plain solid-colored border.
CSS Example:
#col{border-image:url(border_image.png) 100 100 100 100 round round; border-width: 10px;}
4. CSS 3 Box Shadow
A box shadow allows you to create a drop shadow for an element. Usually this effect is achieved using a repeated image around the element. However, with the property box-shadow this can be achieved by writing a single line of CSS code.
After previously removing this property from the CSS 3 Backgrounds and Borders Module, the W3C added it back in the last working draft.
CSS Example:
.shadow{ box-shadow:3px 3px 3px 2px #797979; }
5. CSS 3 Text Shadow
The new text-shadow property allows you to add drop shadows to the text on a webpage. Prior to CSS 3, this would be done by either using an image or duplicating a text element and then positioning it. A similar property called box-shadow is also available in CSS 3.
CSS Example:
p{ text-shadow: #aaa 2px 2px 2px; }
6. CSS 3 Gradient
While the Gradient effect is a sleek Web design tool, it can be a drain on resources if not implemented correctly using current CSS techniques. Some designers use a complete image and put in the background for the gradient effect, which increases the page load time.
Here are examples of the linear gradient property in CSS 3. To date, it is supported only in Safari 4 and Chrome (WebKit) and Firefox 3.6.
CSS Example:
#gradient { background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #E6C674),color-stop(1, #F7ECCA)); background-image: -moz-linear-gradient(center bottom , #E6C674 0pt, #F7ECCA 100%); }
7. CSS 3 RGBA: Color, Now with Opacity
The RGB property in CSS is used to set colors for different elements. CSS 3 introduces a modification and added opacity manipulation to this property. RGB has been transformed to RGBA (Red Green Blue Alpha channels), which simplifies how you control the opacity of elements.
CSS Example:
p {background: rgba(217, 127, 185, .5); }
8. CSS 3 Transform (Element Rotation)
CSS 3 also introduced a property called transform, which enables rotating Web elements on a webpage. As of now, if a designer wants to rotate of an element, he or she uses JavaScript. Many JavaScript extensions/plugins are available online for this feature, but they can make the code cumbersome and most importantly consume more resources.
Here’s how rotate an element in CSS 3.
CSS Example:
p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg);}
9. CSS 3 Multicolumn Layout
Almost every webpage today is divided into columns or boxes, and adjusting these boxes so they display correctly on different browsers takes a toll on Web designers. CSS 3 solves this problem with the multicolumn layout property; all you have to do is specify the number of columns you need and they will be created.
This property is currently supported by the Firefox and WebKit browsers.
CSS Example:
#col{-moz-column-count:3;-webkit-column-count:3;}
10. CSS 3 Web Fonts
CSS 3 also facilitates embedding any custom font on a webpage. Fonts are dependent on the client system and Web pages can render only fonts that are supported by the browser or the client machine. By using the @font-face property, you can include the font from a remote location and can then use it.
CSS Example:
@font-face { src: url(“myfont.ttf”); font-family: “myfont_bold”; }
108 total views, 1 views today