CSS 3

Introduction to CCS 3

What is it?
What does it provide?
Evolutionary

What is it?
- extension to CSS 2
- modular – many modules at different levels of completeness
- backwards compatible
What does it provide?
- new properties and new selectors
- improvements to make common layout and effects easier
Evolutionary
- browser developers gradually adopting features
- other features provided by JavaScript libraries

(Some of ) the Modules

The Box Model
Lists Module
Hyperlink Presentation
Speech Module
Backgrounds and Borders
Text Effects
Multi-Column Layout

Many more, including indication of status, at W3C Cascading Style Sheets: Current Work.

Example: Borders

Rounded Borders – border-radius property
Gradients – border-colors property
Drop Shadows – box-shadow property

Notes

Rounded Corners

Achieving rounded borders using current CSS coding can be tricky -– there are numerous methods available, but none are extremely straight forward. Creating individual images for each border is often needed in addition. Using CSS3, creating a rounded border is incredibly easy. It can be applied to each corner or individual corners, and the width/colour are easily altered. The CSS code is:

.border_rounded {
  background-color: #ddccb5;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 2px solid #897048;
  padding: 10px;
  width: 310px;
}

Note until the new CSS3 properties are supported by all browsers a convention has developed wherein a browser prefix is added to the property. thus for Firefox: -moz-border-radius; and for WebKit (Safari and Chrome): -webkit-border-radius. When CSS is widely supported, the prefix can be dropped. For now, the prefix and duplication is needed. Unknown properties will be ignored so older browsers will just ignore border-radius and a standard rectangular border will be generated.

<html> <p style=“background-color: #ddccb5; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 2px solid #897048; padding: 10px; width: 310px;”>this is an example of a box with rounded corners<br /> (will only work in Firefox 3+, Safari and Chrome)</p></html>

Gradients

Gradient borders can look effective if used correctly. The code is a little more complex, requiring you to define each colour of the gradient. The CSS code is:

.border_gradient {
  border: 8px solid #000;
  -moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
  -moz-border-top-colors:  #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
  -moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
  -moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
  padding: 5px 5px 5px 15px;
  width: 300px;
}

<html> <p style=“ border: 8px solid #000;

moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
moz-border-top-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;

padding: 5px 5px 5px 15px;

width: 300px;">this is an example of a box with a gradient border<br />(will only work in Firefox 3+)</p></html>

Box Shadows

Adding a shadow to an element is difficult at present –- it is a good way to differentiate a certain area, but as with any effect, it should be used sparingly. The CSS code is:

.border_shadow {
  -webkit-box-shadow: 10px 10px 5px #888;
  padding: 5px 5px 5px 15px;
  width: 300px;
}

<html> <p style=”-webkit-box-shadow: 10px 10px 5px #888;

padding: 5px 5px 5px 15px;
width: 300px;">this is an example of a box with a drop shadow<br />(will only work in Safari and Chrome)</p></html>

Demos

Many modules are not fully defined
Some modules are partially defined but implemented in browsers in an experimental sense
Some modules are complete
The examples CSS 3 previews at CSS3.info showcase the new features has they become supported by browsers.

ICCT Wiki

Table of Contents

CSS 3

Introduction to CCS 3

(Some of ) the Modules

Example: Borders

Demos

Further Reading

The Structural and Presentation Layers