Some Additional, Advanced CSS

Overflows and Scrolling #

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

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

We can use this behavior intentionally to crop our content or create scrolling areas:

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

Precise Text Positioning #

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 are entirely created by CSS, not in your DOM—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:

Figma is actually ahead of CSS here with its recent Vertical Trim option. But the code for this kind of thing will get much easier in coming years with the analogous text-box-trim and text-box-edge properties! Soon.

Text Ragging (Kinda) #

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>, <nobr> and  , and balance to somewhat control your line breaks.

Hanging Punctuation (Sorta) #

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!) 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!

Filters! #

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 also correspond to backdrop-filter values—which apply the effect to the page behind an element! You’ll often use these in conjunction with opacity or a mix-blend-mode for interesting Photoshop/Figma-like layer-blending effects:

Transforms! #

Beyond our standard sizing and layout afforded by CSS, you can also visually manipulate elements using CSS transforms—scaling, skewing, translating, or rotating elements after they are laid out in the DOM. It’s like grabbing the “corner handles” in Adobe/Figma!

• Transform – MDN
  These are fun.

scale() / scaleX() / scaleY() / scaleZ() / scale3d()

Change the displayed size of the element—as if it is an image.

skew() / skewX() / skewY()

Tilt an element to the left or right, like turning a rectangle into a parallelogram.

translate() / translateX() / translateY() / translate3d()

Move an element left/right and up/down, and also in three-dimensional space.

rotate() / rotate3d()

Rotate the element.

perspective()

Doesn’t affect the element itself, sets the distance between the user and the three-dimensional plane.

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!

Transitions! #

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.

And Animations! #

Sometimes, transitioning a property from one value to another isn’t enough—you may need more complicated (or repeating) motion behavior. CSS animations allow 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:

With great power there must also come great responsibility.

Stan Lee