What can CSS3 really do?

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


Borders and Backgrounds

Text Effects


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.


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.


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 –






3D Transformation

CSS3 also allows 3-dimensional transformation of the element. Following two methods are used to perform this task –




CSS3 also allows you to create animations. You can define the name and time of the animation.

Jacob Billings
I am a software engineer and a linguist. I hold a bachelors degree in Middle Eastern Studies from the University of Utah, a Master’s degree in linguistics from Francisco Marroquín University in Guatemala City and working on a double doctorate degree in Archaeology and Mathematics.

Software Development: I bring over 17 years of experience in developing software for multiple clients in various environments. I have a solid knowledge of PHP, Javascript, MySQL, Python, and Java.

Over my career, I have had the opportunity to work on projects for some of the most recognized brands on the planet. Brands like Marriott Hotels, Microsoft, Ashland Chemical, Capital One Credit Cards, Cadbury Schweppes, GE and more. This has given me an in-depth understanding of my client's challenges as they grow. I know how to get a company from startup to maturity with technology. My specialties are in E-commerce(specifically Magento), process automation, and security.