ICCT Wiki

User Tools

Site Tools

Trace:
eg-259:css3

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
eg-259:css3 [2008/09/24 17:07] – eechriseg-259:css3 [2011/01/14 12:46] (current) – external edit 127.0.0.1
Line 1: Line 1:
 +~~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:
 +
 +<code css>.border_rounded {
 +  background-color: #ddccb5;
 +  -moz-border-radius: 5px;
 +  -webkit-border-radius: 5px;
 +  border: 2px solid #897048;
 +  padding: 10px;
 +  width: 310px;
 +}
 +</code>
 +
 +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:
 +
 +<code css>
 +.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;
 +}
 +</code>
 +
 +<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:
 +
 +<code css>
 +.border_shadow {
 +  -webkit-box-shadow: 10px 10px 5px #888;
 +  padding: 5px 5px 5px 15px;
 +  width: 300px;
 +}</code>
 +
 +<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 [[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]]