lab

Sprite sheet animation with steps(). There is an over a year old jsFiddle but I never got around to post it.. until today! ;-) If you don’t wanna use gifs on your site and rather PNGs for better colors, but still be able to animate them, here an option: CSS keyframe animations have a property called animation-timing-function and one of the options is to use the steps() feature like in this example: div { animation: play 1s steps(10) infinite; } @keyframes play { 0% { background-position: 0px 0; } 100% { background-position: -500px 0; } } The difference to the other easing options is that instead of continuously moving from 0px to -500px, it jumps in steps with pauses in between. This is perfect for animations using a sprite sheet. In the above example it’s steps of 50px with a pause of 100ms (10 steps in total). Here a little demo. As you saw, you can change the speed how fast the animation should play, which is pretty cool, the only problem is that it always starts from the beginning and makes it look jumpy. I also tried to animate the animation-duration by using inherit from a parent element, but unfortunately that is not supported. So I guess if you wanna have a more dynamic speed (animating the animation), you still need to use JS for that. ps. Here an example found in the wild: The logo of Impending. It could also be used for HTML5 games. Here a Street Fighter II demo and post.

Sprite sheet animation with steps(). There is an over a year old jsFiddle but I never got around to post it.. until today! ;-)

If you don’t wanna use gifs on your site and rather PNGs for better colors, but still be able to animate them, here an option:

CSS keyframe animations have a property called animation-timing-function and one of the options is to use the steps() feature like in this example:

div {
    animation: play 1s steps(10) infinite;
}
@keyframes play { 
      0% { background-position:    0px 0; } 
    100% { background-position: -500px 0; }
}

The difference to the other easing options is that instead of continuously moving from 0px to -500px, it jumps in steps with pauses in between. This is perfect for animations using a sprite sheet. In the above example it’s steps of 50px with a pause of 100ms (10 steps in total).

Here a little demo.

As you saw, you can change the speed how fast the animation should play, which is pretty cool, the only problem is that it always starts from the beginning and makes it look jumpy. I also tried to animate the animation-duration by using inherit from a parent element, but unfortunately that is not supported. So I guess if you wanna have a more dynamic speed (animating the animation), you still need to use JS for that.

ps. Here an example found in the wild: The logo of Impending. It could also be used for HTML5 games. Here a Street Fighter II demo and post.

Flick Scrolling

An idea of a new gesture that extends scrolling content on a touch-screen. Instead of letting momentum stop the scrolling, you can decide exactly where it should stop. It stops at the point where you flicked it.

It would be great for things like books, blogs, timelines or anywhere where you don’t skim over, but continuously wanna “move forward”. Kinda like paging but within and long scroll. Some apps have a page up/down feature, but I don’t really use it because it moves always the whole height and might cut off a picture or so. With this “flick scrolling” you can decide to where it should move to. The last paragraph or beginning of a picture.

Flick Scroll illustration

Why not just use pages or cards? Yes, that works sometimes, but not always, especially not when you have no control over the content. iA wrote a good post about it: Scroll or Card? With flick-scrolling you get the joy of “card flipping” without the cards.

Here the two demos from the video so you can try it out (only tested on iOS and Android). Note that the “Timeline demo” has a slightly modified behavior: Instead of scrolling to where you touched it, it always scrolls to the top of an item (in this case a picture). This behavior would be great for a list of repeating items, like the timeline in Instagram for quicker and easier moving to the next picture.

Book demo

Timeline demo

Warning: I’m not really a programmer so the demo is just a hack to demonstrate how it could work. Would need some improvements. And of course, performance would be better if it would be implemented natively.

One thing I’m not sure about.. there is the possibility that you intend to do a flick scroll but end up doing a normal scroll or vice versa. You can judge for yourself in the demos. Maybe the detection could be further optimized or here some other possibilities (Let me know if you can think of more).

  • Use a two-finger scroll. But then you can’t use just your thumb which makes it not that useful.
  • Split up the screen into two areas, for example left for normal scroll and right for flick-scroll.

Credits: Demos use the iScroll4 library and in the timeline demo, the “scrollToElement” feature is used, which is a pretty cool one.

Update: Ahmed El Gabri pointed out that Readability already has a feature like that. Using a double-tab on a “split screen” to determine up or down scroll. It also adds an arrow on the side to guide the eye, which is really helpful.

Some points about using double-tab vs a flick gesture:

  • Doesn’t work in a web browser, double-tab is already used for “zoom to element”.
  • Can only be performed on half of the screen.
  • Maybe takes a bit longer.
  • Double-tab is already used by some apps for other functions. This would make it harder to use in general and you always have to remember which app supports it for what.
  • Harder to discover. It’s much more likely that you do a “flick-scroll” by accident and learn about it quicker.

But of course the “harder to discover” of double-tab scrolling could also be a good thing. It would be far less risky or confusing, because it doesn’t conflict with the scroll behavior currently in use. Also, double-tab scrolling in web browsers could be used as soon as viewport scaling is disabled.

Hmm.. haven’t made up my mind yet.. but either way, would love to see more explorations that go beyond momentum scrolling.

Update II: Kurt and David were concerned that if you would want to quickly scroll through a long page, you would end up doing short flicks that would conflict with the flick-scroll gesture. And yes, they are right. That’s indeed problematic.

A solution I could see is this: The flick-scroll gesture only works when the page is not moving. So if you first would do a longer scroll movement that uses momentum, then you could scroll however you like (also short movements) until scrolling comes to a halt. Only then you could do either again.

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. Update: Happy that there is now a CSS Masking Spec. 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. Update: Happy that there is now a CSS Masking Spec.

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

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. ;-)

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.

simurai simurai

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

About
Contact