Hey, wow.. that’s pretty amazing! Thanks for sharing the good news and I wish you both a happily ever after.
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 →
Button Theme is my 2nd tumblr theme. It turned out pretty girly, I think. ;-) I just didn’t wanna do another white, clean, minimal looking theme, because there are already plenty great ones in tumblr’s theme garden.
So this theme has a bold title, buttons and a fabric texture that you can customize with your own colors. When you resize the browser, the right part starts to jump down - good for smaller screens. And other tumblogs you follow get added to your “Button Collection” on the left.
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.
“ I just wanted to thank you for creating the Organ theme. My fiancé used it to propose to me (http://rachelmarry.me)! ”girl-detective
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.
About me
