CSSchexy - Saying hello to CSS3!

CSSchexy Saying hello to CSS3!

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 parent E:nth-last-child(n) The n-th child of its parent, from last E:last-child The last child of its parent E:only-child The only child of its parent E:nth-of-type(n) The n-th sibling of its type E:nth-last-of-type(n) The n-th sibling of its type, from last E:first-of-type The first sibling of its type E:last-of-type The last sibling of its type E: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 enabled E:disabled Form control E that is disabled E: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-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; }

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

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

.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-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,iVBORw0KGgoAAAANSUhEUgAAALQAAADwCAMAAACe2r5 6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA wBQTFRFAAMAAAQA8fbw6O3nAQYAHCEbCA0HlpuV3uPdyM3HR0Dwv8S +BAYRSjvmYmdhDw0yPzTG1NnTCAkdoKWfO0A6LzQuLSiXRjnbeH13g oeBtbq0ERYQbnNtqq +pGxxhjJGL7tgZEBVARUpEExA9FBhLTlNNJSokWV5YGBtXOzK6ODCw IiF2JiOBQzfRNCysMCmhKSWMCwonHx9sJisl3cQWMTYwys/ J5s4YU0kH1bsWZGljl5yWFBMANC8EAgcBwKsUg4iCt6ESExgSREEFg ncNWlEHHR4BEhcRn48PqZoRjZKMoaagZFwKwMW/ mYcQZWpkT1ROl4UOY1sJx7MUq7CqyLQVv6oToZERWl9ZmIYPGxwARk tFeX54CQ4ICA4AZV0LNTAFkH0OUFVPVUsJioAOHh8Cb3RuMjcxmJ2X eGsKPjoHPEE7fXAPNjEGMy4D1rwXPTkGcWMLXFMJkX4Pem0McmQMFh UBDgwBBw0AMDUvoqehBgwA8/ jyqJkQJCYBW2BaJigD3sUXeWwLYloIDgsIcGIKDAsoUUcFOzcEY2hi HiMdJykErLGry9DKiX8Ne24Ntru13+TePDgFMzgyPDO7qpsSuKITFh sVwcbANDkzybUWuaMUQ0AEDw0CXlULbmgN1drUKC0nEhA1gHULExIA HyADR0xGLC8CcHVvHyQea2UKUVZQVVJPICUfDhMNTUEIdHFusZkT6/ DqCg8JQj8D6e7oalsLQUZAICBtLicFrbKs38YY2b8aGyBLPUI8CxAK ppYWTEAHz7scsJgSICEEyc7ISUYKFxYCopISHB1idXp0uqQVFRgbkn 8QbGYLEA4DNzIH+/ 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-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... */ }

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

box-sizing

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

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

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

.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 level Math.floor(0.6 * 255).toString(16);

.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 */ .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); } }

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

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" <div class="template-layouts"> "cd"; <div class="template-layout-a"> } I am element a </div> .template-layout-a { position: a; <div class="template-layout-b"> } I am element b </div> .template-layout-b { position: b; <div class="template-layout-c"> } I am element c </div> .template-layout-c { position: c; <div class="template-layout-d"> } I am element d </div> .template-layout-d { </div> position: d; }

css-template-layout for jQuery

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 Nyman robertnyman.com/speaking/ Twitter: @robertnyman Pictures: http://www.originalprop.com/blog/2008/03/20/teenage-mutant-ninja-turtles-costume-restoration/ http://www.cihlinfoto.se/wpblogg/?tag=val-2010 http://www.starsjournal.com/3192/bruce-willis-is-being-sued-for-4-million-dollars.html http://www.devon.gov.uk/index/socialcare/learning-disability/ldis-total-com-symbols/ldis- http://www.olssonfoto.se/JAlbum/SGP%202008%20Ullevi/slides/Svenska%20flaggan.html symb-vp.htm http://open.salon.com/blog/just-walt/2009/10/29/real_men_he-men_pictures_whos_the_manliest_of_men http://tentacolor.com/2007/12/17/project-animation-export-from-blender-update/ http://veronica-mars-episodes.download-tvshows.com/kristen-bell-loves-megan-fox/ http://www.tutoriallounge.com/2009/04/20-best-3d-creative-effects-in-photoshop-tutorial- http://blogs.myspace.com/baobinga pack/ http://drboycebankruptcy.blogspot.com/ http://www.redbubble.com/people/ruthlambert/art/3375716-3-blue-gill-reflection http://www.flickr.com/photos/gurmokh/galleries/72157622521351141/ http://www.apple.com/downloads/dashboard/calculate_convert/calculate.html http://www.newlisp.org/index.cgi?Postscript http://www.respiro.org/Issue21/Non_fiction/time_sphinx.htm http://www.yehoodi.com/comment/57387/picture-post-game-part-ii/62 http://www.hongkiat.com/blog/60-high-quality-free-web-templates-and-layouts/ http://edipermadi.wordpress.com/2008/04/22/an-implementation-of-base64-encoderdecoder-using-pic16f84/ http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create- http://www.freelancewritereditor.com/editorial_newspaper_column.html a-mobile-version-of-your-website/ http://www.discshop.se/shop/ds_produkt.php?lang=&id=69761&lang=se&subsite=bluray&&ref= http://www.photoschau.de/index.php?showimage=25 http://www.supershareware.com/info/magic-photo-editor.html http://failblog.org/2010/09/11/epic-fail-photos-about-to-fail/ http://harveyswallhangers.com/attitude.html http://www.zamaanonline.com/category/funny-amazing-stuff/geek-fun http://www.market-melange.com/tag/goldman-sachs/ http://failsalon.com/?p=183 http://randsco.com/index.php/2009/07/04/p680 http://paulirish.com/2010/high-res-browser-icons/ http://www.candlepowerforums.com/vb/showthread.php?t=286602 http://thefourcornersclassroom.wikispaces.com/Group+30+-+Pre-Project http://petelepage.com/blog/2010/07/how-to-hsl-and-hsla-color-models/ http://www.funonthenet.in/content/view/395/31/

CSSchexy - Saying hello to CSS3!

by Robert Nyman

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 6

Statistics