~~SLIDESHOW~~ ====== CSS 3 ====== * [[eg-259:css3#Introduction to CSS 3|Introduction to CCS 3]] * [[eg-259:css3#Examples|Examples]] ===== 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 [[http://www.w3.org/Style/CSS/current-work|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.

this is an example of a box with rounded corners
(will only work in Firefox 3+, Safari and Chrome)

//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;
}

this is an example of a box with a gradient border
(will only work in Firefox 3+)

//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;
}

this is an example of a box with a drop shadow
(will only work in Safari and Chrome)

===== 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 [[http://www.css3.info/preview/|CSS 3 previews]] at [[http://www.css3.info|CSS3.info]] showcase the new features has they become supported by browsers. ===== Further Reading ===== * See notes for links. * Live links in module notebook on Blackboard site (External Links) ---- * [[http://designshack.co.uk/tutorials/introduction-to-css3-part-1-what-is-it|An Introduction to CSS]] (6 parts), DesignShack.co.uk, May 2008. * [[http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/|CSS 3 Selectors Explained]], 456 Berea St, January 10th 2006. * [[http://www.webmonkey.com/tutorial/Get_Started_with_CSS_3|Get Started with CSS 3]], WebMonkey.com. * //Everything you need to know about CSS 3//, [[http://www.css3.info|css3.info]]. ===== The Structural and Presentation Layers ===== * [[eg-259:lecture2|Lecture Home]] * [[eg-259:xhtml|The Structural Layer]] * [[eg-259:css|The Presentation Layer]] * [[eg-259:html5|XHTML 2 and HTML 5]] * [[eg-259:css3|CSS 3]]