Table of Contents

~~SLIDESHOW~~

CSS 3

Introduction to CCS 3

(Some of ) the Modules

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

Example: Borders

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;

  1. moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
  2. moz-border-top-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
  3. moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
  4. 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

Further Reading

The Structural and Presentation Layers