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.

Vertical flex:1 with overflow scrolling

I started to use the new Flexbox syntax in a couple places and often needed something to be vertically flexible, but when content starts to overflow, it should add a scrollbar.

First I tried it like this:

flex: 1;
overflow: auto;

but somehow it didn’t work. Just when adding height/min-height:0 it works.

flex: 1;
overflow: auto;
min-height: 0;

Not sure if that’s the intended behavior or a bug. Anyways, happy there is a simple fix for it. You can test it in this demo.

Update: Ivan points out that flex: 1 is not even needed. So the simplest way is just this:

overflow: auto;
min-height: 0;

My short talk how CSS Flexbox will help creating “flexible” Web Apps. It was recorded at this years Fronteers Jam Session.

Quick note: @kizmarh actually did the header example with floats alone by reordering the DOM elements (nice trick). But I think it’s still a bit limited and only one “flexible” element is possible. Also, Flexbox has lots of other cool features I haven’t mentioned.. like reordering and wrapping.

PS. This was my first time ever talking in front of people.. so it might be a bit rough and rushed. ;-)

Update: Uploaded the Mail UI example, but the code might be a bit messy. I just quickly did for the talk. Also, only tested in Chrome.

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.

Media Query splitting

When Media Queries got introduced and people started out with Responsive Web Design, I used to overwrite my Desktop styles to make it fit on Mobile. Later I shifted to “Mobile first” where you start out with the Mobile styles and overwrite them for Desktop sizes. But on a recent project I’ve started using a different approach by splitting the styles instead of overwriting them. It goes something like this:

Here a “Mobile first” example:

.box {
  background: #777;
  width: 100%;
  box-shadow: inset 0 1px 3px #333;
}

@media (min-width: 800px) {
  .box{
    width: 760px;
    margin: 20px auto;
    box-shadow: none; /* reset */
  }
}

And here MQ splitting.

.box {
  background: #777;
}

@media (max-width: 799px) {
  .box {
    width: 100%;
    box-shadow: inset 0 1px 3px #333;
  }
}

@media (min-width: 800px) {
  .box{
    width: 760px;
    margin: 20px auto;
  }
}

So the idea is to keep a default CSS block with all the shared properties and for the rest split them up into different Media Queries. For example max 799px and min 800px, so it’s always either or.

Yes, there are now 3 CSS blocks instead of just two, but I find it much easier to have this mental model. When adding, removing or changing CSS properties, you don’t have to be worried of messing up. They are now more clearly separated and sandboxed. In some cases it could also lead to less code overall because you don’t have to reset a lot of stuff that is not used in the other Media Query.

You could still start out with a “single version”. It can be mobile OR desktop, whatever you prefer to do first. If it’s desktop, the example above would look like this:

.box {
  background: #777;
  width: 760px;
  margin: 20px auto;
}

Then, when it’s time to split up, just start moving your properties that are different into each Media Query.

The only “clean up” or “refactoring” you have to do after lots of changes in that split mode -> check if there are properties that became the same again and could be moved back to the shared (default) block.

I’m not quite sure yet if I will move to splitting MQ like this on all new projects. It was more an accident than intentional, but thinking about it some more, I quite like this way and am gonna try it out on some more projects.

Update: One drawback, as pointed out by Francisc Romano: It doesn’t work well for browsers that don’t support MQs because the default styles don’t get applied. So for IE8 and below a conditional stylesheet could be used. You might need one anyways. Or you could add just some really minimum styles to the shared block as a backup.

Also, you don’t have to use MQ splitting on every single selector. I might makes sense to only use it on selectors where the difference between mobile/desktop is high. In case you like to separate everything, you could create 3 different files and use MQs in the <link> or use a build process so you don’t even have to download the unused styles.

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&#8217;s just a start, there&#8217;re lots of ideas how it could get improved. But for now.. Happy tlk.ing..! Update: We added an option to login with Twitter. This will add avatars and users identities are more clear.

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

Update: We added an option to login with Twitter. This will add avatars and users identities are more clear.

dutchlaunch:

simurai on Tumblr - simurai.com

In this third episode of our series on awesome Dutch Tumblr users, we visit UIX designer and tech blogger simurai (not actually Dutch, but based in the Netherlands), who talks about his way to make technical subjects accessible to a broader audience and how Tumblr helps him accomplish just that.

Stay tuned for the other videos from this series! And want to meet simurai in person? Join us at the Official Dutch Tumblr Launch party and meetup, on May 31st!

Video created and produced by VERTOV digital storytelling
In association with Coebergh Communicatie & PR
Illustrations by Hyshil
For Tumblr

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&#8217;t wanna go into discussing if that&#8217;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&#8217;s background. Use SVG (or PNG) as mask-image to &#8220;cut out&#8221; the rectangle into the desired shape. Use a second shape together with mask-composite to either add  (source-over -&gt; robot), subtract (source-out -&gt; apple bite, cloud arrow) or intersect (xor -&gt; 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&#8217;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&#8217;m pretty sure, you could do all the effects with SVG alone. It has masks, drop-shadows, animation.. I just haven&#8217;t really dugg myself deep enough into them. Since it uses mask-position to animate the masks, you can&#8217;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)

SVG Stacks

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):

image

Oh, nice! The demo already works in Firefox. That’s great news.

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. 

image

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.

Update: A couple bugs have been added to other browsers so you can track its progress. Opera: “CORE-37596” (no public link). WebKit’s Bugzilla : 91790, 89983, 89985. And please star it in Chromium Issue 128055.

Update II: Michael Schieben created a tool to that turns a folder of SVG files into a single SVG Stack: SVG Stacker

Update III: Looks like “SVG Stacks” got shot down by the WG. But there is still some hope left and it’s probably still in flux. So instead of url() we could use image().

We’re in an icon-sharpness limbo

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.

  1. 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.
  2. 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. Update: Media Queries in SVG might solve that.

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

What is Responsive Web Design?

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

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

Also, next to touch and smell, there is another problem with skeuomorphs on digital screens. Changing the view angle. When moving your head, everything stays the same. It doesn’t change the 3D perspective, it doesn’t change the shadows and highlights. It still feels like a flat picture of something 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.

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.

Update III: In iOS6, when tilting the divice, the metallic slider-thumb changes reflection.

Space CaCSS - Animated CSS3 background patterns. The challenge was to create some trippy effects with just a single &lt;div&gt; element and no extra markup. How does it work? The basic technique is to use a CSS3&#160;repeating-radial-gradient as a background and animate it by changing its background-size. That&#8217;s all what&#8217;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&#8217;s a large area and using Canvas would probably be a better option. Also it doesn&#8217;t work in all browsers. But considering how little code is needed (most is just vendor prefixes) to create those animated patterns, it&#8217;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.

Force Lion’s scrollbar back

Personally, I prefer the hidden scrollbar, but in case you really need 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.

simurai simurai

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

About
Contact