Quantity Queries for CSS

Styling elements based on the “more than one” and “fewer than two” thresholds is a neat trick, but a flexible “quantity query” interface would accept any quantity. That is, I should be able to style “more than or equal to n” for any value of n. Then I can style “more than or equal to …

3D First Person Shooter … with CSS

With CSS transforms we can’t define arbitrary shapes using a set of points, we’re stuck with HTML elements which are always rectangular and have two dimensional properties such as top, left, width and height to determine their position and size. In many ways this makes dealing with 3D easier, as there’s no complex math to …

(ab)using CSS3’s :nth-child() selector to invent new ones

When combining :nth-child() with some other pseudo selectors, one can actually create new types of selectors. “:nth-of-m-child” selector /** * This selector will select the third element in a row, * if it is also the third to last element … thus selecting * the 3rd child in a row of 5 elements */ span:nth-child(3):nth-last-child(3) …

CSS3 text-align-last

.caption { text-align: justify; text-align-last: center; } The text-align-last property describes how the last line of a block or a line right before a forced line break is aligned when ‘text-align’ is ‘justify’, which means you gain full control over the alignment of the last line of a block. As seen in the example above …

CSS3 Marquee

Yesterday, I sent out this tweet: <font color="#FFFF00"><marquee behavior="alternate" bgcolor="black" scrollamount="10">Sometimes I miss the olden days</marquee></font> — Bramus! (@bramus) February 12, 2013 Rather soon I got a reply by @vormplus: @bramus we should recreate blink and marquee with css3. Add some extra magic to the web 😉 Sparked by this reply I got started … …

Fontello – iconic fonts scissors

This tool lets you combine iconic webfonts for your own project. With fontello you can: shrink glyph collections, minimizing font size merge symbols from several fonts into a single file access large sets of professional-grade open source icons First, select the icons you like. Then update glyph codes (optional), and download your webfont bundle. Source …