CSS Nuggets
Upcoming SlideShare
Loading in...5
×
 

CSS Nuggets

on

  • 14,452 views

 

Statistics

Views

Total Views
14,452
Views on SlideShare
8,255
Embed Views
6,197

Actions

Likes
38
Downloads
214
Comments
3

113 Embeds 6,197

http://www.qianduan.net 2048
http://how2designweb.wordpress.com 1994
http://maban.co.uk 400
http://www.webjx.com 363
http://www.poluoluo.com 354
http://www.chinaz.com 205
http://slj.me 79
http://jokerliang.com 71
http://lanyrd.com 71
http://blog.ntx.me 33
http://chinaz.com 32
http://www.zuixiami.com 32
http://www.warting.com 25
http://www.cnblogs.com 25
http://www.yindaoxian.com 23
http://www.dadait.cn 22
http://www.pqshow.com 22
http://kiya.cn 21
http://www.lingzhong.cn 21
http://www.zmool.com 19
https://online.fvtc.edu 18
https://how2designweb.wordpress.com 18
http://www.22333.com 16
http://www.gb2312.net 15
http://yuanyun.blogbus.com 14
https://fvtc.blackboard.com 12
http://youth.huanghuai.edu.cn 12
http://www.bobd.cn 12
http://liuchangjun.com 11
http://www.cssk8.com 11
http://www.slideshare.net 10
http://www.maban.co.uk 9
http://demo.virtualtest.net 9
http://www.dabaoku.com 9
http://wap.qianduan.net 9
http://xianguo.com 8
http://www.vitavisual.com 8
http://www.pcjcw.net 7
http://www.dadait.com 6
http://maban-site 6
http://www.zhzhzh.com 4
http://www.codesky.net 4
http://big5.chinaz.com:88 4
http://webcache.googleusercontent.com 3
http://www.zhuaxia.com 3
http://www.03759.com 3
http://www.zoolc.com 3
http://danielwang130.blogspot.com 3
http://www.3389hack.com 3
http://www.waweb.cn 3
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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…
  • good
    Are you sure you want to
    Your message goes here
    Processing…
  • GooD Method! I often meet Grids Problem, Thanks
    Are you sure you want to
    Your message goes here
    Processing…
  • Great presentation, Anna! A few really nice tips there. Thanks!

    James
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

CSS Nuggets CSS Nuggets Presentation Transcript

  • CSS Nuggets http://www.flickr.com/photos/twenty_questions/3491868827
  • :first and :last http://www.flickr.com/photos/luiscdiaz/330340600
  • :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 ; }
  • :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 ; }
  • :last-of-type Lorem ipsum Dolor sit amet Consectetuer adipiscing elit Phasellus hendrerit td { border-bottom : 1px solid pink ; }
  • :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
  • Grid Layouts http://www.flickr.com/photos/22426181@N00/3651174488
  • 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.
  • 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.
  • 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.
  • 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.
  • the solution .block .block .block 4 .block 5 .block 6 .block 3 2 1 .block:nth-of-type(3n+1) { clear : both ; }
  • what about margins? .block .block .block 3 2 1
  • what about margins? .block .block .block 3 2 1 .block:nth-of-type(3n+3) { margin-right : 0 ; }
  • it does that, and more .block .block .block .block .block .block
  • here’s one I made earlier
  • faux randomness .tag:nth-of-type(3n+1) { transform : rotate(2deg) ; } .tag:nth-of-type(5n+1) { transform : rotate(-2deg) ; }
  • Shadows http://www.flickr.com/photos/varmlandspojk/4026394526
  • shadows .block { box-shadow : 2px 2px 6px #333333 ; } .block
  • inset shadows .block { box-shadow : inset 2px 2px 6px #333333 ; }
  • each to its own -webkit-box-shadow -moz-box-shadow filter : shadow(color=gray, direction=100, strength=5) ; Safari Firefox Friggin’ IE
  • Transform http://www.flickr.com/photos/stevedave/3566325269
  • transform .block .block { transform : rotate(2deg) ; }
  • transform .block .block { transform : rotate(2deg) ; padding : 3px ; background-color : white ; border : 1px solid gray ; box-shadow : 2px 2px 3px gray ; }
  • Icons http://www.flickr.com/photos/piet_musterd/3294909186
  • [attr] selectors
  • filetype a[href$=’.pdf’], a[href$=’.PDF’] { background-image : url(../images/icons/pdf.gif) ; } $ means ends with
  • external websites a[href*=”http://flickr.com”], a[href*=”http://www.flickr.com”] { background-image : url(../images/icons/flickr.gif) ; } * means contains
  • Support http://www.flickr.com/photos/melissamaples/2887070187
  • compatibility Firefox 3.5+ Safari 4.0 Chrome Konqueror Opera 10 Friggin’ IE http://www.quirksmode.org/css/contents.html