FB Doug Meet

Search This Blog

July 18, 2011

"Use SVG", "CSS is not meant for this", "blah blah" - yes, I know. Thanks

Style sheets in http://nicolasgallagher.com/lab/html5-logo-in-css2/

Inline style sheet

/*  * "Use SVG", "CSS is not meant for this", "blah blah" - yes, I know. Thanks * Looks best in Firefox 3.6+ and Chrome. Edges are jagged in IE 8 and Opera. * * Nicolas Gallagher (20 Jan 2011) */  html { position:relative; width:364px; height:512px; padding:0; margin:50px auto 0; }  body { padding:0; margin:0; }  h1 { width:100%; height:100px; padding:0; margin:0 0 450px; font:100px/60px 'Arial Black', sans-serif; text-align:center; }  h2 { overflow:hidden; height:0; padding:0; margin:0; text-indent:-999em; }  p { text-align:center; font:14px/1.2 Arial, sans-serif; }  p a { font-weight:bold; color:#D14926; }  /* ------------- LOGO SHAPES ------------- */  html:before, html:after, body:before, body:after, header:before, header:after, h1:before, h1:after, h2:before, h2:after { content:""; position:absolute; }  /* Main shield */  html:before, html:after { z-index:1; left:2px; top:100px; width:292px; border-width:374px 34px 0; border-style:solid; border-color:#e44d26 transparent transparent; }  html:after { left:35px; top:474px; width:0; border-width:40px 146px 0; border-top-color:#e44d26; }  /* Brighter panel of the shield (right side) */  body:before { z-index:2; left:182px; top:130px; border-width:318px 28px 34px 120px; border-style:solid; border-color:#f16529 transparent transparent #f16529; }  /* Top right chunk of "5" */  body:after { z-index:3; left:182px; top:175px; border-width:45px 4px 0px 110px; border-style:solid; border-color:#fff transparent transparent #fff; }  /* Top left chunk of "5" */  header:before, header:after { z-index:3; left:68px; top:175px; border-width:138px 102px 0px 12px; border-style:solid; border-color:#ebebeb #ebebeb transparent transparent; }  header:after { left: 117px; top: 220px; border-width:48px 61px 0px 4px; border-color:#E44D26 #E44D26 transparent transparent; }  /* Bottom left chunk of "5" */  h1:before, h1:after { z-index:3; left:83px; top:335px; border-width:72px 93px 25px 6px; border-style:solid; border-color:#ebebeb #ebebeb transparent transparent; }  h1:after { left:128px; top:335px; border-width:39px 51px 13px 3px; border-color:#E44D26 #E44D26 transparent transparent; }  /* Bottom right chunk of "5" */  h2:before, h2:after { z-index:3; left:182px; top:268px; border-width:139px 11px 25px 94px; border-style:solid; border-color:#fff transparent transparent #fff; }  h2:after { left:182px; top:313px; border-width:60px 4px 14px 52px; border-color:#F16529 transparent transparent #F16529; }

/*
* "Use SVG", "CSS is not meant for this", "blah blah" - yes, I know. Thanks
* Looks best in Firefox 3.6+ and Chrome. Edges are jagged in IE 8 and Opera.
*
* Nicolas Gallagher (20 Jan 2011)
*/

Style sheets in http://nicolasgallagher.com/lab/html5-logo-in-css2/ Inline style sheet /* * "Use SVG", "CSS is not meant for this", "blah blah" - yes, I know. Thanks * Looks best in Firefox 3.6+ and Chrome. Edges are jagged in IE 8 and Opera. * * Nicolas Gallagher (20 Jan 2011) */ html { position:re ...»See Ya