• Save
CWSA CSS 2007-12-04
Upcoming SlideShare
Loading in...5
×
 

CWSA CSS 2007-12-04

on

  • 1,123 views

Presentation about CSS to the CWSA on 4th December 2007.

Presentation about CSS to the CWSA on 4th December 2007.

Statistics

Views

Total Views
1,123
Views on SlideShare
1,120
Embed Views
3

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 3

http://www.linkedin.com 2
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

CWSA CSS 2007-12-04 CWSA CSS 2007-12-04 Presentation Transcript

  • CSS TIPS & TRICKS David Mead
  • ORGANIZE
  • /* CSS Document for www.anysite.com - Written by David Mead */ /* =DIVS --------------------------------------*/ /* =NAVIGATION --------------------------------------*/ /* =CLASSES --------------------------------------*/ /* =MICROFORMATS --------------------------------------*/ /* =TABLES --------------------------------------*/ /* =FORMS --------------------------------------*/
  • TEMPLATE
  • * { margin: 0; padding: 0; } body { font-size: small; } img { display: block; border: none; } /* =DIVS --------------------------------------*/ #access-links { position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden; } /* =TABLES --------------------------------------*/ table { border-collapse: collapse; border-spacing: 0; }
  • CSS IS 3D WEB DESIGN
  • http://www.hicksdesign.co.uk/journal/3d-css-box-model <h1>Heading goes here</h1> background-color background-image content border
  • h1 { padding: 60px 101px 40px 10px; font-family: &quot;Gill Sans MT&quot;; width: 146px; background: #E6FFE6 url(/img/bkg-h1.gif) no-repeat top right; border-right: thick solid #E6FFE6; }
  • FLOATS
  • container content-sub content-main
  • container content-sub content-main float: left; float: right;
  • container content-sub content-main float: left; float: right; .clear { clear: both; height: 1px; }
  • CSS 2.1
  • <ul id=&quot;blogroll&quot;> <li><a href=&quot;http://www.refreshcleveland.org/&quot; rel=&quot;colleague&quot; title=&quot;web standards in Cleveland&quot;>RefreshCleveland</a></li> <li><a href=&quot;http://www.meyerweb.com/&quot; rel=&quot;met colleague contact&quot; title=&quot;Eric Meyer&quot;>Meyerweb</a></li>
  • <ul id=&quot;blogroll&quot;> <li><a href=&quot;http://www.refreshcleveland.org/&quot; rel=&quot;colleague&quot; title=&quot;web standards in Cleveland&quot;>RefreshCleveland</a></li> <li><a href=&quot;http://www.meyerweb.com/&quot; rel=&quot;met colleague contact&quot; title=&quot;Eric Meyer&quot;>Meyerweb</a></li> #blogroll { list-style: none; } #blogroll a { padding-left: 26px; } #blogroll a[rel~=&quot;friend&quot;][rel~=&quot;met&quot;] { background: url(http://images.optiem.com/optiem/blogs/xfn-friend-met.png) no-repeat 0 50%; } #blogroll a[rel~=&quot;colleague&quot;][rel~=&quot;met&quot;] { background: url(http://images.optiem.com/optiem/blogs/xfn-colleague-met.png) no-repeat 0 50%; }
  • <ul id=&quot;blogroll&quot;> <li><a href=&quot;http://www.refreshcleveland.org/&quot; rel=&quot;colleague&quot; title=&quot;web standards in Cleveland&quot;>RefreshCleveland</a></li> <li><a href=&quot;http://www.meyerweb.com/&quot; rel=&quot; met colleague contact&quot; title=&quot;Eric Meyer&quot;>Meyerweb</a></li> #blogroll { list-style: none; } #blogroll a { padding-left: 26px; } #blogroll a[rel~=&quot;friend&quot;] [rel~=&quot;met&quot;] { background: url(http://images.optiem.com/optiem/blogs/xfn-friend-met.png) no-repeat 0 50%; } #blogroll a[rel~=&quot;colleague&quot;][rel~=&quot;met&quot;] { background: url(http://images.optiem.com/optiem/blogs/xfn-colleague-met.png) no-repeat 0 50%; }
  • CSS 3
  • multi-column text drop shadows transparency rounded corners multiple backgrounds http://www.css3.info/preview/
  • -webkit-box-shadow: 2px 2px 5px #ccc; -moz-border-radius: 5%; -moz-column-width: 6em; -moz-column-count: 3; -moz-column-gap: 1em; -moz-column-rule: 1px solid #FFF;
  • THANK YOU http://www.davidjohmead.com http://www.refreshcleveland.org http://twitter.com/davidmead http://claimid.com/davidmead