{"id":283,"date":"2009-02-27T15:50:51","date_gmt":"2009-02-27T23:50:51","guid":{"rendered":"http:\/\/blog.mozilla.org\/webdev\/?p=283"},"modified":"2017-03-08T14:50:08","modified_gmt":"2017-03-08T22:50:08","slug":"css3-awesome-test","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/webdev\/2009\/02\/27\/css3-awesome-test\/","title":{"rendered":"CSS3 Awesome Test"},"content":{"rendered":"<p>Just for fun, I decided to whip up one big awesome demonstration of some new CSS3 features in Firefox 3.1.<\/p>\n<style type=\"text\/css\" media=\"screen\">\n\t@font-face {\n    \tfont-family: Delicious;\n    \tsrc: url('http:\/\/blog.mozilla.org\/webdev\/files\/2009\/02\/delicious-roman.otf');\n    }\n   #css3test {\n\t       width: 350px;\n\t       margin: 0 auto;\n\t       background: #000;\n\t       padding: 20px;\n\t       color: #fff;\n\t       text-align:left;\n\t       -moz-border-radius: 10px;\n\t       text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;\n\t       -moz-box-shadow: 10px 10px 5px #888;\n           -moz-column-count: 3;\n           -moz-column-gap: 1em;\n           -moz-column-rule: 1px solid white;\n           font-family: Delicious, sans-serif;\n           font-size:127% !important;\n           border: 8px solid #000;\n           -moz-border-bottom-colors:#CC0000 #BB0000 #AA0000 #990000 #880000 #770000 #660000 #550000;\n           -moz-border-left-colors:#CC0000 #BB0000 #AA0000 #990000 #880000 #770000 #660000 #550000;\n           -moz-border-right-colors:#CC0000 #BB0000 #AA0000 #990000 #880000 #770000 #660000 #550000;\n           -moz-border-top-colors:#CC0000 #BB0000 #AA0000 #990000 #880000 #770000 #660000 #550000;\n\t   }\n\t<\/style>\n<div id=\"css3test\">\n<p>This is a CSS3 awesome test. It demonstrates some of the awesome parts of CSS3 implemented in Firefox 3.1.<\/p>\n<\/div>\n<p>In case you aren&#8217;t using a Firefox 3.1 beta, here&#8217;s what you would see:<br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/blog.mozilla.org\/webdev\/files\/2009\/02\/css3.png\" alt=\"CSS3 example\" title=\"CSS3 example\" width=\"430\" height=\"141\" class=\"alignnone size-full wp-image-298\" srcset=\"https:\/\/blog.mozilla.org\/webdev\/files\/2009\/02\/css3.png 430w, https:\/\/blog.mozilla.org\/webdev\/files\/2009\/02\/css3-300x98.png 300w\" sizes=\"(max-width: 430px) 100vw, 430px\" \/><\/p>\n<h4>CSS3 Used<\/h4>\n<ul>\n<li><a href=\"http:\/\/www.w3.org\/TR\/2005\/WD-css3-background-20050216\/#the-border-radius\">border-radius<\/a>*<\/li>\n<li><a href=\"http:\/\/www.w3.org\/TR\/2003\/CR-css3-text-20030514\/#text-shadows\">text-shadow<\/a><\/li>\n<li><a href=\"http:\/\/www.w3.org\/TR\/css3-background\/#the-box-shadow\">box-shadow<\/a>*<\/li>\n<li><a href=\"http:\/\/www.w3.org\/TR\/css3-multicol\/\">column-width<\/a>*<\/li>\n<li><a href=\"http:\/\/www.w3.org\/TR\/css3-multicol\/\">column-gap<\/a>*<\/li>\n<li><a href=\"http:\/\/www.w3.org\/TR\/css3-multicol\/\">column-rule<\/a>*<\/li>\n<li><a href=\"http:\/\/www.w3.org\/TR\/css3-webfonts\/#font-descriptions\">@font-face<\/a><\/li>\n<li>border-color* (link removed, no spec found for border-colors)<\/li>\n<\/ul>\n<p>* -moz prefix used.<\/p>\n<p><a href=\"http:\/\/www.josbuivenga.demon.nl\/delicious.html\">Jos Buivenga\u2019s Delicious font<\/a> used for @font-face.<\/p>\n<p>Text-shadow code borrowed from <a href=\"http:\/\/www.css3.info\/preview\/text-shadow\/\">css3.info<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Just for fun, I decided to whip up one big awesome demonstration of some new CSS3 features in Firefox 3.1. This is a CSS3 awesome test. It demonstrates some of the awesome parts of CSS3 implemented in Firefox 3.1. In &hellip; <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/webdev\/2009\/02\/27\/css3-awesome-test\/\">Continue reading<\/a><\/p>\n","protected":false},"author":1438,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[288],"tags":[],"coauthors":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS3 Awesome Test - Mozilla Web Development<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.mozilla.org\/webdev\/2009\/02\/27\/css3-awesome-test\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"mozilla\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2009\/02\/27\/css3-awesome-test\/\",\"url\":\"https:\/\/blog.mozilla.org\/webdev\/2009\/02\/27\/css3-awesome-test\/\",\"name\":\"CSS3 Awesome Test - Mozilla Web Development\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2009\/02\/27\/css3-awesome-test\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2009\/02\/27\/css3-awesome-test\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/blog.mozilla.org\/webdev\/files\/2009\/02\/css3.png\",\"datePublished\":\"2009-02-27T23:50:51+00:00\",\"dateModified\":\"2017-03-08T22:50:08+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/70ae25c16f09d053c6d8b5eac29dbda9\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2009\/02\/27\/css3-awesome-test\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/webdev\/2009\/02\/27\/css3-awesome-test\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2009\/02\/27\/css3-awesome-test\/#primaryimage\",\"url\":\"http:\/\/blog.mozilla.org\/webdev\/files\/2009\/02\/css3.png\",\"contentUrl\":\"http:\/\/blog.mozilla.org\/webdev\/files\/2009\/02\/css3.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2009\/02\/27\/css3-awesome-test\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/webdev\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS3 Awesome Test\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#website\",\"url\":\"https:\/\/blog.mozilla.org\/webdev\/\",\"name\":\"Mozilla Web Development\",\"description\":\"For make benefit of glorious tubes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.mozilla.org\/webdev\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/70ae25c16f09d053c6d8b5eac29dbda9\",\"name\":\"mozilla\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/image\/e77ee64829d0c3831212656324f746d1\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/75d2017e019c87560fe5d148a64659dc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/75d2017e019c87560fe5d148a64659dc?s=96&d=mm&r=g\",\"caption\":\"mozilla\"},\"url\":\"https:\/\/blog.mozilla.org\/webdev\/author\/mozilla-2\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS3 Awesome Test - Mozilla Web Development","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.mozilla.org\/webdev\/2009\/02\/27\/css3-awesome-test\/","twitter_misc":{"Written by":"mozilla"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/webdev\/2009\/02\/27\/css3-awesome-test\/","url":"https:\/\/blog.mozilla.org\/webdev\/2009\/02\/27\/css3-awesome-test\/","name":"CSS3 Awesome Test - Mozilla Web Development","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/webdev\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.mozilla.org\/webdev\/2009\/02\/27\/css3-awesome-test\/#primaryimage"},"image":{"@id":"https:\/\/blog.mozilla.org\/webdev\/2009\/02\/27\/css3-awesome-test\/#primaryimage"},"thumbnailUrl":"http:\/\/blog.mozilla.org\/webdev\/files\/2009\/02\/css3.png","datePublished":"2009-02-27T23:50:51+00:00","dateModified":"2017-03-08T22:50:08+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/70ae25c16f09d053c6d8b5eac29dbda9"},"breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/webdev\/2009\/02\/27\/css3-awesome-test\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/webdev\/2009\/02\/27\/css3-awesome-test\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/webdev\/2009\/02\/27\/css3-awesome-test\/#primaryimage","url":"http:\/\/blog.mozilla.org\/webdev\/files\/2009\/02\/css3.png","contentUrl":"http:\/\/blog.mozilla.org\/webdev\/files\/2009\/02\/css3.png"},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/webdev\/2009\/02\/27\/css3-awesome-test\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/webdev\/"},{"@type":"ListItem","position":2,"name":"CSS3 Awesome Test"}]},{"@type":"WebSite","@id":"https:\/\/blog.mozilla.org\/webdev\/#website","url":"https:\/\/blog.mozilla.org\/webdev\/","name":"Mozilla Web Development","description":"For make benefit of glorious tubes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.mozilla.org\/webdev\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/70ae25c16f09d053c6d8b5eac29dbda9","name":"mozilla","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/image\/e77ee64829d0c3831212656324f746d1","url":"https:\/\/secure.gravatar.com\/avatar\/75d2017e019c87560fe5d148a64659dc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/75d2017e019c87560fe5d148a64659dc?s=96&d=mm&r=g","caption":"mozilla"},"url":"https:\/\/blog.mozilla.org\/webdev\/author\/mozilla-2\/"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts\/283"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/users\/1438"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/comments?post=283"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts\/283\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/media?parent=283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/categories?post=283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/tags?post=283"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/coauthors?post=283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}