CSS3 – The latest evolution of the Cascading Style

CSS3 is completely backwards compatible, so you will not have to change existing designs. Browsers will always support CSS2.

CSS3 Modules

It is split up into “modules”. The old specification has been split into smaller pieces, and new ones are also added. Some of the most important modules are:

  • Selectors
  • Box Model
  • Backgrounds and Borders
  • Text Effects
  • 2D/3D Transformations
  • Animations
  • Multiple Column Layout
  • User Interface

Recommendation

Its specification is still under development by W3C. However, many of the new properties have been implemented in modern browsers.

Borders

You can create rounded borders, add shadow to boxes, and use an image as a border – without using a design program, like Photoshop. In this chapter you will learn about the following border properties:

  • border-radius
  • box-shadow
  • border-image

Browser Support

Internet Explorer 9+ supports – border-radius and box-shadow.
Firefox, Chrome, and Safari supports – all of the new border properties.
Note: Safari 5, and older versions, requires the prefix -webkit- for border-image.
Opera supports – border-radius and box-shadow, but requires the prefix -o- for border-image.

Rounded Corners

Adding rounded corners in CSS2 was tricky. We had to use different images for each corner.
In CSS3, creating rounded corners is easy.
In CSS3, create rounded corners with the border-radius property.

Spread the love
Tags:

Add a Comment

Your email address will not be published. Required fields are marked *