simurai

Small demo of animated CSS Mask Icons. Note: It uses the...

Sun, 08 Apr 2012 22:32:44 +0200

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)

SVG Stacks

Sun, 01 Apr 2012 00:46:00 +0200

Image sprites are wildly used for downloading lots of icons or UI elements all at once with just a single HTTP-Request. But they are somewhat cumbersome to use because you have to calculate the background-position offsets. You can’t easily add, remove or reorder them without recalculating. Or change the size without a neighbour peeking in from the side.

How could it be solved? Well, by stacking them all on top of each other, turn off their visibility and only show the one you want. Have been wishing this would be possible for a while.. and then this happened (read from below):

Oh, nice! It already works in Firefox. And it’s also “planed” to be added in Opera: Bug “CORE-37596” (couldn’t find a public link to it). There are alternatives to SVG Stacks with better browser support by using embed, iframe, object or img elements, but I still prefer background images because of their easier positioning/resizing. So let’s hope more browsers will also add support for that.

So how does it work? It’s actually pretty simple. Have a look at the source of Erik’s SVG file.

First we give each of our icons in the SVG file a unique ID and the same class name, add some CSS to hide all icons and only display the one that gets selected with :target. And now we can use a hash in the URL to pass the ID into the SVG file, like background: url(icon.svg#ID).

Big thanks to @erikdahlstrom for that technique.

We're in an icon-sharpness limbo

Sun, 25 Mar 2012 17:47:00 +0200

With the rise of Retina displays people are looking for resolution independent alternatives to PNG icons. Some fell in love with font-icons, some are shouting “SVG”. But I’m sorry, if you’re looking for a silver bullet, I’m afraid it doesn’t exist. Let’s take a closer look at our options:

Icon fonts are awesome, but..

they are not sharp. I mean really sharp, pixel-perfect kind of sharp. Using font-face for icons has become quite popular. I have been promoting and even started collecting them. But there is a flaw that keeps bugging me. They are still a tiny bit blurry on “non Retina” displays (which are still a huge majority). Try out the size slider in Chris’s demo and take a very close look. It varies at different sizes, but they all have this “half-pixel blurriness” problem. It might be hard to notice, so here a zoomed-in screenshot at 15px (also removed the background noise):

The subpixel anti-aliasing works great on curves, but not on straight lines, there it just doesn’t look sharp. In theory you could use font hinting to snap the icons to whole pixels. But so far I’m not aware of any icon-set doing that. Also I’m guessing it’s a lot more work and the hinting data might increase the file size significantly. Edit: @thijs notes that hinting only works on supported platforms and won’t help on OS X, iOS and Android.

SVG to the rescue?

Well, not really. The big advantage of using SVG icons would be that in their original size (not resized), they look pixel-perfect sharp. But once you start resizing, they have the same subpixel blur problem until you reach multiple of its original size. Notice the inner cross.

In practice using only multiple sizes probably should be ok. You create all your icons in a base size, let’s say 16px and you use a bigger version for action buttons in 32px or 48px.

Edit: @erikdahlstrom + @Marco_Rosella mentioned: shape-rendering:crispEdges. If used on individual rect(angles), they can be forced to pixel-snapping. Might not always be perfect, but keeps it crisp. Test in this jsFidde.

Problem solved? I wish, but there are other issues like:

There is not a lot of good SVG icon sets available.
Lack of SVG sprite creation tools.
Can’t change the color with CSS. It is possible, but only when used with inline SVG and I don’t feel happy adding big SVG chunks to the markup.
No effects.. like drop shadows. (SVG has filters, but again.. you can’t easily change them in CSS).
And the biggest bummer of all.. bad browser support in Firefox and Opera when an SVG is used as a background-image. It appears that the SVG actually gets converted into a bitmap and when resized with background-size, it doesn’t get redrawn, just scaled up, which makes it look really blurry. This kinda defeats the purpose of using a Scalable Vector Graphic.

Here a fiddle to test it out.

You could use inline SVG or SVG as an <img> element, but that makes it hard to be used as a sprite. Maybe with nested elements and overflow:hidden? Anyways.. just not as straight forward and flexible as with background-image.

Edit: David Bushell found a workaround by starting large and only scale down.

PNGs

Lots of icon fonts also come with a PNG version that you could use instead, but then you need a solution for showing a HiRes version on Retina displays. Using a device-pixel-ratio Media-Query should help you out. Or Apple just implemented -webkit-image-set, which looks promising, but still is gonna take a while.

So what should you do? As I said.. there is no silver bullet, but..

Here a little guide that might help.

When starting a new project, during prototyping and development, use font icons. Nothing beats the freedom of quickly and easily swap icons, change colors, try out text-shadow and other effects.
Then at some point you have to decide if it’s worth the trouble that comes when using SVG icons or PNGs. It’s a tough call and in the end it all depends on your requirements and priorities. It almost needs a flow-chart. ;-) You’ve to be ok with all their limitations described above. See if the available budget allows for the extra work, count how many icons there are in total and if you need them in different sizes or not.

There’s just no single image format suitable for everything and probably never will be. So who says you can’t mix them all together? Maybe best is to use PNG served in many different sizes for your high fidelity, multi-color logo and other graphics. SVG icons for your navigation that stays the same size, but also look sharp on Retina displays. Responsive inline SVG for bars and charts and an icon font for all your different button sizes. We’ve mostly been doing that anyways.

