CSS

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.

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

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

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

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!

Organ is my first tumblr theme. See the demo! It&#8217;s inspired by organ pipes. Imagine that when you roll over the pipes you hear organ sound. Update: The theme now supports all post types and is blooming in the official theme garden.

Organ is my first tumblr theme. See the demo!

It’s inspired by organ pipes. Imagine that when you roll over the pipes you hear organ sound.

Update: The theme now supports all post types and is blooming in the official theme garden.

Shitty Day is a side project I created just for fun. It searches for Tweets from people that write about their shitty day. The results can be seen in a fun way (toilet paper roll) and users get encouraged to send back some love. You might even could argue that it will have a therapeutic effect (you&#8217;re not alone with your shitty day). First I intended doing everything in Flash, but then I thought it&#8217;s a good chance to play around with some CSS3, jQuery and the Twitter API. And a lot of fixed PNGs to let only the paper roll scroll. Watch the making of video. Visit Site

Shitty Day is a side project I created just for fun. It searches for Tweets from people that write about their shitty day. The results can be seen in a fun way (toilet paper roll) and users get encouraged to send back some love. You might even could argue that it will have a therapeutic effect (you’re not alone with your shitty day).

First I intended doing everything in Flash, but then I thought it’s a good chance to play around with some CSS3, jQuery and the Twitter API. And a lot of fixed PNGs to let only the paper roll scroll. Watch the making of video.

Visit Site

“ Meet the new CSS double dream team: border-radius + box-shadow. ”

Together they are unbeatable! It’s such a joy to use them for rounded corners with a drop shadow. The box above uses: border-radius: 8px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.2); to do the magic.

And it get’s better: They even work on embeded Flash! See the 4px rounded corners live in the photo/video section.

Note: This is CSS3 and not all browsers support it yet, like our friend IE.

Feed me