Even More CSS Secrets

By Lea Verou (@LeaVerou)

2011-2012

Bouncing transitions
cubic-bezier() values > 1
Flexible ellipses
border-radius: 50%
Multiple outlines
box-shadow spread
Ignore mouse events
pointer-events: none
Custom code indents
tab-size
Styling based on sibling count
:first-child:nth-last-child(n + 8) ~ *
Custom checkboxes & radios
:checked + label
Improving UX with cursors
new L3 cursors like not-allowed
Background patterns with pure CSS
layered gradient tricks
Background image with corner offsets
4 value background-position

2012-2013

Shadows to indicate scrolling
gradients & background-attachment: local
Fixed content width, fluid background
calc(50% - content width / 2)
Lightbox effect
stacking transitions via transition-delay
Text line background
background-size, ems, and gradients
Diamond crop
nested opposite rotate() transforms
Move element along a circle
transform: rotate(-θ) translate(r) rotate(θ)
Shadows that follow transparency
filter: drop-shadow()
Blurred element backdrop
fixed positioning, pseudos, filter: blur()
Hyphenation
hyphens: auto
Frame by frame animation
animation-timing-function: steps()

on Amazon

Also available in:

German
Polish
Russian
Japanese
Simplified Chinese
Traditional Chinese
Korean
Bulgarian

Cutout Text

Even More CSS Secrets

on

CSS blend modes	41	32		7.1

With multiply blend mode, black is cutout and white is opaque
With screen blend mode, white is cutout and black is opaque

Characters as images

Turn glyphs into (animated!) images with SVG data URIs
Use this trick to style meters with discrete icons

Fancy borders

SVGs with no viewBox spread to cover the entire area. Strokes stay the same width.
We can use this to apply fancy SVG strokes to our HTML elements!

Line Headings

width: 100% on h1, height on pseudo

Text nodes and pseudo-elements can be flex children

Accessible CSS
Menus

Item 1

Item 2

Item 3

:focus-within	60	52		10.1

:focus-within + accessibility = ❤️
:target-within is coming!

Variable Fonts for non-variable strokes

Regression

size	weight

Wolfram Alpha query:

The weight axis in variable fonts allows us to equalize strokes across different font sizes
We can use linear or quadratic regression to avoid calculating the weight every time

Thanks to Black[Foundry] for providing their font Drive for this demo!

Responsive Flex
No media queries added!

flex-wrap allows your layout to become vertical if there's no space
flex is relative. Any positive flex value makes the element stretch

Based on Flex-grow 9999 Hack by Joren Van Hee (@jorenvanhee)

Auto-flowing grids

for fun and profit

grid-auto-flow defines the direction auto grids are laid out

200px cells

CSS Grid	57	52	10	10.1

object-fit	60	36	16	7.1

The dense keyword prevents holes
grid-[row|column]-end: span N; for row/column-independent spanning
object-fit: cover prevents image distortion

Pie charts


			CSS.registerProperty({
				name: "--value",
				syntax: "<percentage>",
				initialValue: "0%",
				inherits: false
			});

conic-gradient()	69			12.1

CSS Variables	49	31	15	9.1

CSS.registerProperty()	⛳️			⛳️

Conic gradients are coming!
A color stop at 0 creates hard lines regardless of the previous one’s position.

CSS variables help create flexible components.
CSS.registerProperty() will allow us to animate custom properties!

Descendant
Grid

Items

display: contents	65	37		11.1

display:contents allows us to make descendants flex or grid children
Text nodes are flex/grid children too!

Also available in:

Even More CSS Secrets

on

Text nodes and pseudo-elements can be flex children

Linear Quadratic Cubic Regression

Regression