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 …
Tag Archives: css3
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) …
Continue reading “(ab)using CSS3’s :nth-child() selector to invent new ones”
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 …
Internet Explorer Platform Status
Status of the Internet Explorer Platform: lists all new/fairly new HTML5/CSS/JS techniques that browser vendors are implementing, and Microsofts stance on / progress with it. IE Platform Status → Related: don’t forget about caniuse.com 😉
MixItUp – A CSS3 and JQuery Filter & Sort Plugin
MixItUp is a light-weight but powerful jQuery plugin that provides beautiful animated filtering and sorting of categorized and ordered content. Uses CSS3 animations to move the items around. MixItUp →
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 … …
tiltShift.js
A jQuery plugin that uses the CSS3 image filters to replicate the tilt-shift effect. This is a proof of concept and currently only works in Chrome & Safari 6. tiltShift.js →
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 …
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 …