Just like last year, this post is an reduced version of the talk by the inimitable Lea Verou with inline demo's. It's based on the video recording of her talk and her slides.
It's an extremely common situation to want to center float your content in a fixed width column. The usual solution would be to make a full width wrapper element for your content and style it like this:
I'm sure making this wrapper everytime has bothered you as much as me and with the introduction of calc() for CSS, it can be left out! Just use:
The 1em can be anything, since it is the vertical padding. The 100px is half of the intended width. What you're effectively expressing here is a full width element (default for all display: block; elements) with a left and right padding of 50% of the screen, but subtracting (half of) the width of the (virtual in this case) content column. This is the single most useful application of mixed unit calculations in runtime CSS, IMHO. It even works in IE9+.
Example:
Already 2 years back I have mentioned CSS transitions, but now it is possible to append multiple transitions. Let's put it into practice using my old example:
As you can see, upon hover the box expands in the horizontal and vertical direction evenly and at the same time. Now it is possible to combine transitions, we can expand it first in width and then roll it out vertically. It works in IE, but only 10+.
This example reverts the animation the same way as it starts: first width then height. It is possible to do this backwards, but it would involve adding a class (e.g. current) with javascript after the animation ends and then overwriting the transition property to go backwards.
Using CSS it is possible to set a separate background for alternating lines of text, without adding HTML elements for every line. This might be comfortable for displaying source code:
.zebra { background-image: linear-gradient(#000 50%, #333 50%); background-origin: content-box; background-size: 100% 2.4em; color: #ff8100; font-family: monospace; line-height: 1.2em; }
Let's go into this in a little more detail. A linear-gradient as background and the background-size property where also used in my previous article to display diagonally striped backgrounds. The gradient uses 2 colors stops both at 50%, making two solid planes in the desired colors. Next, the background-size is set to 100% of the width but 2.4em, i.e. twice the line-height. This makes the background pattern of the two solid planes repeat every two lines. This is why it is essential that the background height is twice the line-height.
As if this wasn't already briljant enough, it also automatically scales with the font-size. Because the background-size and line-height use the relative unit em, they both scale with the font-size. Try changing it:
What is a speech bubble without the tail pointing to its speaker? Well, just a bubble, I suppose. It is also a commonly used UI component to give information about some part of the UI, e.g. information for a specific input field. Most UI design I've seen use CSS for the bubble but an image for the tail, but it is possible to do this in pure CSS, and it is surprisingly easy.
Imagine we want to make our tail point up. Let's first define a div with zero height but fat borders. I'll give the bottom border a different color:
We just make the top border zero height:And then all the borders, except for the bottom, transparent:Adding this as a pseudo element to the actual bubble, gives us this:Normally, adding a box-shadow to this speech bubble, would leave the tail "unshadowed":
A new CSS property, filter, should be able to help here. It adds SVG filters to CSS. This doesn't work as well in FF as it does in webkit. Although there is a workaround, the clean solution I present here only works in webkit.