Underappreciated CSS features by example
A quick exploration of a handful of underappreciated CSS features. I've tried to choose practical examples where possible to demonstrate each feature's full capabilities.
My examples will use SASS for the beautiful syntax, with Bourbon for vendor prefixing and shortcut methods, and Ruby, my German Shepherd, as a model.
Keyframe animations are a powerful way of animating DOM elements. You declare an animation using
@keyframes <name>, and then apply it by adding
animation-name: <name> to the element you'd like to animate.
One of the simplest examples is to continously spin, which I use for loading icons instead of a GIF:
+keyframes(spin) 0% +transform(rotate(0)) 100% +transform(rotate(360deg)) .spin +animation(spin 1s infinite linear)
For Biosgraphy I built a flipping effect for the loading butterfly, which uses CSS transforms with perspective to flip horizontally.
+keyframes(flip) 0% +transform(perspective(400px) translateZ(0) rotateY(0) scale(1)) +animation-timing-function(ease-out) 40% +transform(perspective(400px) translateZ(150px) rotateY(170deg) scale(1)) +animation-timing-function(ease-out) 50% +transform(perspective(400px) translateZ(150px) rotateY(190deg) scale(1)) +animation-timing-function(ease-in) 80% +transform(perspective(400px) translateZ(0) rotateY(360deg) scale(.95)) +animation-timing-function(ease-in) 100% +transform(perspective(400px) translateZ(0) rotateY(360deg) scale(1)) +animation-timing-function(ease-in)
e = document.getElementById("spinner") e.addEventListener("animationend", on_end, false) e.className = "icon-spin"
There are also the aptly named "animationstart" and "animationiteration" events, which are triggered on the animation start and on each iteration.
Filters let you apply an effect to an element (usually an image), for example, converting to grayscale:
You can chain multiple filters together, and/or apply them with a CSS animation (or via a transition), for example:
+keyframes(brightness) 0% +filter(brightness(100%)) 100% +filter(brightness(200%)) .filters +animation(brightness 3s linear 0s infinite alternate)
Box reflection - webkit only
Box reflection is only supported in webkit (Chrome and Safari). It looks like element (coming in CSS4) will be the recommended method of doing box reflections (albeit with more HTML elements) for production sites in the future.
You can recreate the classic photo-gallery effect like so:
-webkit-box-reflect: below 2px linear-gradient(transparent, transparent 50%, rgba(255, 255, 255, 0.4))
Some OpenType fonts allow for advanced control over typographic features. I'm using Playfair Display from Brick.
You can control ligatures (combining several letters into a single specifically designed glyph), numbers (oldstyle, proportional), automatic fractions, swashes, and more. See the full list of four letter codes.
The Glyphs panel in Illustrator is useful for viewing all the ligatures that a font supports:
Common ligatures (liga)
Discretionary ligatures (dlig)
Oldstyle figures (onum) vs lining (lnum)
Automatic fractions (frac)
Slight adjustments in kerning between glyph combinations (e.g. "To") - above is with
kern on, below is the default behaviour.
Automatic ellipsis of single-line text in a width-constrained container.
text-overflow: ellipsis white-space: nowrap // don't wrap overflow: hidden // don't scroll width: 50% // or max-width
Adjust hyphenation, rather than relying on the browser's default behaviour. Not currently supported in Chrome, Opera or Android browser - see the firefox screenshot.
+hyphens(manual) // auto or none
You can force no hyphenation with
none so long words get wrapped:
Rely on the browser to hyphenate appropriately with
auto. You can suggest places with
­ characters, but the browser may do it's own thing.
Or reply on
manual hyphenation completely, only at