5 Features of CSS3

5 Features of CSS3

The CSS 2.1 specification finally attained the W3C recommendation status before few months. The CSS 2.1 is now so well supported that upgrading the spec to recommendation status is mostly a formality this was achieved by many years of hard work and the CSS 3 Color Module become a mandatory. All of this is sensational news as it means that the web is well on its way to a future filled with splendid CSS 3.

Now the CSS 2.1 enjoys extremely wide interoperability and the same is not presently true for CSS 3. When the W3C and web browser vendors work intensely to create our tomorrow, here are 5 CSS 3 features that you can start using in your websites.

Border Radii

The border-radius property enables you to apparently curve the corners of an element. Earlier, this was a difficult thing to do which involved the images and extra markup usage.

Code

Select simply the element in your CSS code & apply the border-radius property to apply a border radius to an element. Give the property a percentage or an absolute value. If you give high value than the more curvy your corners will display. To enable this work in some web browsers like Chrome, Firefox, etc, then you will require to include what are named vendor prefixes. These are mandatory to guard the future compatibility, should the W3C decide to change a CSS 3 property.

Browser Compatibility

Granted that you contain the proper vendor prefixes the border-radius property works in each and every modern web browser such as Mozilla Firefox, Safari, Google Chrome, Opera and so on. Now it also works in IE 9 and above version. Even if the client web browser does not assist this property, it means that they will see squared-off corners rather than smooth curves. The web pages do not require to display the same in each and every web browser there are chances for little bit cosmetic variations and this is acceptable.

New Color Models

The CSS 3 come up with many new properties such as border-radius,but it also follows along new units too. The earlier version CSS 2.1 provides various different methods to declare colors like the named color format or hexadecimal format. Moreover, the CSS 2.1 permitted colors to be specified by using a special rgb() function and CSS 3 created upon this with rgba(), hsla() and hsl(). When hsl () enables you to define colors by using saturation, hue, and lightness. In the hsla() and rgba() functions the a means the "alpha" and it helps you to modify the opacity of the color.

Code

To use any of the new color models you can just simply use them anywhere you need to use a color. For example, the background property which is used to set the background of an element to a color. In order to use the rgba() function provide the red, green and blue values separated by commas. These values must be numbers between 0 and 255, or it can be also percentages. At last, add in the alpha value which must be a number between 0 & 1. If you give high value then the more opaque the color will display with 1 being completely opaque. These new color values don't need the use of any special vendor prefixes.

The hsla() color model also takes 4 values. The first value is the hue and is an integer. The next 2 values are for the saturation and lightness and these values should be percentages. At last, the alpha value functions are same as with the rgba() function and must be a number between 0 & 1.

Browser Compatibility

These newly added color models will render perfectly in each and every modern web browser. The Internet Explorer version 9 onward support the CSS 3 color models because the colors can be more than aesthetic improvements it is mandatory to ensure that they work perfectly with the majority of customers. So what happens if the web browser does not assist one of these new color modes? As a fallback you can try the following:

color: RGB(255, 0, 0);
color: rgba(255, 0, 0, 0.9);

Bear in mind, the rgb() function is a part of CSS 2.1 version, which is already extensively supported. If a web browser has the ability to use the rgba() function then the second declaration can override the first. If the override not happened then the second declaration can simply ignore. The slight transparency is the only thing that is missing in this case. As mentioned earlier, slight cosmetic variations are acceptable.

Box Shadows

The box-shadow property enables it simple and easy to build shadows below the elements. Before the CSS 3, this was somehow challenging and difficult to generate and almost always needed the use of images.

The Code

The box-shadow property acquires 4 values. The first 2 values are X and Y offsets and they define the angle of the light. The 3rd value is the blur radius. If the values are higher then the fuzzier the shadow will appear.

These first 3 properties can be relative or absolute values. The last value is a color. And also you can use a hexadecimal color but the box-shadow property is much more engaging when united with the new color models in CSS 3. bY Using the rgba() color model helps the opacity of the shadow to be modified making it appear as though the shadow basically blends with the background. Likewise to the border-radius property, this also needs the use of vendor prefixes.

]

Browser Compatibility

This feature works perfectly in all the recent version of the browsers like Firefox, Chrome, etc. The Internet Explorer version 9 onward supports this features.

Fonts

The computers have the ability to display various fonts for several decades, so it may be odd that fonts are only becoming standardized on the Internet. Though, the dispute over file formats with the complex font licensing problems have turned this into quite a challenge to overcome. Luckily, the CSS 3 has placed the highlight back on web fonts and the web is quickly moving into a multi-font future.

The Code

Using different fonts to blocks of text is not new. Anyhow, the ability to add new font faces are really new while before, we were restricted to the web browser defaults. To add a new font you have to download the font file that you would d like to add and then use the @font-face rule to indicate a name for the font with a file path. Finally, you can use the font as you normally would.

Browser Compatibility

The @font-face rule works well in almost all web browsers going all the way back to early versions of Internet Explorer. Some lingering file format compatibility problems as font services have simplified enough the process and abstracted away these issues.

Opacity

Along with the CSS 3, you can easily change the transparency of an element using the opacity property. By using the CSS 2.1 effects like this was difficult to attain and in some rare scenario, it is impossible.

The Code

To attain the opacity of an element just add the opacity property. The value should be in between 0 and 1./p>

Browser Compatibility

This feature works perfectly in all the recent version of the browsers like Firefox, Chrome, etc. The Internet Explorer version 9 onward supports this feature.

Contact Us


Content

Contact Us