![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).](http://25.media.tumblr.com/tumblr_l90kqhicQJ1qz72boo1_r1_500.jpg)
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
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’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.
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!
CarveMe tries to simulate an inset text-shadow effect with CSS3.
color: transparent;
background-color: rgba(82,96,117,0.5);
-webkit-background-clip: text;
text-shadow: rgba(255,255,255,0.5) 0 5px 6px;
Note that it doesn’t work well on all backgrounds and you might have to adjust the colors. Also, it’s not easy to add a fallback, so make sure you use Modernizr.
See the Demo →
FLASHLIGHT is CSS3 3D transform demo. The text color is set to transparent and text-shadow is added. When added a transform: rotateY together with a low perspective, it gets a nice stretched effect. Browser support still limited.
I ♥ BLUR - A text blur demo 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 color to transparent and then you only see the text-shadow alone.
color: transparent;
text-shadow: #fff 0 0 100px;
That’s it! And if you animate it, it looks pretty cool.
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.
Logo for a side project with the name “DB”. The D is flipped and if you squeeze your eyes you will see that it has a shape of a ♥ with a dent in it. It’s kinda like the bite from the Apple logo.
No, it’s not for a break-up site and most likely it will never go further than this logo sketch.
Over the Eastern Holidays I had some time to read a new book called ReWork. I loved it. It reads trough like butter. Easy to understand, tons of good points. There are so many “yes, that’s it” moments, it fills you up with inspiration and motivation, but what happens after the reading?
The last chapter in the book suggests: “If it grabs you, grab it right back and put it to work”. Easy to understand, but hard to do! In the next couple of weeks/months you might remember what the book was telling you.. if you’re lucky, you actually try to change a couple things here and there.. but most likely you keep on doing it the way you have been doing it. People are just stuck too deeply into their habits. I have observed that on myself too many times.
Who knows the magic read it - do it spell?
[video]
Sometimes when I write a new post I wish I could set the post date in the future. I don’t mean publish it on a later date. Publish now, but the blogging system is aware that the post is referenced into the future. The problem now is, that when I write about an upcoming event, visitors will see it too early and when the event get’s closer, that post is already buried with new ones.
As an example, let’s say I plan to attend Chirp, the Twitter Developer Conference. I probably post about it when I first find out about it, or when I get my ticket and maybe after the event already happened. But Nobody will see it right before the event occurs!!
Below a quick example:
The “future posts” appear above normal posts for an easy glance what’s coming up. After the set time passed, a post would fall below the NOW line and you could even update it with news from the event.
A tumblr theme could look like this:
{block:FuturePosts} ... {/block:FuturePosts}
<div id="now">NOW</div>
{block:Posts} ... {/block:Posts}
Actually any kind of stream with chronological posts could use it, even Twitter or Facebook statuses. It would kinda be like a public calendar. Let’s see.
This is pretty cool. Let’s you view all my content in a nice mosaic.