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 →
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.
CarveMe tries to simulate an inset text-shadow with CSS3. Since Safari5 is out, we now can finally use box-shadow: inset for all our shiny buttons. But what about an inset shadow on text? Unfortunately text-shadow: inset doesn’t work. But there is a technique that kinda simulates the same effect.
background-color: rgba(82,96,117,0.5);
-webkit-background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.5) 0 5px 6px;
So instead of having a dark inset shadow on top of the bright text, we use a bright text-shadow on the dark background.
See the Demo →
FLASHLIGHT is another CSS3 experiment. Again the text color is set to transparent and text-shadow is added. For the hover effect a rotateY transition is used with a low perspective.
I’m assuming to make this cross-browser would be a nightmare, so I’m not even gonna try. I just got it to work in Safari. ;-(
ps. For those that don’t have Safari installed, you can see a screenshot on dribbble.
I ♥ BLUR - Once again, I got distracted experimenting with CSS3. ;-) So far I just knew how to make text look blurry by adding a lot of text-shadows like in this example by David. But it’s more a glow, because the text still stays in front. But what if you wanna turn text into smoke? Luckily you can set the text-fill-color to transparent and that gives your text a really nice smoky blur.
color: transparent;
text-shadow: #fff 0 0 100px;
That’s it! And if you animate it, it get’s even sexier.
Update: Ohh.. snap. Some friendly people on twitter pointed out that there is actually an even simpler way to create Text Blur. So before this get’s too embarrassing, I quickly should change the code above. ;-) By using just color instead of -webkit-text-fill-color it also works in Firefox (although the blur looks a bit stronger). Thanks for telling.
A Koi fish made with Flash’s Bones Tool. When you move the mouse left/right in front of the fish, he starts to swim faster.
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.
ps. If you’re on a MacBook, like I am, your fan might turn on. Sorry, I couldn’t resist adding some filters and effects. Press the [SPACE] bar to enable some performance stats.
About me
