A rather geeky/technical weblog, est. 2001, by Bramus
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.
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.
Really impressive. Also: look at the date of that post: January 2013.
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;
}
“: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;
}
.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 →
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.
Related: don’t forget about caniuse.com 😉
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.
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 …
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.
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!
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.
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)?
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 available on GitHub