CSSchexy Saying hello to CSS3!

Sexy?

Sexy!

E[att^="val"] Attribute value begins with "val"

E[att$="val"] Attribute value ends with "val"

E[att*="val"] Attribute value contains the substring "val"

E ~ F F element that is preceded by an E element

E:not(s) E element that doesn’t match the s selector

E:nth-child(n) The n-th child of its parentE:nth-last-child(n) The n-th child of its parent, from lastE:last-child The last child of its parentE:only-child The only child of its parent

E:nth-of-type(n) The n-th sibling of its typeE:nth-last-of-type(n) The n-th sibling of its type, from last E:first-of-type The first sibling of its typeE:last-of-type The last sibling of its typeE:only-of-type The only sibling of its type

E:root Document’s root element. In HTML, HTML element

E:empty E element that has no children

E:target The target element of the referring URL

E:enabled Form control E that is enabledE:disabled Form control E that is disabledE:checked Form control E that is checked

CSS 3 selectors explained

.rounded-corners { width: 100px; height: 100px; color: #fff; background: #f00; padding: 10px; /* Firefox */ -moz-border-radius: 5px; /* WebKit */ -webkit-border-radius: 5px; /* IE9, Opera 10.5+, Google Chrome */ border-radius: 5px; }

.border-image { width: 100px; height: 100px; border: 20px; padding: 10px; /* Firefox */ -moz-border-image: url(dot.png) 0 20 0 20 round round; /* WebKit */ -webkit-border-image: url(dot.png) 0 20 0 20 round round; /* Opera 10.5+ */ border-image: url(dot.png) 0 20 0 20 round round;}

.border-image { width: 100px; height: 100px; border: 20px; padding: 10px; /* Firefox */ -moz-border-image: url(dot.png) 0 20 0 20 round round; /* WebKit */ -webkit-border-image: url(dot.png) 0 20 0 20 round round; /* Opera 10.5+ */ border-image: url(dot.png) 0 20 0 20 round round;}

.border-colors { width: 100px; height: 100px; color: #fff; border: 10px solid #f00; padding: 10px; /* Firefox */ -moz-border-top-colors: #eee #ddd #ccc #bbb #aaa; -moz-border-left-colors: #111 #222 #333 #444 #555; -moz-border-bottom-colors: #666 #777 #888 #999; /* WebKit - not working */ -webkit-border-top-colors: #eee #ddd #ccc #bbb #aaa; -webkit-border-left-colors: #111 #222 #333 #444 #555; -webkit-border-bottom-colors: #666 #777 #888 #999; /* IE9, Opera 10.5+ - not working */ border-top-colors: #eee #ddd #ccc #bbb #aaa; border-left-colors: #111 #222 #333 #444 #555; border-bottom-colors: #666 #777 #888 #999;}

.border-colors { width: 100px; height: 100px; color: #fff; border: 10px solid #f00; padding: 10px; /* Firefox */ -moz-border-top-colors: #eee #ddd #ccc #bbb #aaa; -moz-border-left-colors: #111 #222 #333 #444 #555; -moz-border-bottom-colors: #666 #777 #888 #999; /* WebKit - not working */ -webkit-border-top-colors: #eee #ddd #ccc #bbb #aaa; -webkit-border-left-colors: #111 #222 #333 #444 #555; -webkit-border-bottom-colors: #666 #777 #888 #999; /* IE9, Opera 10.5+ - not working */ border-top-colors: #eee #ddd #ccc #bbb #aaa; border-left-colors: #111 #222 #333 #444 #555; border-bottom-colors: #666 #777 #888 #999;}

.outline-offset { width: 100px; height: 100px; margin: 30px; padding: 10px; border: 1px solid #000; outline: 1px dotted #00f; outline-offset: 20px;}

.outline-offset { width: 100px; height: 100px; margin: 30px; padding: 10px; border: 1px solid #000; outline: 1px dotted #00f; outline-offset: 20px;}

.shadow { width: 100px; height: 100px; margin: 20px auto; padding: 5px; background: #ffffa2; /* IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color='#000000'); /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color='#000000')"; /* Firefox */ -moz-box-shadow: 3px 3px 10px #000; /* WebKit */ -webkit-box-shadow: 3px 3px 10px #000; /* Standard */ box-shadow: 3px 3px 10px #000;}

.shadow { width: 100px; height: 100px; margin: 20px auto; padding: 5px; background: #ffffa2; /* IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color='#000000'); /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color='#000000')"; /* Firefox */ -moz-box-shadow: 3px 3px 10px #000; /* WebKit */ -webkit-box-shadow: 3px 3px 10px #000; /* Standard */ box-shadow: 3px 3px 10px #000;}

.text-shadow { font-size: 2em; /* Firefox, WebKit, Opera 9+ */ text-shadow: 3px 3px 5px #999;}

.text-shadow { font-size: 2em; /* Firefox, WebKit, Opera 9+ */ text-shadow: 3px 3px 5px #999;}

Images

.multiple-backgrounds { width: 500px; height: 200px; border: 1px solid #f00; padding: 20px; /* Google Chrome, Safari, Firefox, Opera, IE9 */ background: url(dot.png) no-repeat left top, url(1.jpg) no-repeat right top, url(view.jpg) no-repeat left bottom, url(blue-dot.png) no-repeat right bottom;}

.multiple-backgrounds { width: 500px; height: 200px; border: 1px solid #f00; padding: 20px; /* Google Chrome, Safari, Firefox, Opera, IE9 */ background: url(dot.png) no-repeat left top, url(1.jpg) no-repeat right top, url(view.jpg) no-repeat left bottom, url(blue-dot.png) no-repeat right bottom;}

.background-size { width: 100px; height: 100px; color: #fff; background: url(view.jpg) no-repeat; border: 1px solid #0080ff; margin-bottom: 20px; padding: 10px; /* Firefox */ -moz-background-size: 100px 50px; /* WebKit */ -webkit-background-size: 100px 50px; /* Opera 9.5+, Google Chrome, IE9 */ background-size: 100px 50px;}

.background-size { width: 100px; height: 100px; color: #fff; background: url(view.jpg) no-repeat; border: 1px solid #0080ff; margin-bottom: 20px; padding: 10px; /* Firefox */ -moz-background-size: 100px 50px; /* WebKit */ -webkit-background-size: 100px 50px; /* Opera 9.5+, Google Chrome, IE9 */ background-size: 100px 50px;}

.background-size-cover { width: 200px; height: 400px; color: #fff; background: url(view.jpg) no-repeat; border: 1px solid #0080ff; margin-bottom: 20px; padding: 10px; /* Firefox */ -moz-background-size: cover; /* WebKit */ -webkit-background-size: cover; /* Opera 9.5+, Google Chrome, IE9 */ background-size: cover;}

.background-size-cover { width: 200px; height: 400px; color: #fff; background: url(view.jpg) no-repeat; border: 1px solid #0080ff; margin-bottom: 20px; padding: 10px; /* Firefox */ -moz-background-size: cover; /* WebKit */ -webkit-background-size: cover; /* Opera 9.5+, Google Chrome, IE9 */ background-size: cover;}

.background-clip { width: 100px; height: 100px; color: #fff; background: url(view.jpg) no-repeat; border: 1px solid #0080ff; margin-bottom: 20px; padding: 20px; /* Firefox */ -moz-background-clip: content; -moz-background-origin: content; /* WebKit */ -webkit-background-clip: content; -webkit-background-origin: content; /* IE9, Opera 9.5+, Google Chrome */ background-clip: content-box; background-origin: content-box;}

.background-clip { width: 100px; height: 100px; color: #fff; background: url(view.jpg) no-repeat; border: 1px solid #0080ff; margin-bottom: 20px; padding: 20px; /* Firefox */ -moz-background-clip: content; -moz-background-origin: content; /* WebKit */ -webkit-background-clip: content; -webkit-background-origin: content; /* IE9, Opera 9.5+, Google Chrome */ background-clip: content-box; background-origin: content-box;}

base64

.smurfette { background: url(smurfette.png);}

.smurfette { background: url(smurfette.png);}

.smurfette { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAADwCAMAAACe2r56AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAwBQTFRFAAMAAAQA8fbw6O3nAQYAHCEbCA0HlpuV3uPdyM3HR0Dwv8S+BAYRSjvmYmdhDw0yPzTG1NnTCAkdoKWfO0A6LzQuLSiXRjnbeH13goeBtbq0ERYQbnNtqq+pGxxhjJGL7tgZEBVARUpEExA9FBhLTlNNJSokWV5YGBtXOzK6ODCwIiF2JiOBQzfRNCysMCmhKSWMCwonHx9sJisl3cQWMTYwys/J5s4YU0kH1bsWZGljl5yWFBMANC8EAgcBwKsUg4iCt6ESExgSREEFgncNWlEHHR4BEhcRn48PqZoRjZKMoaagZFwKwMW/mYcQZWpkT1ROl4UOY1sJx7MUq7CqyLQVv6oToZERWl9ZmIYPGxwARktFeX54CQ4ICA4AZV0LNTAFkH0OUFVPVUsJioAOHh8Cb3RuMjcxmJ2XeGsKPjoHPEE7fXAPNjEGMy4D1rwXPTkGcWMLXFMJkX4Pem0McmQMFhUBDgwBBw0AMDUvoqehBgwA8/jyqJkQJCYBW2BaJigD3sUXeWwLYloIDgsIcGIKDAsoUUcFOzcEY2hiHiMdJykErLGry9DKiX8Ne24Ntru13+TePDgFMzgyPDO7qpsSuKITFhsVwcbANDkzybUWuaMUQ0AEDw0CXlULbmgN1drUKC0nEhA1gHULExIAHyADR0xGLC8CcHVvHyQea2UKUVZQVVJPICUfDhMNTUEIdHFusZkT6/DqCg8JQj8D6e7oalsLQUZAICBtLicFrbKs38YY2b8aGyBLPUI8CxAKppYWTEAHz7scsJgSICEEyc7ISUYKFxYCopISHB1idXp0uqQVFRgbkn8QbGYLEA4DNzIH+/OhHh5rTkIJzNHLISIFBgsFRTja6dEbCQoeV1RRCQYDKigdSEUJ2t/

CSSEmbed

Gradients

#gradient { color: #fff; height: 100px; margin-bottom: 30px; padding: 10px; /* WebKit */ background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff)); /* Firefox */ background: -moz-linear-gradient(top, #00f, #fff); /* IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF); /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)";}

#gradient { color: #fff; height: 100px; margin-bottom: 30px; padding: 10px; /* WebKit */ background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff)); /* Firefox */ background: -moz-linear-gradient(top, #00f, #fff); /* IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF); /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)";}

#gradient-with-stop { color: #fff; height: 100px; margin-bottom: 30px; padding: 10px; /* WebKit */ background: -webkit-gradient(linear, left top, right top, from(#00f), to(#fff), color-stop(0.7, #fff)); /* Firefox */ background: -moz-linear-gradient(left top, #00f, #fff 70%); /* IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FF0000FF, endColorStr=#FFFFFFFF, GradientType=1); /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#FF0000FF, endColorStr=#FFFFFFFF, GradientType=1);"}

#gradient-with-stop { color: #fff; height: 100px; margin-bottom: 30px; padding: 10px; /* WebKit */ background: -webkit-gradient(linear, left top, right top, from(#00f), to(#fff), color-stop(0.7, #fff)); /* Firefox */ background: -moz-linear-gradient(left top, #00f, #fff 70%); /* IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FF0000FF, endColorStr=#FFFFFFFF, GradientType=1); /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#FF0000FF, endColorStr=#FFFFFFFF, GradientType=1);"}

#gradient-radial { color: #fff; width: 100px; height: 100px; padding: 10px; /* WebKit */ background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 60, from(#ffffa2), to(#00f)); /* Firefox */ background: -moz-radial-gradient(40% 40%, farthest-side, #ffffa2, #00f); /* For Internet Explorer */ /* As if... */}

#gradient-radial { color: #fff; width: 100px; height: 100px; padding: 10px; /* WebKit */ background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 60, from(#ffffa2), to(#00f)); /* Firefox */ background: -moz-radial-gradient(40% 40%, farthest-side, #ffffa2, #00f); /* For Internet Explorer */ /* As if... */}

Multi-column layout

.multi-column { /* Firefox */ -moz-column-width: 13em; -moz-column-gap: 1em; /* WebKit */ -webkit-column-width: 13em; -webkit-column-gap: 1em; /* Standard */ column-width: 13em; column-gap: 1em;}

.multi-column { /* Firefox */ -moz-column-width: 13em; -moz-column-gap: 1em; /* WebKit */ -webkit-column-width: 13em; -webkit-column-gap: 1em; /* Standard */ column-width: 13em; column-gap: 1em;}

box-sizing

.box-sizing { width: 300px; height: 100px; border: 1px solid #0080ff; margin-bottom: 20px; padding: 10px; /* Firefox */ -moz-box-sizing: content-box; /* WebKit */ -webkit-box-sizing: content-box; /* Opera 9.5+, Google Chrome, IE9 */ box-sizing: content-box;}

.box-sizing-border-box { width: 300px; height: 100px; border: 1px solid #0080ff; margin-bottom: 20px; padding: 10px; /* Firefox */ -moz-box-sizing: border-box; /* WebKit */ -webkit-box-sizing: border-box; /* Opera 9.5+, Google Chrome, IE9 */ box-sizing: border-box;}

.box-sizing { width: 300px; height: 100px; border: 1px solid #0080ff; margin-bottom: 20px; padding: 10px; /* Firefox */ -moz-box-sizing: content-box; /* WebKit */ -webkit-box-sizing: content-box; /* Opera 9.5+, Google Chrome, IE9 */ box-sizing: content-box;}

.box-sizing-border-box { width: 300px; height: 100px; border: 1px solid #0080ff; margin-bottom: 20px; padding: 10px; /* Firefox */ -moz-box-sizing: border-box; /* WebKit */ -webkit-box-sizing: border-box; /* Opera 9.5+, Google Chrome, IE9 */ box-sizing: border-box;}

resize

.resize { width: 100px; height: 50px; border: 1px solid #000; overflow: auto; /* Firefox */ -moz-resize: both; /* WebKit */ -webkit-resize: both; /* Google Chrome */ resize: both;}

.resize { width: 100px; height: 50px; border: 1px solid #000; overflow: auto; /* Firefox */ -moz-resize: both; /* WebKit */ -webkit-resize: both; /* Google Chrome */ resize: both;}

font-size-adjust

.font-size-adjust { font: 16px Arial, Helvetica, sans-serif; font-size-adjust: 0.5;}

word-wrap

.word-wrap { width: 100px; height: 100px; padding: 10px; border: 1px solid #000; word-wrap: break-word;}

.word-wrap { width: 100px; height: 100px; padding: 10px; border: 1px solid #000; word-wrap: break-word;}

font-face

@font-face { font-family: "Graublau Web"; src: url("GraublauWeb.eot"); src: local("☺"), url("GraublauWeb.woff") format("woff"), url("GraublauWeb.ttf") format("truetype");}

Bulletproof @font-face syntax

@font-face Generator

I'm Comic Sans, Asshole

RGBa

.alpha70 { position: relative; z-index: 2; width: 100px; height: 100px; color: #fff; padding: 10px; /* Fallback for web browsers that doesn't support RGBa */ background: rgb(0, 0, 0); /* Note: set to transparent for IE */ /* IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000, endColorstr=#b2000000); /* IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000, endColorstr=#b2000000)"; /* RGBa with 0.7 opacity */ background: rgba(0, 0, 0, 0.7);}

.alpha70 { position: relative; z-index: 2; width: 100px; height: 100px; color: #fff; padding: 10px; /* Fallback for web browsers that doesn't support RGBa */ background: rgb(0, 0, 0); /* Note: set to transparent for IE */ /* IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000, endColorstr=#b2000000); /* IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000, endColorstr=#b2000000)"; /* RGBa with 0.7 opacity */ background: rgba(0, 0, 0, 0.7);}

// IE hex alpha - replace 0.6 with your desired alpha levelMath.floor(0.6 * 255).toString(16);

HSLa

.alpha70 { position: relative; z-index: 2; width: 100px; height: 100px; color: #fff; padding: 10px; /* Fallback for web browsers that doesn't support RGBa */ background: #f00; /* Note: set to transparent for IE */ /* For IE 5.5 - 7*/ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FF0000,endColorstr=#B2FF0000); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FF0000,endColorstr=#B2FF0000)"; /* HSLa with 0.7 opacity */ background: hsla(0, 100%, 50%, 0.7);}

.alpha70 { position: relative; z-index: 2; width: 100px; height: 100px; color: #fff; padding: 10px; /* Fallback for web browsers that doesn't support RGBa */ background: #f00; /* Note: set to transparent for IE */ /* For IE 5.5 - 7*/ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FF0000,endColorstr=#B2FF0000); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FF0000,endColorstr=#B2FF0000)"; /* HSLa with 0.7 opacity */ background: hsla(0, 100%, 50%, 0.7);}

Media queries

.media-query-elm { width: 300px; height: 200px; margin-bottom: 20px; padding: 10px; color: #fff; background: #f00;}

@media screen and (min-width: 400px) and (max-width: 1000px) { .media-query-elm { background: #00f; }}

@media screen and (max-width: 399px) { .media-query-elm { color: #000; background: #0f0; }}

/* Using or operator */@media screen and (min-width: 100px),@media handheld { .navigation { width: 350px; }}

/* Use to hide for older user agents */@media only screen and (min-width: 100px) { .navigation { width: 350px; }}

/* Using the not keyword */@media not screen and (min-width: 100px) { .navigation { width: 100%; }}

.portrait,

.landscape { display: none;}

@media screen and (orientation: portrait) { .portrait { display: inline; }}

@media screen and (orientation: landscape) { .landscape { display: inline; }}

Transitions

/* Shorthand version */#hello { display: inline-block; border: 1px dashed #000; padding: 10px; background: #ffffa2; height: 20px; opacity: 0.3;

/* Firefox */ -moz-transition: height 1s ease-out, opacity 1s ease; /* WebKit */ -webkit-transition: height 1s ease-out, opacity 1s ease; /* Opera */ -o-transition: height 1s ease-out, opacity 1s ease; /* Standard */ transition: height 1s ease-out, opacity 1s ease;}

#hello:hover { height: 40px; opacity: 1;}

/* Shorthand version */#hello { display: inline-block; border: 1px dashed #000; padding: 10px; background: #ffffa2; height: 20px; opacity: 0.3;

/* Firefox */ -moz-transition: height 1s ease-out, opacity 1s ease; /* WebKit */ -webkit-transition: height 1s ease-out, opacity 1s ease; /* Opera */ -o-transition: height 1s ease-out, opacity 1s ease; /* Standard */ transition: height 1s ease-out, opacity 1s ease;}

#hello:hover { height: 40px; opacity: 1;}

/* Shorthand version */#hello { display: inline-block; border: 1px dashed #000; padding: 10px; background: #ffffa2; height: 20px; opacity: 0.3;

/* Firefox */ -moz-transition: height 1s ease-out, opacity 1s ease; /* WebKit */ -webkit-transition: height 1s ease-out, opacity 1s ease; /* Opera */ -o-transition: height 1s ease-out, opacity 1s ease; /* Standard */ transition: height 1s ease-out, opacity 1s ease;}

#hello:hover { height: 40px; opacity: 1;}

/* Shorthand version */.menu-item { border: 1px dashed #000; background: #ffffa2; height: 20px; opacity: 0.3; /* Firefox */ -moz-transition: all 1s ease; /* WebKit */ -webkit-transition: all 1s ease; /* Opera */ -o-transition: all 1s ease; /* Standard */ transition: all 1s ease;}

.menu-item:hover { opacity: 1; /* Firefox */ -moz-transform: scale(2) rotate(30deg) translate(50px); /* WebKit */ -webkit-transform: scale(1.2) rotate(30deg) translate(50px); /* Opera */ -o-transform: scale(2) rotate(30deg) translate(50px); /* Standard */ transform: scale(2) rotate(30deg) translate(50px);}

/* Shorthand version */.menu-item { border: 1px dashed #000; background: #ffffa2; height: 20px; opacity: 0.3; /* Firefox */ -moz-transition: all 1s ease; /* WebKit */ -webkit-transition: all 1s ease; /* Opera */ -o-transition: all 1s ease; /* Standard */ transition: all 1s ease;}

.menu-item:hover { opacity: 1; /* Firefox */ -moz-transform: scale(2) rotate(30deg) translate(50px); /* WebKit */ -webkit-transform: scale(1.2) rotate(30deg) translate(50px); /* Opera */ -o-transform: scale(2) rotate(30deg) translate(50px); /* Standard */ transform: scale(2) rotate(30deg) translate(50px);}

/* Shorthand version */.menu-item { border: 1px dashed #000; background: #ffffa2; height: 20px; opacity: 0.3; /* Firefox */ -moz-transition: all 1s ease; /* WebKit */ -webkit-transition: all 1s ease; /* Opera */ -o-transition: all 1s ease; /* Standard */ transition: all 1s ease;}

.menu-item:hover { opacity: 1; /* Firefox */ -moz-transform: scale(2) rotate(30deg) translate(50px); /* WebKit */ -webkit-transform: scale(1.2) rotate(30deg) translate(50px); /* Opera */ -o-transform: scale(2) rotate(30deg) translate(50px); /* Standard */ transform: scale(2) rotate(30deg) translate(50px);}

Mac OS X Stacks with CSS

Animations

.animation-container { height: 60px; padding: 10px; -webkit-animation-name: movearound; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-timing-function: ease;}

@-webkit-keyframes movearound { from { width: 200px; background: #f00; opacity: 0.5; -webkit-transform: scale(0.5) rotate(15deg); } to { width: 400px; background: #ffffa2; opacity: 1; -webkit-transform: scale(1) rotate(0deg); }}

.animation-container { height: 60px; padding: 10px; /* Shorthand syntax */ -webkit-animation: movearound 4s ease 3 normal;}

@-webkit-keyframes movearound { 0% { width: 200px; background: #f00; opacity: 0.5; -webkit-transform: scale(0.5) rotate(15deg); } 30% { width: 300px; background: #f00; opacity: 1; -webkit-transform: scale(1.3) rotate(15deg); } 60% { width: 100px; background: #00f; opacity: 0.3; -webkit-transform: scale(0.3) rotate(15deg); } 100% { width: 400px; background: #ffffa2; opacity: 0.5; -webkit-transform: scale(1) rotate(0deg); }}

3D

Morphing Power Cubes

translate3d(x, y, z), translateZ(z)

scale3d(sx, sy, sz), scaleZ(sz)

rotateX(angle), rotateY(angle), rotate3d(x, y, z, angle),

perspective(p)

matrix3d(…)

-webkit-transform-origin now accepts a z offset too

#container { width: 100%; height: 700px; -webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */ -webkit-perspective-origin: 50% 225px;}#stage { width: 100%; height: 100%; -webkit-transition: -webkit-transform 2s; -webkit-transform-style: preserve-3d;}

#shape { position: relative; top: 160px; margin: 0 auto; height: 200px; width: 200px; -webkit-transform-style: preserve-3d;}

.plane { position: absolute; height: 200px; width: 200px; border: 1px solid white; -webkit-border-radius: 12px; -webkit-box-sizing: border-box; text-align: center; font-family: Times, serif; font-size: 124pt; color: black; background-color: rgba(255, 255, 255, 0.6); -webkit-transition: -webkit-transform 2s, opacity 2s; -webkit-backface-visibility: hidden;}

#shape.backfaces .plane { -webkit-backface-visibility: visible;}

#shape { -webkit-animation: spin 8s infinite linear;}

@-webkit-keyframes spin { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-360deg); }}

/* ---------- cube styles ------------- */.cube > .one { opacity: 0.5; -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);}

.cube > .two { opacity: 0.5; -webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);}

.cube > .three { opacity: 0.5; -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);}

.cube > .four { opacity: 0.5; -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);}

.cube > .five { opacity: 0.5; -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);}

.cube > .six { opacity: 0.5; -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px) rotate(180deg);}

.cube > .seven { -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(90deg) translateZ(100px) rotate(180deg);}

.cube > .eight { -webkit-transform: scale3d(0.8, 0.8, 0.8) translateZ(100px);}

.cube > .nine { -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(90deg) translateZ(100px);}

.cube > .ten { -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(180deg) translateZ(100px);}

.cube > .eleven { -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(-90deg) translateZ(100px);}

.cube > .twelve { -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(-90deg) translateZ(100px);}

Reflections

.reflection { /* WebKit */ -webkit-box-reflect: below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));}

.reflection { /* WebKit */ -webkit-box-reflect: below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));}

Reflections.js for jQuery

calc()

.calc { width: 100px; height: 100px; border: 1px solid #f00; padding: 10px; /* Firefox */ width: -moz-calc(75% - 100px); /* WebKit */ width: -webkit-calc(75% - 100px); /* Opera */ width: -o-calc(75% - 100px); /* Standard */ width: calc(75% - 100px);}

Templates

Tables

Floats

Source order independence

Source order independence

Equal height columns

.template-layouts { display: "ab" "cd";}

.template-layout-a { position: a;}

.template-layout-b { position: b;}

.template-layout-c { position: c;}

.template-layout-d { position: d;}

.template-layouts { display: "ab" "cd";}

.template-layout-a { position: a;}

.template-layout-b { position: b;}

.template-layout-c { position: c;}

.template-layout-d { position: d;}

<div class="template-layouts"> <div class="template-layout-a"> I am element a </div>

<div class="template-layout-b"> I am element b </div>

<div class="template-layout-c"> I am element c </div>

<div class="template-layout-d"> I am element d </div></div>

css-template-layout for jQuery

Grids

body { columns: 3; column-gap: 0.5in;}

img { float: page top right; width: 3gr; }

body { grid-columns: * * (0.5in * *)[2]; grid-rows: 20% *; columns: 3; column-gap: 0.5in;} img { float: page top left; float-offset: 4gr 1gr;}

Web browser support

CSS3 Please!

http://robertnyman.com/css3/

Robert Nymanrobertnyman.com/speaking/

Twitter: @robertnyman

Pictures:

http://www.originalprop.com/blog/2008/03/20/teenage-mutant-ninja-turtles-costume-restoration/http://www.starsjournal.com/3192/bruce-willis-is-being-sued-for-4-million-dollars.htmlhttp://www.olssonfoto.se/JAlbum/SGP%202008%20Ullevi/slides/Svenska%20flaggan.htmlhttp://open.salon.com/blog/just-walt/2009/10/29/real_men_he-men_pictures_whos_the_manliest_of_menhttp://veronica-mars-episodes.download-tvshows.com/kristen-bell-loves-megan-fox/http://blogs.myspace.com/baobingahttp://drboycebankruptcy.blogspot.com/http://www.flickr.com/photos/gurmokh/galleries/72157622521351141/http://www.newlisp.org/index.cgi?Postscripthttp://www.yehoodi.com/comment/57387/picture-post-game-part-ii/62http://edipermadi.wordpress.com/2008/04/22/an-implementation-of-base64-encoderdecoder-using-pic16f84/http://www.freelancewritereditor.com/editorial_newspaper_column.htmlhttp://www.discshop.se/shop/ds_produkt.php?lang=&id=69761&lang=se&subsite=bluray&&ref=http://www.supershareware.com/info/magic-photo-editor.htmlhttp://harveyswallhangers.com/attitude.htmlhttp://www.market-melange.com/tag/goldman-sachs/http://randsco.com/index.php/2009/07/04/p680http://www.candlepowerforums.com/vb/showthread.php?t=286602http://petelepage.com/blog/2010/07/how-to-hsl-and-hsla-color-models/

http://www.cihlinfoto.se/wpblogg/?tag=val-2010http://www.devon.gov.uk/index/socialcare/learning-disability/ldis-total-com-symbols/ldis-symb-vp.htmhttp://tentacolor.com/2007/12/17/project-animation-export-from-blender-update/http://www.tutoriallounge.com/2009/04/20-best-3d-creative-effects-in-photoshop-tutorial-pack/http://www.redbubble.com/people/ruthlambert/art/3375716-3-blue-gill-reflectionhttp://www.apple.com/downloads/dashboard/calculate_convert/calculate.htmlhttp://www.respiro.org/Issue21/Non_fiction/time_sphinx.htmhttp://www.hongkiat.com/blog/60-high-quality-free-web-templates-and-layouts/http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/http://www.photoschau.de/index.php?showimage=25http://failblog.org/2010/09/11/epic-fail-photos-about-to-fail/http://www.zamaanonline.com/category/funny-amazing-stuff/geek-funhttp://failsalon.com/?p=183http://paulirish.com/2010/high-res-browser-icons/http://thefourcornersclassroom.wikispaces.com/Group+30+-+Pre-Projecthttp://www.funonthenet.in/content/view/395/31/