CSS3 FEATURES

Posted on Updated on

Image result for cssCSS3 FEATURES

A couple days back, the CSS 2.1 determination at long last accomplished W3C suggestion status. After numerous times of diligent work, CSS 2.1 is presently so all around bolstered that redesigning the spec to proposal status is for the most part a convention. Around the same time, the CSS 3 Color Module likewise turn into a suggestion. The greater part of this is energizing news, since it implies that the web is well on its way to a future loaded with wonderful CSS 3.

While CSS 2.1 now appreciates to a great degree expansive interoperability, the same is not at present valid for CSS 3. While the W3C and program sellers work angrily to fabricate our tomorrow, here are five CSS 3 includes that you can begin utilizing as a part of your locales today.

Border Radii

The border-radius property allows you to ostensibly curve the corners of an element. Previously, this was a rather tricky thing to do, involving the use of images and extra markup. Now, you can create a curved box like the one you see below.

The Code

To apply a border radius to an element, simply select the element in your CSS code and apply the border-radius property. Then, give the property an absolute or percentage value. The higher the value, the more curvy your corners will appear. To make this work in some browsers, you will need to include what are called vendor prefixes. These are necessary to protect future compatibility, should the W3C decide to change a CSS 3 property.

.myElement{

 

/* A few vendor-prefixed versions of the property… */

-webkit-border-radius:20px;

-moz-border-radius:20px;

 

/* …and the ‘real’ property last. */

border-radius:20px;

 

}

Browser Compatibility

Provided that you include the proper vendor prefixes, the border-radius property works in just about every modern browser, including Firefox, Safari, Opera, and Google Chrome. It now also works in Internet Explorer, starting with version 9. Even if the client browser doesn’t support this property, it just means that they will see squared-off corners instead of smooth curves. Remember, webpages don’t need to look exactly the same in every browser; slight cosmetic variations like this are acceptable.

New Color Models

CSS 3 comes with several new properties like border-radius, but it also comes with new units as well. CSS 2.1 offers several different ways to declare colors, such as the hexadecimal format or the named color format.

 Additionally, CSS 2.1 allowed colors to be specified using a special rgb() function, and CSS 3 builds upon this with rgba()hsl(), and hsla(). While hsl() allows you to specify color using hue, saturation, and lightness (rather than red, green, and blue colors), it is the a that’s more interesting. In the rgba() and hsla() functions, the a stands for “alpha” and it allows you to adjust the opacity of the color.

The Code

To utilize one of the new color models, simply use them anywhere you might use a color. One example of this is of course the background property, which can set the background of an element to a color. To use the rgba() function, supply the red, green, and blue values, separated by commas. These should be numbers between 0 and 255, or percentages. Finally, add in the alpha value, which should be a number between 0 and 1, inclusive. The higher the number, the more opaque the color will appear, with 1 being completely opaque. These new color values do not require the use of any special vendor prefixes.

.myElement{

 

/* A bright orange color, with some very slight transparency added. */

background:rgba(255,128,0,0.7);

 

}

The hsla() color model also takes four values. The first value is the hue, and is just an integer. The next two values are for the saturation and lightness, and these should be percentages. Finally, the alpha value functions the same as with the rgba() function, and should be a number between 0 and 1, inclusive.

.myElement{

 

/* A solid blue color, with the transparency cut in half. */

color:hsla(240,100%,50%,0.5)}

 

}

Browser Compatibility

These new color models will work in every modern browser. Internet Explorer began supporting CSS 3 color models starting with version 9, and because colors can be more than just aesthetic enhancements, it’s important to make sure they work properly in the majority of clients. So then, what if a browser doesn’t support one of these new color models? As a fallback, you can try something like this:

.myElement{

 

color:rgb(255,0,0);

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

 

}

Remember, the rgb() function is a part of CSS 2.1, which is already widely supported. If a browser is capable of utilizing the rgba() function, then the second declaration will override the first. If not, then the second declaration will simply be ignored. The only thing missing in this case will be the slight transparency. As I mentioned previously, slight cosmetic variations like this are acceptable.

Box Shadows

The box-shadow property makes it easy to create shadows underneath elements. Prior to CSS 3, this effect was somewhat challenging to produce and almost always required the use of images.

The Code

The box-shadow property takes four values. The first two values are the X and Y offsets, and they determine the angle of the light. The third value is the blur radius. The higher the value, the fuzzier the shadow will appear. These first three properties can be absolute or relative values. The last value is a color. Of course, you could use a hexadecimal color, but the box-shadow property is much more interesting when combined with the new color models in CSS 3. Using the rgba() color model allows the opacity of the shadow to be adjusted, making it appear as though the shadow is naturally blending with the background. Similar to the border-radius property, this property also requires the usage of vendor prefixes.

.myElement{

 

/* A few vendor-prefixed versions of the property… */

-webkit-box-shadow:5px5px5pxrgba(0,0,0,0.7);

-moz-box-shadow:5px5px5pxrgba(0,0,0,0.7);

 

/* …and the ‘real’ property last. */

box-shadow:5px5px5pxrgba(0,0,0,0.7);

 

}

Browser Compatibility

As is the case with the border-radius property, this CSS 3 feature works in all modern browsers and will work in Internet Explorer 9 and up.

For more details and queries please feel free to email, visit or call us. Wishing you the very best for all your future endeavors.

Helpline: 9814666333, 8699444666

Email:info@technocampus.co.in

**************************************************************************************************************

Please fill the FORM and we shall contact you soon.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s