Lab

Small demo of animated CSS Mask Icons. Note: It uses the non-standard CSS masks that are only implemented in WebKit without a spec. I don’t wanna go into discussing if that’s ok or not, instead I just like to experiment with them because I think you can do cool stuff and hopefully one day it will become standard. Using CSS masks for icons would have the benefit of being able to create a large icon-set and easily swap textures, colors, shadow effects. And also animate them. Basically everything you can do with CSS backgrounds. It could also be used for other stuff like tooltips, speech bubbles, funky shaped buttons and so on. The basics of this demo goes something like this: Add a texture and gradients to your element’s background. Use SVG (or PNG) as mask-image to “cut out” the rectangle into the desired shape. Use a second shape together with mask-composite to either add  (source-over -> robot), subtract (source-out -> apple bite, cloud arrow) or intersect (xor -> cloud arrow while pressing) with the first mask. Add some transitions/animations to the mask-position. So ya, basically you can mask a mask, combine multiple masks or even do the opposite depending if they overlap or not. In total there are a dozen mask-composite options that I’m not quite sure what the exact difference is. I just tried them all till it worked like I wanted. ;-) Couple notes: Pseudo elements (highlight on the cloud) also gets masked. CSS filters (Chrome Canary, WebKit nightly) work great with CSS masks, unlike box-shadows. See how the drop-shadow follows the contures of the SVG shape. For better cross-browser support you could just animate multiple backgrounds (background-composite works too), but then you loose the ability to use a seamless texture. I’m pretty sure, you could do all the effects with SVG alone. It has masks, drop-shadows, animation.. I just haven’t really dugg myself deep enough into them. Since it uses mask-position to animate the masks, you can’t rotate them, which is a little limiting. See demo (WebKit)

Small demo of animated CSS Mask Icons. Note: It uses the non-standard CSS masks that are only implemented in WebKit without a spec. I don’t wanna go into discussing if that’s ok or not, instead I just like to experiment with them because I think you can do cool stuff and hopefully one day it will become standard.

Using CSS masks for icons would have the benefit of being able to create a large icon-set and easily swap textures, colors, shadow effects. And also animate them. Basically everything you can do with CSS backgrounds. It could also be used for other stuff like tooltips, speech bubbles, funky shaped buttons and so on.

The basics of this demo goes something like this:

  1. Add a texture and gradients to your element’s background.
  2. Use SVG (or PNG) as mask-image to “cut out” the rectangle into the desired shape.
  3. Use a second shape together with mask-composite to either add  (source-over -> robot), subtract (source-out -> apple bite, cloud arrow) or intersect (xor -> cloud arrow while pressing) with the first mask.
  4. Add some transitions/animations to the mask-position.

So ya, basically you can mask a mask, combine multiple masks or even do the opposite depending if they overlap or not. In total there are a dozen mask-composite options that I’m not quite sure what the exact difference is. I just tried them all till it worked like I wanted. ;-)

Couple notes:

  • Pseudo elements (highlight on the cloud) also gets masked.
  • CSS filters (Chrome Canary, WebKit nightly) work great with CSS masks, unlike box-shadows. See how the drop-shadow follows the contures of the SVG shape.
  • For better cross-browser support you could just animate multiple backgrounds (background-composite works too), but then you loose the ability to use a seamless texture.
  • I’m pretty sure, you could do all the effects with SVG alone. It has masks, drop-shadows, animation.. I just haven’t really dugg myself deep enough into them.
  • Since it uses mask-position to animate the masks, you can’t rotate them, which is a little limiting.

See demo (WebKit)

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 live 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 live 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. Update: Apparently Chrome will disable it in a future release, so enjoy while you can.  Feed the monster

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.

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

Feed the monster

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. But what I like most.. At the beginning, there is just a big simple button. You click it, and it shows its fancy pants. You click it again, back to the simple. Credits: Thanks to @maboa and @quinnirill for some JS help. Song from Every Day by Girl Talk. See the demo.

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. But what I like most.. At the beginning, there is just a big simple button. You click it, and it shows its fancy pants. You click it again, back to the simple.

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

See the demo.

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. See the 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.

See the 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 them live.

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 them live.

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 live 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 live 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 live 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 live 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!

Feed me