CSS Features

Text Shadow

Box Shadow

Rounded Corners

  1. Text Shadow
  2. 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)

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

  5. Rounded Corners
  6. 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:

  7. Multiple Backgrounds
  8. 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.

  9. Gradients
  10. 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.

  11. Multi-column Layout
  12. 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.

  13. Flexible Box
  14. 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.

  15. Media Queries
  16. 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:

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

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

  19. Word Wrapping
  20. 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