CSS3

Space CaCSS - Animated CSS3 background patterns. The challenge was to create some trippy effects with just a single <div> element and no extra markup. How does it work? The basic technique is to use a CSS3 repeating-radial-gradient as a background and animate it by changing its background-size. That’s all what’s needed in the second example. Pretty hypnotic. If you want more variations you can use a second gradient with a different background-size. Or add a second animation for the background-position with a different timing. That makes it possible to create a somewhat random looking motion like in the last example (orange). You could also add some extra markup and use transforms like rotate, scale or so to make even more trippy effects, but for now I just kept it to background-size and position. Something to keep in mind: Animating the whole background of a page is not that great of an idea. First it would be waaaay too distracting, then CPU usage is quite high especially if it’s a large area and using Canvas would probably be a better option. Also it doesn’t work in all browsers. But considering how little code is needed (most is just vendor prefixes) to create those animated patterns, it’s super fun to play with. See demo.

Space CaCSS - Animated CSS3 background patterns. The challenge was to create some trippy effects with just a single <div> element and no extra markup.

How does it work? The basic technique is to use a CSS3 repeating-radial-gradient as a background and animate it by changing its background-size. That’s all what’s needed in the second example. Pretty hypnotic. If you want more variations you can use a second gradient with a different background-size. Or add a second animation for the background-position with a different timing. That makes it possible to create a somewhat random looking motion like in the last example (orange).

You could also add some extra markup and use transforms like rotate, scale or so to make even more trippy effects, but for now I just kept it to background-size and position.

Something to keep in mind: Animating the whole background of a page is not that great of an idea. First it would be waaaay too distracting, then CPU usage is quite high especially if it’s a large area and using Canvas would probably be a better option. Also it doesn’t work in all browsers. But considering how little code is needed (most is just vendor prefixes) to create those animated patterns, it’s super fun to play with.

See demo.

Tried to make a Brushed Metal style in CSS3. The texture is done by using 3 repeating-gradients with different length. That makes it look somewhat random. For the linear version, browser support is pretty ok, but for the radial one it&#8217;s not quite there yet. I think only in Safari 5.1 and Chrome Windows. In addition I tried to add a conical gradient for the circle with just faking it with ellipse gradients. It&#8217;s ok for low contrasts and if you cover the middle part with an icon or so.. hehe.. ;-P A much more real looking technique is used in this experiment, but I believe it currently only works in Safari and Chrome Windows. Let&#8217;s hope that CSS4 will add support for real conical gradients. See demo.

Tried to make a Brushed Metal style in CSS3. The texture is done by using 3 repeating-gradients with different length. That makes it look somewhat random. For the linear version, browser support is pretty ok, but for the radial one it’s not quite there yet. I think only in Safari 5.1 and Chrome Windows.

In addition I tried to add a conical gradient for the circle with just faking it with ellipse gradients. It’s ok for low contrasts and if you cover the middle part with an icon or so.. hehe.. ;-P A much more real looking technique is used in this experiment, but I believe it currently only works in Safari and Chrome Windows. Let’s hope that CSS4 will add support for real conical gradients.

See demo.

The Cursor Monster is a little CSS3/JS toy that you can play around with. To hide the cursor once the monster eats it, you can use this CSS: cursor: none; But be careful, it can be super confusing if you abuse it. Feed the Cursor Monster Update: Apparently Chrome will disable it in a future release, so enjoy while you can.

The Cursor Monster is a little CSS3/JS toy that you can play around with. To hide the cursor once the monster eats it, you can use this CSS:

cursor: none;

But be careful, it can be super confusing if you abuse it.

Feed the Cursor Monster

Update: Apparently Chrome will disable it in a future release, so enjoy while you can.

The Letter-Heads is a Firefox 4 demo that lets you experience interactive shadow art. Meet different characters made with letters and text-shadow. Animated with CSS3+JS. It&#8217;s mainly inspired by shadow artist Kumi Yamashita.  My role: Concept, Art direction, Illustration, Design and Code. Project: Firefox 4 Demo Client: Mozilla

The Letter-Heads is a Firefox 4 demo that lets you experience interactive shadow art. Meet different characters made with letters and text-shadow. Animated with CSS3+JS. It’s mainly inspired by shadow artist Kumi Yamashita. 

My role: Concept, Art direction, Illustration, Design and Code.

  • Project: Firefox 4 Demo
  • Client: Mozilla
