CSS: Select first x items

Because I keep forgetting this, an entry on the blog so that my future self can find it back easily: CSS: Want your first 5 list items to be bold? li:nth-of-type(-n + 5) {font-weight: bold;} Start with the # of list items you want to impact, then increment backward with -n. — Estelle Weyl (@estellevw) …

Star Wars Scene Transition Effects in CSS

You know those wipe transitions between scenes in Star Wars movies? Have you ever thought it would be awesome to recreate them with CSS? Probably not, but, well, here we are. Let’s do it. Uses gradients set as a mask-image which transition on hover. For the iris and clock wipte effects, @property is used. Star …

First Look At The CSS object-view-box Property

Ahmad Shadeed dives into the new object-view-box property, a side-invention to the aforementioned Page Transitions API: The object-view-box property specifies a “view box” over an element, similar to the <svg viewBox> attribute, zooming or panning over the element’s contents. Like so: img { aspect-ratio: 1; width: 300px; object-view-box: inset(25% 20% 15% 0%); } Available now …

Bringing Page Transitions to the Web

At this year’s Google I/O, Jake presented the revised version of the Transition API: Native apps often feature transitions between states that both look great and help communicate the type of navigation to the user. The bad news: creating transitions between pages on the web is impossible. In-page transitions are possible, but complex. The good …

Deep Dive into Text Wrapping and Word Breaking

Will Boyd: Let’s talk about the various ways we can control how text wraps (or doesn’t wrap) on a web page. CSS gives us a lot of tools to make sure our text flows the way we want it to, but we’ll also cover some tricks using HTML and special characters. Contains a ton of …

The Future of CSS: CSS Toggles

The work on CSS Toggles has been abandoned. The contents of this article are no longer relevant. Late last week, I was very delighted to see that Chromium will start prototyping with CSS Toggles, a proposal currently only available as an Unofficial Draft, authored by Tab Atkins and Miriam Suzanne (who else?!). CSS toggles are …

Say Hello to <selectmenu>, a Fully Style-able <select> Element

Over at CSS-Tricks, Patrick Brosset dug into <selectmenu>, the customizable <select> we always wanted. The new experimental <selectmenu> control offers a lot of flexibility when it comes to styling and even extending a traditional <select>. And it does this in all the right ways, because it’s built into the browser where accessibility and viewport-aware positioning …