CWSA CSS 2007-12-04

  • 623 views
Uploaded on

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

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

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
623
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. CSS TIPS & TRICKS David Mead
  • 2. ORGANIZE
  • 3. /* CSS Document for www.anysite.com - Written by David Mead */ /* =DIVS --------------------------------------*/ /* =NAVIGATION --------------------------------------*/ /* =CLASSES --------------------------------------*/ /* =MICROFORMATS --------------------------------------*/ /* =TABLES --------------------------------------*/ /* =FORMS --------------------------------------*/
  • 4. TEMPLATE
  • 5. * { 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; }
  • 6. CSS IS 3D WEB DESIGN
  • 7. http://www.hicksdesign.co.uk/journal/3d-css-box-model <h1>Heading goes here</h1> background-color background-image content border
  • 8. 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; }
  • 9. FLOATS
  • 10. container content-sub content-main
  • 11. container content-sub content-main float: left; float: right;
  • 12. container content-sub content-main float: left; float: right; .clear { clear: both; height: 1px; }
  • 13. CSS 2.1
  • 14. <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>
  • 15. <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%; }
  • 16. <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%; }
  • 17. CSS 3
  • 18. multi-column text drop shadows transparency rounded corners multiple backgrounds http://www.css3.info/preview/
  • 19. -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;
  • 20. THANK YOU http://www.davidjohmead.com http://www.refreshcleveland.org http://twitter.com/davidmead http://claimid.com/davidmead