ZEN is a demo of a single-song HTML5 Audio Player. It&#8217;s powered by jPlayer, styled and mostly animated with CSS3. I&#8217;m really happy how the little details turned out. Like how it morphs from a circle to a square button and the swirl at the beginning. Also that it starts out simple and transforms into fancy pants only when needed. Credits: Thanks to @maboa and @quinnirill for some JS help. Song from Every Day by Girl Talk. See the demo. Note: This is just an experiment and hasn&#8217;t been tested enough to be used as a real player. Also, the song is hard coded and would need to be made more dynamic. Use at your own risk. ;-)

ZEN is a demo of a single-song HTML5 Audio Player. It’s powered by jPlayer, styled and mostly animated with CSS3.

I’m really happy how the little details turned out. Like how it morphs from a circle to a square button and the swirl at the beginning. Also that it starts out simple and transforms into fancy pants only when needed.

Credits: Thanks to @maboa and @quinnirill for some JS help. Song from Every Day by Girl Talk.

See the demo.

Note: This is just an experiment and hasn’t been tested enough to be used as a real player. Also, the song is hard coded and would need to be made more dynamic. Use at your own risk. ;-)

My flirts with CSS3

At my day job I mostly work with Flash, AfterEffects, Photoshop. About a year ago I wanted to try something new and created Shitty Day using HTML, jQuery and CSS. And a couple months later, after I discovered that CSS3 can do animations, I did a photo-only tumblr theme called Organ. Nobody really cared until Cameron Moll (thanks) posted it on his blog and I got asked to create an official theme. It got featured in the theme garden and I was like.. wow.. it seems people really like this CSS3 stuff. So I kept on experimenting and created some more CSS3 demos.

I’m really happy that most people enjoy them. But there are also some concerns. If you look at all the demos, you’ll see that most of them only work correctly in -webkit and some just in Safari. And they also lack a graceful degradation. There are people like Paul or Divya that have been pushing me to make them more cross-browser. Thanks and sorry, for letting you down so often. I can understand that some say: If it’s not cross-browser it doesn’t “count”. And Web Designers have a responsibility and so on..

Well, this is just a hobby for me. I do it only for fun. Doing cross-browser support is the exact opposite of fun. Some might get a kick out of it, but for me, I would just be kicking the wall non-stop. That’s why I usually don’t even try and jump right to the next demo. Or call me lazy, that’s fine too.

But I guess the main reason why all my experiments work best in Safari is the tool I’m using: CSSEdit. If you don’t know about it, there’s one killer feature that changed everything. I would say, if it wasn’t for that feature, I probably would’ve never started doing CSS. It’s the Live Preview! Every change you make in your CSS get’s instantly updated. It’s like Firebug. Because I like to try out new stuff, I don’t know upfront how to do things.. I kinda just throw properties in there and start tweaking the numbers till I get to some interesting result. Without Live Preview, I would have to save the file, switch to the browser, refresh, switch back to the editor and start over. For the basic stuff you get things usually right without having to see a preview, but not if you’re trying to do Photoshop-like styles with CSS. Can you imagine having to save for web your Photoshop design just to see your changes? Insane right? So because CSSEdit uses Safari to render the Live Preview it automatically will work best in Safari, so there you have it.. blame them. ;-)

Unfortunately I’m still waiting desperately till CSSEdit get’s updated to support CSS3. I’m puzzled what they are waiting for, if browsers already start dropping prefixes. They could have such a nice head-start before the big guys like Adobe start to add it. Heck, there are tons of online CSS3 generator tools and there is even and app for the iPad. But nothing for desktop? WTF?

Wait a minute.. online tools. Online? Damn, that’s it! This will solve everything! A complete HTML/CSS editor in the browser with live editing. Something like jsfiddle, but with auto-complete and a GUI. Things like box-shadows, text-shadows, gradients just scream to be manipulated with sliders. But the best part by far.. you could do your cross-browser hacking right there in any browser you want to support. Maybe such an online editor is technically not possible with older browsers? Or extremely hard to do. Or just have limited features. I have no idea. But trying to add all possible web rendering engines into a desktop editor sounds way harder. The term designing in the browser would get a whole new meaning, because you’re literally designing in the browser.

