TL;DR: when a header is too cool for just one header, use two.
// Let's look at what we're starting with, two h1s!
Glitch is the friendly place where everyone builds the web. Start a new blog, play with React, or build new worlds with WebXR. Let’s go!
Glitch is the friendly place where everyone builds the web. Start a new blog, play with React, or build new worlds with WebXR. Let’s go!
/***
Now this is a little ridiculous. We need to style them AND make sure each fits in
*EXACTLY* the same footprint. This is easier said than done. Links introduce new
inline-block elements that will affect text flow, so we need to create not only links,
but fake-link inline-block elements that will produce identical text flow.
***/
Glitch is the friendly place where everyone builds the web. Start a new blog, play with React, or build new worlds with WebXR. Let’s go!
Glitch is the friendly place where everyone builds the web. Start a new blog, play with React, or build new worlds with WebXR. Let’s go!
/***
Okay let's get a little silly and set the top h1's text color to fully transparent.
Here's where the cascade matters — we need to define link styles more specifically than
our text color styles to make sure that link colors will be honored even thoughte text
itself is transparent.
***/
Glitch is the friendly place where everyone builds the web. Start a new blog, play with React, or build new worlds with WebXR. Let’s go!
Glitch is the friendly place where everyone builds the web. Start a new blog, play with React, or build new worlds with WebXR. Let’s go!
/***
Final step: we stack them. Both h1s are in a relatively positioned div, meaning they
can both take positioning. The bottom h1 is positioned relatively with no set X/Y
coordinate, but with a z-index of 10. (Also critical: set its aria-hidden arttribute
to `true` so screen readers won't read everything twice!) The top h1 is positioned
absolutely with left and top set to 0, z-index at 20 so it renders exactly above the
bottom h1. And voila!
***/