CSS3 is the abbreviated form of Cascading Style Sheet version 3. CSS3 is used to define the format of the web pages. It is used with HTML, XML and XHTML. Primarily Cascading Style Sheets was developed to separate the presentation code from the content of the document. Now
CSS3 is divided into various modules to provide better functionality to a web page. The important modules of CSS3 are –
Box Models
Selectors
Borders and Backgrounds
Text Effects
Animations
2D/ 3D Transformations
User Interface
You can do a number of things with the help of CSS3, such as
Rounded Corners
You can create rounded borders by using CSS3. For making rounded borders, you need to use the” border-radius” property.
Border Image
By using the “border-image” property of CSS3 you can create a border with an image.
Box Shadow
You can use “Box-shadow” property for adding shadow to a box. You can add one or more shadows to a box.
Backgrounds
CSS3 is equipped with new properties for managing background of a web page. There are two background properties, which help in controlling the background.
background-size: Prior to CSS3, specifying the size of background image was not possible. With CSS3, you can re-size the background image.
background-origin: You can specify background image’s positioning area by using this property. The image of the background could be placed in border-box, padding-box or content-box area.
You can also use multiple images for background for any element.
Gradients
With CSS3 gradients, you can display a transition between two or more colors. There are two different types of CSS3 Gradients:
Linear Gradients: You need to define two or more color stops. The effect of linear gradients can go up, down, left, right or diagonally.
Radial Gradients: These gradients are defined by their center. You need to specify two or more color stops for a radial gradient. You can also define the shape of the gradient either circle or ellipse.
Text Effects
CSS3 has some additional features for text. These are –
Text Shadow: The “text-shadow” feature of CSS3 allows you to add shadow to any text. By using this feature you can specify vertical and horizontal shadow. In addition to this, you can also specify the color and blur distance of the shadow.
Word Wrap: You can wrap a text by using “word-wrap” property, no matter if the word is not completed and needs to break from the middle.
Designer Fonts
Prior to CSS3, the web-designers are forced to use the fonts installed on the computer. However, in CSS3 you can use any of the fonts. You need to define the font using “@font-face” property. You can also define the font-style, font-weight, font-stretch, etc.
2D Transformation
CSS3 allows the 2-dimensional transformation of elements. The different methods to use 2D transformations includes –
Translate()
Matrix()
Scale()
Skew()
Rotate()
3D Transformation
CSS3 also allows 3-dimensional transformation of the element. Following two methods are used to perform this task –
rotateX()
rotateY()
Animation
CSS3 also allows you to create animations. You can define the name and time of the animation.