Also all files are kept in the cloud. After doing changes, you could just save it, push it to your live server or commit it to something like GitHub or so. Also some kind of SVN or collaboration feature with co-workers could be build in.

Who is gonna do it? Is somebody already working on it? Is that why CSSEdit doesn’t get updated? Or maybe Adobe? Will they move to a subscription model with a “Dreamweaver Live”? I also would love if 37signals would give it a try. They have the cloud experience, they do web stuff, they have the customers already paying with a subscription model. And how awesome would that be with some integration with their current products. Let’s see.

Thanks for reading. Tweet your Comment.

PS. What’s next? There probably won’t be any new demos for a while. No, not because I gave up on CSS3.. because I’m already working on the “next big thing”. ;-)

Update: Here a couple tools that go into that direction. Thanks for sharing. Symbiote, LiveReload, CSS3 auto-complete for CSSEdit, Akshell

umbrUI is a demo of HTML &lt;input&gt; elements styled with CSS3. There are: No images, no extra markup and no JavaScript. If you use appearance: none, it will remove the default styles and you&#8217;re free to add your own. input[type="checkbox"] { -webkit-appearance:none; /* Remove default styles */ /* Add your own styles */ } So I used as many of the :before and :after pseudo elements as possible and well as the Shadow DOM elements. Browser support: WebKit for now. Credits: The Rocker switch (checkbox) is based on Mike Bernardo&#8217;s original design. Live demo (Safari or Chrome).

umbrUI is a demo of HTML <input> elements styled with CSS3. There are: No images, no extra markup and no JavaScript. If you use appearance: none, it will remove the default styles and you’re free to add your own.

input[type="checkbox"] {
-webkit-appearance:none; /* Remove default styles */
/* Add your own styles */
}

So I used as many of the :before and :after pseudo elements as possible and well as the Shadow DOM elements. Browser support: WebKit for now.

Credits: The Rocker switch (checkbox) is based on Mike Bernardo’s original design.

Live demo (Safari or Chrome).

Guess the Stars ★★☆ is a little game demo using some 3D perspective, animation, reflections and filters. They are just flat images from IMDb that get rendered with CSS3 into DVD cases. Browser support is still a bit limited. Another interesting thing.. the :target pseudo class. Notice that when you click on a movie it stays in that state. You can also use the back button and deep linking works out of the box. Copy/Paste the URL into a new window and it will open at the same state all without any JavaScript. See the demo.

Guess the Stars ★★☆ is a little game demo using some 3D perspective, animation, reflections and filters. They are just flat images from IMDb that get rendered with CSS3 into DVD cases. Browser support is still a bit limited.

Another interesting thing.. the :target pseudo class. Notice that when you click on a movie it stays in that state. You can also use the back button and deep linking works out of the box. Copy/Paste the URL into a new window and it will open at the same state all without any JavaScript.

See the demo.

BonBon Buttons - My goal was to create good looking CSS3 buttons with minimal markup. They use only one PNG for the background noise, everything else is rendered by the browser.. well, so far only Safari, Chrome and Firefox. I&#8217;m quite happy how they turned out, but of course, the lack in cross-browser support makes them just another demo.. for now. ;-) If you are interested in more details, I wrote some sort of tutorial and of course you can click them. See demo.

BonBon Buttons - My goal was to create good looking CSS3 buttons with minimal markup. They use only one PNG for the background noise, everything else is rendered by the browser.. well, so far only Safari, Chrome and Firefox. I’m quite happy how they turned out, but of course, the lack in cross-browser support makes them just another demo.. for now. ;-)

If you are interested in more details, I wrote some sort of tutorial and of course you can click them.

See demo.

ZEPPELIN is an experiment trying to create a glass text effect (refractive index) with CSS3. The refractive index effect is achieved by using two background images on top of each other. The underlying one get&#8217;s scaled down a bit and the top one get&#8217;s cutout by the text using -webkit-background-clip: text. For the embossing effect a -webkit-text-stroke with a low opacity is used. Something to keep in mind, animating clippings, text-shadows, transparency can make your CPU spike, it&#8217;s not just Flash, CSS can be misused too. So the animation is not looped, only on hover. This experiment is inspired by Trent Walton&#8217;s example. See the demo.

