Collecting examples of creative, innovative, and unexpected use of CSS3. CSS3 Watch is curated by Zander MartineauTumblr (3.0; @css3watch)http://css3watch.com/<img src="http://24.media.tumblr.com/tumblr_lwg748cXNU1qc6s4so1_400.png"/><br/><br/><p><h2><a href="http://lab.victorcoulon.fr/css/path-menu/" target="_blank">Path menu in pure CSS3</a></h2></p>http://css3watch.com/post/14451992753http://css3watch.com/post/14451992753Mon, 19 Dec 2011 11:12:08 +0000transitionanimationmrmartineau<img src="http://26.media.tumblr.com/tumblr_lwav66WnQZ1qc6s4so1_500.png"/><br/><br/><p>This is just amazing! <a href="http://stuffandnonsense.co.uk/" target="_blank">Andy Clarke</a> (<a href="http://twitter.com/malarkey" target="_blank">@malarkey</a>)  and <a href="http://anthonycalzadilla.com/" target="_blank">Anthony Calzadilla</a> created the Mad Man opening credits using CSS3 animations.</p>http://css3watch.com/post/14308192953http://css3watch.com/post/14308192953Fri, 16 Dec 2011 14:06:06 +0000animationmrmartineau<img src="http://28.media.tumblr.com/tumblr_lv9xexM3IH1qc6s4so1_500.png"/><br/><br/><h2><a href="http://cubiq.org/dynamic-pure-css-3d-text" rel="bookmark" target="_blank">DYNAMIC PURE CSS 3D TEXT</a></h2> <p><a href="http://cubiq.org/dropbox/text3d.html" target="_blank">http://cubiq.org/dropbox/text3d.html</a></p>http://css3watch.com/post/13349416981http://css3watch.com/post/13349416981Sat, 26 Nov 2011 15:23:21 +0000text-shadowmrmartineau<a href="http://feeds.delicious.com/v2/rss/css3watch?count=15">404 Not Found</a>http://css3watch.com/post/10632995604http://css3watch.com/post/10632995604Sun, 25 Sep 2011 11:24:28 +0100mrmartineau<img src="http://29.media.tumblr.com/tumblr_lrnvypYd6e1qc6s4so1_500.png"/><br/><br/><p><strong>The Work of Jake Dow-Smith</strong></p>http://css3watch.com/post/10310299447http://css3watch.com/post/10310299447Sat, 17 Sep 2011 11:04:01 +0100mrmartineau<img src="http://28.media.tumblr.com/tumblr_lrnvobdELP1qc6s4so1_250.png"/><br/><br/><p><strong>Text line fade out without images</strong></p>http://css3watch.com/post/10310218317http://css3watch.com/post/10310218317Sat, 17 Sep 2011 10:57:47 +0100gradientsmrmartineau<img src="http://24.media.tumblr.com/tumblr_lrnvjpDWnM1qc6s4so1_500.png"/><br/><br/><p><strong><a href="http://montanaflynn.me/lab/css-clouds/" target="_blank">CSS3 Clouds by Montana Flynn</a></strong></p>http://css3watch.com/post/10310182483http://css3watch.com/post/10310182483Sat, 17 Sep 2011 10:55:00 +0100mrmartineau<img src="http://26.media.tumblr.com/tumblr_low767JOuw1qc6s4so1_400.png"/><br/><br/><p><strong>Pure CSS Share Buttons </strong>by @joshuanhibbert</p>http://css3watch.com/post/8042230795http://css3watch.com/post/8042230795Mon, 25 Jul 2011 15:06:07 +0100mrmartineau<a href="http://css-3d.org/">CSS 3D</a>http://css3watch.com/post/4801883713http://css3watch.com/post/4801883713Thu, 21 Apr 2011 10:01:56 +0100mrmartineau<a href="http://www.smashingmagazine.com/2011/04/18/powerful-new-css-techniques-and-tools/">Powerful New CSS Techniques and Tools</a>http://css3watch.com/post/4772471119http://css3watch.com/post/4772471119Wed, 20 Apr 2011 10:04:18 +0100mrmartineau<img src="http://25.media.tumblr.com/tumblr_ljy14cdwDb1qc6s4so1_500.png"/><br/><br/><p><strong>Building a pure CSS 3D City</strong></p> <p><a href="http://cubiq.org/building-a-pure-css-3d-city" target="_blank">Tutorial</a> | <a href="http://cubiq.org/dropbox/3dcity/index2.html" target="_blank">Demo</a></p>http://css3watch.com/post/4772455024http://css3watch.com/post/4772455024Wed, 20 Apr 2011 10:02:36 +01003danimationmrmartineau<img src="http://25.media.tumblr.com/tumblr_ljukmzMSmf1qz72boo1_500.jpg"/><br/><br/><p><a href="http://simurai.com/post/4719656959/cursor-monster" target="_blank">simurai</a>:</p> <blockquote> <p>The <strong>Cursor Monster</strong> is a little CSS3/JS toy that you can play around with. Using <strong>cursor:none</strong> can be fun, but also super confusing if you abuse it. So be careful. <strong>Update</strong>: Apparently Chrome will disable it in a future release, so enjoy while you can. </p> <p><a href="http://lab.simurai.com/toy/monster/" target="_blank">Feed the monster</a>.</p> </blockquote>http://css3watch.com/post/4721998603http://css3watch.com/post/4721998603Mon, 18 Apr 2011 18:28:00 +0100mrmartineau<img src="http://28.media.tumblr.com/tumblr_ljl8dedx9m1qc6s4so1_400.png"/><br/><br/><p><span> </span></p> <h1>320 and up - <span>A ‘tiny screen first’ boilerplate extension^{<a href="http://stuffandnonsense.co.uk/projects/320andup/#ihatetimevandamme" target="_blank">*</a>}</span></h1> <p><a href="http://stuffandnonsense.co.uk/projects/320andup/" target="_blank">‘320 and up’</a> prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Try this page at different window sizes and on different devices to see it in action.</p>http://css3watch.com/post/4577557170http://css3watch.com/post/4577557170Wed, 13 Apr 2011 12:10:26 +0100media-queriesmrmartineau<img src="http://24.media.tumblr.com/tumblr_lhvmcktFfh1qc6s4so1_500.png"/><br/><br/><p>A great tool for generating css3</p>http://css3watch.com/post/4361725332http://css3watch.com/post/4361725332Tue, 05 Apr 2011 09:26:32 +0100border-radiusbox-shadowpseudo-classborder-imagergbasubmission<img src="http://26.media.tumblr.com/tumblr_lj675kPtiU1qc6s4so1_500.png"/><br/><br/><p>A slideshow created with CSS3 3D transforms (webkit only) and transitions. Try giving it a go on mobile Safari, it performs surprisingly well!</p> <p><a title="CSS3 3D Slideshow" href="http://hakim.se/experiments/css3-3d-slideshow" target="_blank"><a href="http://hakim.se/experiments/css3-3d-slideshow" target="_blank">http://hakim.se/experiments/css3-3d-slideshow</a></a></p>http://css3watch.com/post/4361717818http://css3watch.com/post/4361717818Tue, 05 Apr 2011 09:25:43 +0100box-shadowtransitionsrgbasubmission<img src="http://24.media.tumblr.com/tumblr_lipgerhRwU1qc6s4so1_500.png"/><br/><br/><p>Hi,</p> <p>I created new Google Chrome Logo using simple use of CSS3. The link is here. http://dl.dropbox.com/u/8498648/chrome-logo.html.</p> <p>New smooth Chrome logo is being seen in some of the dev channels and here is chrome post about their new logo on 21st March. http://chrome.blogspot.com/2011/03/fresh-take-on-icon.html</p> <p>On Friday (25th March) night, I gave it a shot and created the cool new Chrome logo with just the use of CSS3. I hope you may like it :)</p> <p>Regards,</p> <p>Rajendra </p>http://css3watch.com/post/4130776553http://css3watch.com/post/4130776553Sun, 27 Mar 2011 11:10:26 +0100border-radiusbox-shadowtransformationssubmissionCSSPrefixer: You hate writing vendor prefixes for all browsers? Just let CSSPrefixer do it for you!http://css3watch.com/post/4093583110http://css3watch.com/post/4093583110Fri, 25 Mar 2011 23:14:30 +0000mrmartineau<a href="https://demos.mozilla.org/">Firefox 4 demos</a>http://css3watch.com/post/4022282169http://css3watch.com/post/4022282169Tue, 22 Mar 2011 11:22:57 +0000mrmartineau<a href="http://matthewlein.com/experiments/">Experiments by Matthew Lein</a>http://css3watch.com/post/4022261059http://css3watch.com/post/4022261059Tue, 22 Mar 2011 11:20:42 +0000mrmartineau<img src="http://26.media.tumblr.com/tumblr_lighkpSCo21qc6s4so1_500.png"/><br/><br/><p>Totally f-ing awesome tool by <a href="http://Matthew%20Lein" target="_blank">Matthew Lein</a> to create CSS3 transitions.</p> <p><strong>Bookmark it.</strong></p>http://css3watch.com/post/4022137957http://css3watch.com/post/4022137957Tue, 22 Mar 2011 11:07:37 +0000animationtransitionmrmartineau