Written by MPS Consultant Xing Su – for more help with this topic, visit Xing at the MPS during his scheduled hours, visible on our Live Schedule.
Though drafted and published as early as 1999, CSS 3 did not get widely adapted or fully supported by most browsers until recently. Here I want to introduce some of the new and most popular features enabled by CSS3 that could not only enhance the presentational semantics a web document, but also make websites much more robust than before.
*When specific browser css commands exist, be sure to specify those.
Border Radius:
This attribute controls the roundness of the corners to a specific region. The syntax is as follows:
border-radius: __px __px __px __px;
If the user specifies only one value, all the corners will have the same roundness. Specifying all four values will allow the user to control the top-left, top-right, bottom-righ, bottom-left corners, respectively, with its own roundness.
Examples
Box Shadow:
This attribute allows the user to add shadow to different elements. The syntax is as follows:
box-shadow: __px __px __px #_______
The values specify horizontal offset, vertical offset, blur radius, and color respectively. For the offsets, the right and down directions are positive, while the left and up are negative.
Examples:
Text Shadow:
This attribute is analogous to box shadow except applied to texts. The syntax is as follows:
text-shadow: __px __px __px #_______
The values specify horizontal offset, vertical offset, blur radius, and color respectively. For the offsets, the right and down directions are positive, while the left and up are negative. The right combinations can create a variety of different effects for the normally dry text.
Example
Gradient:
This attribute can be used to create a gradient of colors to fill an area. The syntax is as follows:
For Firefox:
For Webkit:
The values are explained in the graphics above. Different combinations can be used to create various effects. The best thing to do is just to play around with it.
Example
Multiple Background Images:
This attribute allows to have different background images for a specific element. The syntax is as follows:
background:
url(icon.png) top left no-repeat,
url(icon.png) top right no-repeat,
url(icon.png) bottom left no-repeat,
url(icon.png) bottom right no-repeat;
This is essentially doing several normal background commands. The first value points to a picture. The next two elements specify the position at which the image will be placed. The last value specifies whether or not the image should be repeated.
Example
