CSS TIPS & TRICKS David Mead
ORGANIZE
/* CSS Document for www.anysite.com - Written by David Mead */ /* =DIVS --------------------------------------*/ /* =NAVIG...
TEMPLATE
* { margin: 0; padding: 0; } body { font-size: small; } img { display: block; border: none; } /* =DIVS -------------------...
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...
h1 { padding: 60px 101px 40px 10px; font-family: &quot;Gill Sans MT&quot;; width: 146px; background: #E6FFE6 url(/img/bkg-...
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=&quo...
<ul id=&quot;blogroll&quot;> <li><a href=&quot;http://www.refreshcleveland.org/&quot; rel=&quot;colleague&quot; title=&quo...
<ul id=&quot;blogroll&quot;> <li><a href=&quot;http://www.refreshcleveland.org/&quot; rel=&quot;colleague&quot; title=&quo...
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-g...
THANK YOU http://www.davidjohmead.com http://www.refreshcleveland.org http://twitter.com/davidmead http://claimid.com/davi...
Upcoming SlideShare
Loading in...5
×

CWSA CSS 2007-12-04

682

Published on

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

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
682
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • CWSA CSS 2007-12-04

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

    ×