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.





the real world.block .block .block

.block.block


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. Nullam malesuada.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada.

the workaround.block .block .block


.wrapper

.wrapper

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.





Quisque volutpat mattis eros.

the really bad workaround


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;}



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.

the solution


4.block

5.block 6.block

321

.block:nth-of-type(3n+1){clear:both;}

what about margins?


321

what about margins?


321

.block:nth-of-type(3n+3){margin-right:0;}

it does that, and more



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

Technology

CSS Nuggets