CSS Nuggets

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

3 comments

Comments 1 - 3 of 3 previous next Post a comment

  • + xiaozhanggui xiaozhanggui 1 month ago
    good
  • + mickcai mickcai 2 months ago
    GooD Method! I often meet Grids Problem, Thanks
  • + guestbc70d0f James Osborn 3 months ago
    Great presentation, Anna! A few really nice tips there. Thanks!

    James
Post a comment
Embed Video
Edit your comment Cancel

28 Favorites & 1 Event

CSS Nuggets - Presentation Transcript

  1. CSS Nuggets http://www.flickr.com/photos/twenty_questions/3491868827
  2. :first and :last http://www.flickr.com/photos/luiscdiaz/330340600
  3. :first-of-type Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna. Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. p { font-size : 1em ; }
  4. :first-of-type Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna. Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. p { font-size : 1em ; } p:first-of-type { font-size : 1.2em ; }
  5. :last-of-type Lorem ipsum Dolor sit amet Consectetuer adipiscing elit Phasellus hendrerit td { border-bottom : 1px solid pink ; }
  6. :last-of-type td { border-bottom : 1px solid pink ; } td:last-of-type { border-bottom : 1px solid gray ; } Lorem ipsum Dolor sit amet Consectetuer adipiscing elit Phasellus hendrerit
  7. Grid Layouts http://www.flickr.com/photos/22426181@N00/3651174488
  8. an ideal world .block .block .block .block .block .block Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.
  9. the real world .block .block .block .block .block Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada.
  10. the workaround .block .block .block .block .block .block .wrapper .wrapper Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque volutpat mattis eros.
  11. the really bad workaround .block .block .block Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. .block { height : 400px ; } Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
  12. the solution .block .block .block 4 .block 5 .block 6 .block 3 2 1 .block:nth-of-type(3n+1) { clear : both ; }
  13. what about margins? .block .block .block 3 2 1
  14. what about margins? .block .block .block 3 2 1 .block:nth-of-type(3n+3) { margin-right : 0 ; }
  15. it does that, and more .block .block .block .block .block .block
  16. here’s one I made earlier
  17. faux randomness .tag:nth-of-type(3n+1) { transform : rotate(2deg) ; } .tag:nth-of-type(5n+1) { transform : rotate(-2deg) ; }
  18. Shadows http://www.flickr.com/photos/varmlandspojk/4026394526
  19. shadows .block { box-shadow : 2px 2px 6px #333333 ; } .block
  20. inset shadows .block { box-shadow : inset 2px 2px 6px #333333 ; }
  21. each to its own -webkit-box-shadow -moz-box-shadow filter : shadow(color=gray, direction=100, strength=5) ; Safari Firefox Friggin’ IE
  22. Transform http://www.flickr.com/photos/stevedave/3566325269
  23. transform .block .block { transform : rotate(2deg) ; }
  24. transform .block .block { transform : rotate(2deg) ; padding : 3px ; background-color : white ; border : 1px solid gray ; box-shadow : 2px 2px 3px gray ; }
  25. Icons http://www.flickr.com/photos/piet_musterd/3294909186
  26. [attr] selectors
  27. filetype a[href$=’.pdf’], a[href$=’.PDF’] { background-image : url(../images/icons/pdf.gif) ; } $ means ends with
  28. external websites a[href*=”http://flickr.com”], a[href*=”http://www.flickr.com”] { background-image : url(../images/icons/flickr.gif) ; } * means contains
  29. Support http://www.flickr.com/photos/melissamaples/2887070187
  30. compatibility Firefox 3.5+ Safari 4.0 Chrome Konqueror Opera 10 Friggin’ IE http://www.quirksmode.org/css/contents.html

+ Anna DebenhamAnna Debenham, 3 months ago

custom

4412 views, 28 favs, 52 embeds more stats

More info about this presentation

© All Rights Reserved

  • Total Views 4412
    • 2919 on SlideShare
    • 1493 from embeds
  • Comments 3
  • Favorites 28
  • Downloads 96
Most viewed embeds
  • 886 views on http://www.qianduan.net
  • 174 views on http://www.chinaz.com
  • 120 views on http://maban.co.uk
  • 99 views on http://www.webjx.com
  • 30 views on http://chinaz.com

more

All embeds
  • 886 views on http://www.qianduan.net
  • 174 views on http://www.chinaz.com
  • 120 views on http://maban.co.uk
  • 99 views on http://www.webjx.com
  • 30 views on http://chinaz.com
  • 21 views on http://kiya.cn
  • 21 views on http://www.dadait.cn
  • 13 views on http://www.22333.com
  • 10 views on http://www.cssk8.com
  • 9 views on http://demo.virtualtest.net
  • 9 views on http://www.zmool.com
  • 8 views on http://www.vitavisual.com
  • 7 views on http://wap.qianduan.net
  • 7 views on http://www.yindaoxian.com
  • 6 views on http://xianguo.com
  • 6 views on http://www.bobd.cn
  • 6 views on http://blog.ntx.me
  • 5 views on http://liuchangjun.com
  • 4 views on http://yuanyun.blogbus.com
  • 4 views on http://www.pcjcw.net
  • 4 views on http://www.dadait.com
  • 3 views on http://www.zhuaxia.com
  • 3 views on http://www.5120w.com
  • 3 views on http://www.dabaoku.com
  • 2 views on http://www.3389hack.com
  • 2 views on http://www.isyb.net
  • 2 views on http://slj.me
  • 2 views on http://zmool.com
  • 2 views on http://big5.chinaz.com:88
  • 2 views on http://hunuonew.gzdot.com
  • 2 views on http://brawn.es
  • 1 views on http://caminodelcid.net
  • 1 views on http://www.taoba123.com
  • 1 views on http://www.web1997.com
  • 1 views on http://virgenesnegras.com
  • 1 views on http://www.itfeed.cn
  • 1 views on http://feed.qianduan.net
  • 1 views on http://www.waweb.cn
  • 1 views on http://203.208.39.132
  • 1 views on http://feisi.net
  • 1 views on http://paratorpes.es
  • 1 views on http://www.virgenesnegras.com
  • 1 views on http://hi.baidu.com
  • 1 views on http://www.s-cai.cn
  • 1 views on http://10consejos.com
  • 1 views on http://grancanario.com
  • 1 views on http://reader.youdao.com
  • 1 views on http://webjx.com
  • 1 views on http://www.poluoluo.com
  • 1 views on http://www.th7.cn
  • 1 views on http://www.xunzz.com
  • 1 views on http://www.daima123.com

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories

Groups / Events