lab

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 →

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. ;-( See the Demo → ps. For those that don’t have Safari installed, you can see a screenshot on dribbble.

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. ;-(

See the Demo →

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. See the Demo → 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.

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.

See the Demo →

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.

The Magic Mirror is just a little demo. It’s still not complete. The idea is to add Facebook-Connect so it would know what kind of [spoiler-alert “product”] to show, personalized on your gender, age and so on.. I’m also not sure if there is a company that would want to make fun of their clients (Dove is just used as an example). So this might just remain a little lab demo. Note: If you can’t see yourself in the mirror after confirming in the camera settings, just right-click and pick the right webcam driver.

The Magic Mirror is just a little demo. It’s still not complete. The idea is to add Facebook-Connect so it would know what kind of [spoiler-alert “product”] to show, personalized on your gender, age and so on..

I’m also not sure if there is a company that would want to make fun of their clients (Dove is just used as an example). So this might just remain a little lab demo.

Note: If you can’t see yourself in the mirror after confirming in the camera settings, just right-click and pick the right webcam driver.

Feed me