CSS Nuggets
-
Upload
anna-debenham -
Category
Technology
-
view
14.430 -
download
6
description
Transcript of CSS Nuggets
CSS Nuggets
http://www.flickr.com/photos/twenty_questions/3491868827
:first and :last
http://www.flickr.com/photos/luiscdiaz/330340600
:first-of-typeLorem 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-typeLorem 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-typetd{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
321
.block:nth-of-type(3n+1){clear:both;}
what about margins?
.block .block .block
321
what about margins?
.block .block .block
321
.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
filetypea[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.0ChromeKonquerorOpera 10
Friggin’ IE
http://www.quirksmode.org/css/contents.html