Say you want to select the 7th up and to the 14th element of a set of elements. It’s possible, using this selector: ol li:nth-child(n+7):nth-child(-n+14) { background: lightpink; } See the Pen Selecting Ranges of Elements with CSS on CodePen. (from 12 Little-Known CSS Facts (The Sequel)) Related: Quantity Queries for CSS →
Tag Archives: css
Multi-layered Parallax Illustration
See the Pen Multi-layered Parallax Illustration by Patryk Zabielski (@zabielski) on CodePen. Good use of data-* attributes to afford manipulation of the shifting of the backgrounds from within the HTML. Do note that the demo won’t run here on bram.us as the narrow screen layout – without parallax – will be used. Multi-layered Parallax Illustration …
Viewport Unit Based Typography
Styling Broken Images
Turns out it’s possible to style broken images. You know, from this: To this: But just “how”, one might ask? Because the <img> element is a replaced element controlled by an external source, the :before and :after pseudo-elements typically shouldn’t work with it. However, when the image is broken and not loaded, these pseudo-elements can …
The future of loading CSS
It’s soon OK to link to stylesheets directly from anywhere inside the <body> without having FOUCs: The plan is for each <link rel="stylesheet"> to block rendering of subsequent content while the stylesheet loads, but allow the rendering of content before it. The stylesheets load in parallel, but they apply in series. This makes <link rel="stylesheet"> …
Cinema Seat Preview
Maybe you are familiar with those ticket booking systems where, at some point during the purchase flow, you have to choose a seat. This is usually done when selling tickets for games, movies, flights or concerts. Wouldn’t it be cool to have some kind of “realistic” preview of the seat, i.e. see the stage or …
Simplest CSS Slideshow
MailChimp 2015 Annual Report
CSSGram
How to animate “box-shadow” with silky smooth performance
How do you animate the box-shadow property in CSS without causing re-paints on every frame, and heavily impacting the performance of your page? Short answer: you don’t. Animating a change of box-shadow will hurt performance. There’s an easy way of mimicking the same effect, however, with minimal re-paints, that should let your animations run at …
Continue reading “How to animate “box-shadow” with silky smooth performance”