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.
“Anyone figured how to force the scrollbar in Lion with css/html/javascript? i.e. without sys prefs“ @andyshaw85
As soon as we thought we settled the “above the fold” discussions, with Safari on Lion it’s back, more than ever..!!! ;-(
Personally, I prefer the hidden scrollbar, but in case you bump into a more “conservative” client and he really demands it, you can just overwrite the default and force the srollbar back like this:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
See the demo.
PS. And as an added bonus, it gets rid of the ugly scroll-track in Chrome and makes it look more consistent.
PSS. If you only want it on Lion, here with a JS sniffing script added.
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.
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.
Shitty Day is a side project I created just for fun. It searches for Tweets from people that write about their shitty day. The results can be seen in a fun way (toilet paper roll) and users get encouraged to send back some love. You might even could argue that it will have a therapeutic effect (you’re not alone with your shitty day).
First I intended doing everything in Flash, but then I thought it’s a good chance to play around with some CSS3, jQuery and the Twitter API. And a lot of fixed PNGs to let only the paper roll scroll. Watch the making of video.
“ Meet the new CSS double dream team: border-radius + box-shadow. ”
Together they are unbeatable! It’s such a joy to use them for rounded corners with a drop shadow. The box above uses: border-radius: 8px; to do the magic.
box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
And it get’s better: They even work on embeded Flash! See the 4px rounded corners live in the photo/video section.
Note: This is CSS3 and not all browsers support it yet, like our friend IE.
