Some Additional, Advanced CSS

An overflow in CSS happens when there is too much content to fit in a container⁠—usually because you have manually constrained its block-size or inline-size. (By default, the browser will try to show you everything!)

• overflow – MDN
• Overflowing Content – MDN
  There are going to be a lot of MDNs, here.

But we can use this behavior intentionally to crop our content, or create interally-scrolling areas:

Importantly, this creates a new stacking context⁠—which means things with position (namely, position: sticky)⁠—and some other properties⁠—will now use the overflow container as their reference/​origin:

• The stacking context – MDN
  Always confusing; think of these as frames or groups in Figma.

You have probably noticed that HTML renders a lot of extra space around text elements, called the line box (or, in design software parlance, the bounding box).

• Font Metrics, Line-⁠Height and Vertical-⁠Align
  A deep-dive on type positioning.
• Vertical Spacing and Line-Height in Design Systems – Google Fonts
  It’s all very complicated.

It is based on the font-family, the font-size, and the line-height, which basically means it is different all the time⁠—and crucially, often different from Adobe/​Figma to HTML. This makes it difficult to position type precisely⁠—especially at large, expressive sizes like your headings! It’s always annoying, and you’ll often be adding/​subtracting your spacing (margin or padding) to account for it, if you want to line everything up just right, optically.

Let’s avoid it. We can use pseudo-elements, ::after /​ ::before⁠—which you may remember are entirely created by CSS, not in your HTML⁠—to negate this vertical space with a negative margin. By doing this on the pseudo-elements, we can still position the parent element normally, otherwise:

We’ve gone on-and-on about how you can’t treat the web like print⁠—always perfectly ragging your text for nice, smooth blocks. In modern (responsive) web design we don’t always know what our text will be, nor where it will wrap!

But we can do a handful of things to make for better ragging/​wraps, given the unknowns⁠—judiciously using hyphens /​ ­, <wbr>, white-space, <nobr> and  , and text-wrap to somewhat control your line breaks.

Ideally we could set punctuation outside of our text blocks, for visual alignment based solely on the letters⁠—a traditional design technique called hanging punctuation. (There is actually a CSS property for this, but only Safari supports it! …ish.) But we can still approximate the behavior, at least for quotes:

• ::before and ::after – CSS Tricks
  Another great CSS Tricks article.

When in doubt, The Elements of Typographic Style explains these conventions.

But also, as Bringhurst says, “read the text before designing it.” Always put yourself in the mind of your reader!

CSS can apply visual effects on elements⁠—adjusting their graphical display after they are laid out and rendered in the page⁠—with the filter property:

• filter – MDN
  Back to MDN.

These have corresponding backdrop-filter values⁠—which apply the effect to the page behind an element! You’ll often use these in conjunction with an opacity (or semi-transparent color) or a mix-blend-mode for interesting Photoshop/​Figma-like layer-blending effects:

• backdrop-filter – MDN
• mix-blend-mode – MDN
  Often used together.

The units for these are all a bit different; MDN is your friend here, as usual. You can apply single or multiple transforms, which are written space-separated and applied one after the other:

						.rotated {
	transform: rotate(-5deg);
}

			
	

						.rotated-and-scaled {
	transform: rotate(-5deg) scale(120%);
}

			
	

Keep in mind that these transformations are applied after the rest of the CSS is parsed, and thus treat your element a bit like an image. And like overflow above, transform also creates a new stacking context for its children:

You shouldn’t use transform for layout⁠—as in, don’t use translate when margin, padding, flex, or grid can achieve your layout. This is bad practice, and usually very brittle! Especially when working responsively.

Use transform only for what other properties can’t accomplish!

CSS transitions allow us to move nicely between CSS property values.

• Using CSS Transitions – MDN
  Every state change is better with some easing.

Instead of having a property take effect immediately when a pseudo-class is applied (or later, and more commonly, with JS⁠—a proper class), we can tell a CSS property to transition from one value to another over a given amount of time (duration), and with a specific acceleration (timing-function), or a delay. Motion can quickly get very complex!

You’ll often see a transition in shorthand:

						.some-cool-transition {
	transition: all 2s 1s linear;
}

			
	

						.some-cool-transition {
	transition-delay: 1s;
	transition-duration: 2s;
	transition-property: all;
	transition-timing-function: linear;
}

			
	

You can also control how different properties of an element transition independently, with a comma-separated list:

						.some-cool-transition {
	transition: background-color 2s linear, transform 1s ease-in-out;
}

			
	

						.some-cool-transition {
	transition-duration: 2s, 1s;
	transition-property: background-color, transform;
	transition-timing-function: linear, ease-in-out;
}

			
	

Sometimes the shorthand here is easier than discrete properties, where you have to maintain the same order across all of them. It’s all the same to the computer!

Often, CSS transitions will be used with JavaScript when adding/​removing classes, to make a state change less abrupt. For now, we’ll use pseudo-classes to demonstrate:

Nearly all CSS properties can be transitioned⁠—but keep in mind that changes that cause a reflow (re-triggering layout, sometimes called paint) are slow and can make your page feel glitchy⁠—especially when you start having many of them. Each in-between state causes the browser to re-render your entire document! So stick to changes of color, opacity, and transform for the smoothest performance.

Sometimes, transitioning a property from one value to another isn’t enough⁠—you may need more complicated (or repeating) motion behavior. CSS animation allows precise state sequencing with @keyframes (akin to… keyframes or a timeline in other software contexts).

• Using CSS Animations – MDN
  Some of you already got into these!

To create a keyframe animation, we define an element’s initial state in CSS⁠—then an animation property, which includes timing and behavior, as well as an animation name (something that you make up). Again, you’ll often see these in shorthand:

						section {
	animation: blinking 3s infinite ease-in-out;
}

			
	

						section {
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-name: blinking;
	animation-timing-function: ease-in-out;
}

			
	

Importantly, we then define the actual keyframes of an animation in a separate at-rule. Each keyframe is specified with a percentage of the animation’s duration, and can specify multiple properties⁠—a bit like selectors for the time:

For accessibility, it is best-practice to scope your transitions and animations to folks who don’t mind the motion with media queries.

With great power there must also come great responsibility.

Stan Lee, 1962