A wide variety of features are provided by the newest version of cascading style sheets, known as CSS3, provided below is a list of ten new enhancements available for use in website design. The top ten provided are beneficial for front end coding projects; though there are many new features offered by CSS3 that enhances the text, layout and look of any type of website. While virtually all browsers are capable of supporting CSS2, the CSS3 coding is only supported by certain browsers and specific features may vary in the browsers that are capable of supporting each individual feature. In general, browsers that are capable of supporting CSS3 coding will be able to support each features; as browsers that do not support CSS3 coding may support some of the features provided. The top ten new features are:
@FontFace – The @FontFace code allows for the user to obtain different fonts by downloading them from a specific web server. The downloaded fonts are saved to the user’s computer for the browser to locate and access. The only requirements necessary for the use of selected fonts are the correct format and the font must be supported for the capability of being implemented as a web font. The older browsers support a different font file extension than the new web browsers; since @FontFace has been used in CSS for a long period of time, this feature is supported by any web browser with the use of the correct format.
Degree Of Transparency – Known as Opacity, this feature provides the option of adjusting the opacity of an entire object from completely transparent to completely opaque. The feature will also apply to the children of the target element, which refers to objects connected to or created by the target element. Modifications to the code will allow the user to choose between altering the opacity of only the target element, or the target element and the children objects together.
R.G.B.A. – One of the many features that allow you to alter color in CSS, the R.G.B.A. coding is an alternative method to the coding for opacity adjustment that allows for changes in color and opacity in select objects instead of the entire object. This feature is only supported by new browsers, this feature is not supported by any of the older verions of web browsers.
BorderRadius – Used to covet the corners of an object, and allows for the user to easily covet all of the corners of an object. Though it has been proven to be more difficult, users are also offered the ability to covet individual corners to a specific degree through modifications to the code and insertion of new pieces of code.
BoxShadow – Applies a shadow, or shadows, to target objects that are referred to as drop shadows. The user is offered the ability to generate a single drop shadow or multiple drop shadows to a single object. The postion of the shadows may be shifted to suit the user’s preference.
TextShadow – Similar to the BoxShadow feature, TextShadow allows the user to add shadows or other special effects to the text. Special effects consist of letterpress style font, embossing of the font and giving the font a glow that radiates around the outer boudaries of the text.
Gradient – Works by adjusting a setting; gives the user the option of setting the level of gradient desired for the background, border and select images. The web browser generates the gradient desired prevent the user from having to manually apply the gradient through the use of an image edit software.
Multiple Images In Background – Modification to the background may now be acheived through the implementation of layers, with each layer containing an image. The layers are used to combine the images selected by the user for use in the background of the website.
Transform – New options provided for the alteration of an objects design. The transform option provides several options for changing the design of an object and they are referred to as; degree of rotation, adjustment of the scale, the ability to skew and an option to modify the matrix of the object.
Property Transition – Enables the user to elegantly shift the fluctuating values of a selected element. This increases the user’s level of control over the specific properties of any element located on the website.