CSS

Vertical flex:1 with overflow scrolling

I started to use the new Flexbox syntax in a couple places and often needed something to be vertically flexible, but when content starts to overflow, it should add a scrollbar.

First I tried it like this:

flex: 1;
overflow: auto;

but somehow it didn’t work. Just when adding height/min-height:0 it works.

flex: 1;
overflow: auto;
min-height: 0;

Not sure if that’s the intended behavior or a bug. Anyways, happy there is a simple fix for it. You can test it in this demo.

Update: Ivan points out that flex: 1 is not even needed. So the simplest way is just this:

overflow: auto;
min-height: 0;

My short talk how CSS Flexbox will help creating “flexible” Web Apps. It was recorded at this years Fronteers Jam Session.

Quick note: @kizmarh actually did the header example with floats alone by reordering the DOM elements (nice trick). But I think it’s still a bit limited and only one “flexible” element is possible. Also, Flexbox has lots of other cool features I haven’t mentioned.. like reordering and wrapping.

PS. This was my first time ever talking in front of people.. so it might be a bit rough and rushed. ;-)

Update: Uploaded the Mail UI example, but the code might be a bit messy. I just quickly did for the talk. Also, only tested in Chrome.

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 demo.

Force Lion’s scrollbar back

Personally, I prefer the hidden scrollbar, but in case you really need 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 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.

Live 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 demo.

$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 demo.$

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 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 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!

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.

Visit Site