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. Using cursor:none can be fun, but also super confusing if you abuse it. So be careful. Update: Apparently Chrome will disable it in a future release, so enjoy while you can.
ZEN is a HTML5-CSS3 Audio Player. 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. It’s like the visuals match the sound. From a relaxing Zen garden into a crazy club and back.
See the demo.
Cycle Button is a little UX study where I’m trying to figure out if those buttons that cycle trough a couple options are of any use in todays UIs.
See the result.
:toggle - A while ago I worked on a project where I needed just a simple toggle button to show and hide some content. The obvious way would be to use JavaScript for that functionality. But then I thought: Is it possible to create a toggle button with only HTML and CSS3?
See the result: Live Demo.
umbrUI is a demo of HTML input elements made with CSS3. So far they include a range slider, checkbox and radio button. I’m pretty happy with the outcome. They just use minimal markup, no JavaScript and thanks to the Pictos Font Icons, no images.
The sad part, so far only Safari can render it correctly. Chrome looks ok but without the 3D perspective. I haven’t tried the rest of the browsers. I guess for now, using images is still far easier and gives you less headaches. I also tried to add animations, but unfortunately they don’t work on :before/:after pseudo classes and on the range slider, they don’t even exist. Also trying to animate gradients, box-shadows, text-shadows, borders is still really buggy.
See the demo (Safari or Chrome).
Guess the Stars ★★☆ is a little game demo using some 3D perspective, animation and reflections. They are just flat images from IMDb that get rendered with CSS3 into DVD cases. Unfortunately it only works in Safari. And sometimes even a little buggy.
Anyways, 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 live demo or if you don’t have Safari, here a screenshot.
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. Yes, another useless CSS3 demo. But I always try to keep the markup as minimal as possible.. this time there is only one extra <p> tag needed. I tried to use the :after pseudo-element, but somehow the animation didn’t work.
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 make sure you don’t loop the animation forever.
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.
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 some of webkit’s 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!
For comments please use twitter.
CSS3 Image Blur. Is it possible to create a blur effect with just one source image and CSS? Well, kind of:
You stack the same image a couple times on top of each other and apply a combination of shifting, scaling and low opacity. The more blurry it should look the more stacking it would need. And there we already have the problem: It’s ugly markup and not really recommended. It probably also makes the browser super slow. Therefore, I’ll leave it at this and wait for CSS4. ;-)
See the Demo →
Update: Some people on twitter pointed out that it’s possible to apply SVG filters to HTML elements. I guess that’s the much better approach.
A Koi fish made with Flash’s Bones Tool. It’s my first time really trying out inverse kinematics in Flash. Usually you create some MovieClips and connect them with bones. But you also can apply the bones to a single vector shape with different colors (like the fish in this example). The cool part is that the shape gets bended in a more natural way. Then you can control the bone-joints with ActionScript.
I hope Adobe will improve the bones tool in Flash CS5. It would be really cool to add bones to a bitmap like in AfterEffects. Also once you added the bones, you can’t edit them. So when I wanted to make a change to the fish, I had to start over every time. It’s also not possible to combine timeline animation of the bones and AS3, you have to decide either or.
See the demo.