ZEPPELIN is an experiment trying to create a glass text effect (refractive index) with CSS3. The refractive index effect is achieved by using two background images on top of each other. The underlying one get’s scaled down a bit and the top one get’s cutout by the text using -webkit-background-clip: text. For the embossing effect a -webkit-text-stroke with a low opacity is used. Something to keep in mind, animating clippings, text-shadows, transparency can make your CPU spike, it’s not just Flash, CSS can be misused too. So the animation is not looped, only on hover.

This experiment is inspired by Trent Walton’s example.

See the demo.

Where are the trees is an experiment trying to create a Tilt-Shift effect on Text using CSS3. Once again text-shadow was my best friend. By adding a bigger offset-y and blur-radius to the top and bottom edge, the text appears to have a lens blur that is typical for tilt-shift effects. There is also some rotate, rotateX and skewX to make the text match the perspective of the background image. See the demo. Update: Good news for blur fans. CSS filters are coming and you can add blur to any DOM element.

Where are the trees is an experiment trying to create a Tilt-Shift effect on Text using CSS3.

Once again text-shadow was my best friend. By adding a bigger offset-y and blur-radius to the top and bottom edge, the text appears to have a lens blur that is typical for tilt-shift effects. There is also some rotate, rotateX and skewX to make the text match the perspective of the background image.

See the demo.

Update: Good news for blur fans. CSS filters are coming and you can add blur to any DOM element.

CSS3D creates a stereoscopic 3D effect with CSS3 only. First I just created this red and cyan effect because I thought it looks cool. But then I got some 3D glasses and was shocked that it actually works. Basically you just need one line of CSS. A text-shadow with a red and cyan offset. The trick is to use &#8220;em&#8220;s for the text-shadows. That way, if you change the font-size, the text-shadows change in the same proportion. text-shadow: -0.06em 0 red, 0.06em 0 cyan; See the demo. Note: Actually you are not limited to text only. You can use the same technique with box-shadows. It even works when you add 3D transforms like rotateY. Update: Wow! I submitted this to Smashing Magazine&#8217;s CSS3 Design Contest and it made it on 3rd place, which makes me incredible happy. Thanks!

CSS3D creates a stereoscopic 3D effect with CSS3 only. First I just created this red and cyan effect because I thought it looks cool. But then I got some 3D glasses and was shocked that it actually works. Basically you just need one line of CSS. A text-shadow with a red and cyan offset. The trick is to use “em“s for the text-shadows. That way, if you change the font-size, the text-shadows change in the same proportion.

text-shadow: -0.06em 0 red, 0.06em 0 cyan;

See the demo.

Note: Actually you are not limited to text only. You can use the same technique with box-shadows. It even works when you add 3D transforms like rotateY.

Update: Wow! I submitted this to Smashing Magazine’s CSS3 Design Contest and it made it on 3rd place, which makes me incredible happy. Thanks!

CarveMe tries to simulate an inset text-shadow effect with CSS3. color: transparent;background-color: rgba(82,96,117,0.5);-webkit-background-clip: text;text-shadow: rgba(255,255,255,0.5) 0 5px 6px; First we set the text color to transparent. Then we add a dark background-color. Then by adding background-clip: text it only shows the background within the outline of the text. It&#8217;s like a mask. Note, this is not a standard feature and only implemented in Chrome/Safari. And finally, if we add a bright, half transparent text-shadow on top and push it down a bit so that the dark background can be seen, it makes it look like the text is carved into the surface. Note that it doesn&#8217;t work well on all backgrounds and you might have to adjust the colors. Also, it&#8217;s not easy to add a fallback, so make sure you use Modernizr. See the demo.

CarveMe tries to simulate an inset text-shadow effect with CSS3.

color: transparent;
background-color: rgba(82,96,117,0.5);
-webkit-background-clip: text;
text-shadow: rgba(255,255,255,0.5) 0 5px 6px;

  1. First we set the text color to transparent.
  2. Then we add a dark background-color.
  3. Then by adding background-clip: text it only shows the background within the outline of the text. It’s like a mask. Note, this is not a standard feature and only implemented in Chrome/Safari.
  4. And finally, if we add a bright, half transparent text-shadow on top and push it down a bit so that the dark background can be seen, it makes it look like the text is carved into the surface.

Note that it doesn’t work well on all backgrounds and you might have to adjust the colors. Also, it’s not easy to add a fallback, so make sure you use Modernizr.

See the demo.

simurai simurai

I’m a UIX Designer and like to experiment with CSS3. This site is my personal playground.

About
Contact