Quantity Queries for CSS

fig6_firstchild_li

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 6” in our navigation menu.

Quantity Queries for CSS →

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

3D First Person Shooter … with CSS

css-fps

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 deal with — just apply a CSS transform to rotate an element around an axis and you’re done!

“just”

Creating objects from rectangles seems limiting at first but you can do a surprising amount with them.

cssfps-objects

Really impressive. Also: look at the date of that post: January 2013.

Creating 3D worlds with HTML and CSS →
CSS FPS Demo →

(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) {
    background: red;
}

css3-selectors-1

“:family-of-m” selector:

/**
 * The first selector will select the first span in a row, 
 * if it is also the fifth to last element ... the second
 * selector will select all successive spans. The combined
 * result is that all spans in a row of 5 will be selected
 */
span:nth-child(1):nth-last-child(5), span:nth-child(1):nth-last-child(5) ~ span { 
    background: green;
}

css3-selectors-2

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

CSS3 text-align-last

text_align_last_center

.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 it allows you to have the caption’s alignment set to justify;, except for the last line (normally it would end up left aligned). Available in Webkit (under a flag).

Improving your site’s visual details: CSS3 text-align-last →

CSS3 Marquee

Yesterday, I sent out this tweet:

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 …

Recreating the <blink> tag in CSS3 isn’t that hard (it has been done before). Just use an animation and change the opacity and voilà:

Recreating the <marquee> tag in CSS3 turned out to be quite a different beast though, as the first ventures using position: left and the like turned out to be a dead end. Eventually I got it working using the element CSS function as a value for the background property. This, however, only works in Firefox (as it’s the only browser supporting it).

If you’re wondering why position: left; didn’t work, there’s a little FAQ contained in the embed above. Essentially I’m making good use of the fact that the units used in the background property are based on the width of the background, and not the width of the containing element.

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

Adobe Edge Webfonts

Edge Web Fonts is a free service that provides access to a large library of fonts for your web site. It’s one of the Edge Tools & Services from Adobe. Use of the fonts is free and unlimited, see the terms for details.

Also integrated in their new set of Edge products

Too bad they don’t have a visual library to scroll through, or have I missed a link (all I can find is this plain list and that no-so-good-looking dropdown on the Edge site)?

Adobe Edge Webfonts →

Fontello – iconic fonts scissors

This tool lets you combine iconic webfonts for your own project. With fontello you can:

  1. shrink glyph collections, minimizing font size
  2. merge symbols from several fonts into a single file
  3. access large sets of professional-grade open source icons

    4. First, select the icons you like. Then update glyph codes (optional), and download your webfont bundle.

Source available on GitHub

Fontello →