CSS Features

Text Shadow

1. Text Shadow

The CSS3 text-shadow property applies shadow to text. In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px)

2. Box Shadow

The CSS3 box-shadow property applies shadow to elements. In its simplest use, you only specify the horizontal shadow and the vertical shadow

3. Rounded Corners

With CSS3, you can give any element "rounded corners", by using the border-radius property. If you specify only one value for the border-radius property, this radius will be applied to all 4 corners.

However, you can specify each corner separately if you wish. Here are the rules:

• Four values: first value applies to top-left, second value applies to top-right, third value applies to bottom-right, and fourth value applies to bottom-left corner
• Three values: first value applies to top-left, second value applies to top-right and bottom-left, and third value applies to bottom-right
• Two values: first value applies to top-left and bottom-right corner, and the second value applies to top-right and bottom-left corner
• One value: all four corners are rounded equally
4. Multiple Backgrounds

CSS3 allows you to add multiple background images for an element, through the background-image property. The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer.

5. Gradients

CSS3 gradients let you display smooth transitions between two or more specified colors. Earlier, you had to use images for these effects. However, by using CSS3 gradients you can reduce download time and bandwidth usage. In addition, elements with gradients look better when zoomed, because the gradient is generated by the browser.

6. Multi-column Layout

The CSS3 multi-column layout allows easy definition of multiple columns of text - just like in newspapers. The column-count property specifies the number of columns an element should be divided into.

7. Flexible Box

Flexible boxes, or flexbox, is a new layout mode in CSS3. Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents.

8. Media Queries

Media queries in CSS3 extend the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device.

Media queries can be used to check many things, such as:

• width and height of the viewport
• width and height of the device
• orientation (is the tablet/phone in landscape or portrait mode?)
• resolution

Using media queries are a popular technique for delivering a tailored style sheet to tablets, iPhone, and Androids.

9. Text Overflow

The CSS3 text-overflow property specifies how overflowed content that is not displayed should be signaled to the user.

10. Word Wrapping

The CSS3 word-wrap property allows long words to be able to be broken and wrap onto the next line. The word-wrap property allows you to force the text to wrap - even if it means splitting it in the middle of a word