A look into the future

Is there a way to get out of this icon-sharpness limbo? Well.. let’s just wait a little.. once we have Retina displays everywhere (ok, could take a couple years), the subpixel problem will be gone and maybe browsers will have fixed the SVG issues and we can truly celebrate our resolution independent icons? But even then, we still would’ve to deal with the problem that details in icons don’t scale.

In case I’m missing something, you can send a Tweet or write a comment on G+. Thanks.

What is Responsive Web Design?

Sun, 06 Nov 2011 19:07:00 +0100

Yesterday I tweeted this:

My excitement for Responsive Web Design is fading a bit. It’s great for simple websites, but not enough for more complex web apps.

On mobile you don’t just wanna shrink and hide some stuff.. you wanna change behaviour.

It caused some discussion and confusion. What I meant was that next to using media-queries to adapt to different screen sizes, we should also consider other aspects that improve the User Experience. Like changing behaviour trough JavaScript, optimize for a different input method like touch and be responsible with the often lower bandwidth. @fofr came up with a great hack to link Media Queries and JavaScript.

I think the problem is that in @beep’s original post, it mostly was described as a media-query, flexible-layout thing: “Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design”. But @danielmall notes that it’s an approach and not a technology and @vasilis sees responsive design as using client side techniques to optimize the experience.

So if you’re also one of those less educated people like me: The term ”Responsive Web Design“ has either evolved in its meaning, or we didn’t understand it from the beginning.

Another angle on skeuomorphs

Fri, 28 Oct 2011 16:42:00 +0200

There is a good post about skeuomorphs titled Skeuomorph, Pt III.

Next to touch and smell, there is another problem with skeuomorphs on digital screens. Changing the angle you look at it. Moving your head doesn’t change the 3D perspective, holding your tablet in a different angle does change the shadows and highlights. It just feels not as real.

Maybe one day we can add a bump map to create more dynamic shadows/highlights and a screen surface that sticks out. We might also get multiple light sensors so we can adjust according to our real light sources. How cool would it be to move your tablet closer to your lamp and see the shadows and highlights change.. woaaahhh…

I’m not entirely against using Skeuomorphs in our designs. I do it too. Without being able to use textures and fake 3D it would quickly get boring. But maybe something to keep in mind: Using Skeuomorphs on desktop screens are way less problematic than on tablets or phones because on desktops you don’t touch it with your finger and you mostly keep a straight angle.

Update: @apexsier points out that such a directional light sensor is called Light Field Sensor and already in use by the Lytro camera.

Update II: Seems Apple is already working on it.

tlk.io is a simple web chat. The idea was to create an open chat...

Mon, 17 Oct 2011 13:58:00 +0200

tlk.io is a simple web chat. The idea was to create an open chat without having to signup or login. Chat channels are owner-free and you can invite new people by sharing the URL. The coding is done by the great @antstorm, I did the design.

It’s just a start, there’re lots of ideas how it could get improved. But for now.. Happy tlk.ing..!

Space CaCSS - Animated CSS3 background patterns. The challenge...

Mon, 03 Oct 2011 17:28:00 +0200

Space CaCSS - Animated CSS3 background patterns. The challenge was to create some trippy effects with just a single

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

Sun, 21 Aug 2011 19:55:00 +0200

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.

Force Lion's scrollbar back

Tue, 26 Jul 2011 14:51:00 +0200

“Anyone figured how to force the scrollbar in Lion with css/html/javascript? i.e. without sys prefs“ @andyshaw85

As soon as we thought we settled the “above the fold” discussions, with Safari on Lion it’s back, more than ever..!!! ;-(

Personally, I prefer the hidden scrollbar, but in case you bump into a more “conservative” client and he really demands it, you can just overwrite the default and force the srollbar back like this:

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

See the demo.

PS. And as an added bonus, it gets rid of the ugly scroll-track in Chrome and makes it look more consistent.

PSS. If you only want it on Lion, here with a JS sniffing script added.

The Cursor Monster is a little CSS3/JS toy that you can play...

Mon, 18 Apr 2011 17:15:00 +0200

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 Letter-Heads is a Firefox 4 demo that lets you experience...

Fri, 11 Mar 2011 10:22:00 +0100

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

Wed, 26 Jan 2011 00:15:00 +0100

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.

Thanks again to Drew Wilson for his Pictos Contest. His big boy...

Sun, 28 Nov 2010 15:17:00 +0100

Thanks again to Drew Wilson for his Pictos Contest. His big boy shall be taken care with lots of love. I just hope the little boy can soon accept the new family member. ;-)

Update: R.I.P Nov 12. 2011

Beautiful Pixels wrote an artist profile about me. Thanks a lot,...

Wed, 24 Nov 2010 23:17:00 +0100

Beautiful Pixels wrote an artist profile about me. Thanks a lot, turned out really nice. Although it feels a little strange, seeing your own picture up there.

ps. Thanks for letting the dog pee at my name. ;-)

My flirts with CSS3

Sun, 17 Oct 2010 23:07:00 +0200

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 elements styled with...

Mon, 20 Sep 2010 15:52:00 +0200

umbrUI is a demo of HTML 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...

Tue, 14 Sep 2010 00:13:00 +0200

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

Thu, 02 Sep 2010 22:58:00 +0200

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

Fri, 20 Aug 2010 04:10:00 +0200

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

Mon, 26 Jul 2010 19:04:00 +0200

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.