There’s a new blog post out about how Glitch made that colorful header on their homepage.
The header.
I’ve long wondered why there is sort of a color border on the links.
Enlarged view of “WebXR” link, rendered in Firefox on Windows.
Now that there’s a blog post about it out, it’s finally clear. It’s because you’re looking at this
on top of this
on top of this
The pixels at the periphery of the text are partially inside the text and partially outside. The renderer knows as much as:
- the light blue covers the whole pixel
- the purple gradient covers part of the pixel and goes over the light blue
- the yellow covers part of the pixel and goes over everything else
The purple and yellow actually cover the same part, but the renderers in browsers don’t know that. So it ends up drawing a pixel that’s combination of all three, even though there ought to be no purple. I wrote an article about this once.
https://wh0.github.io/2019/11/05/rasterization.html
What would be good is if we could have the purple layer not draw the text corresponding to those links, then the browser would only have to blend light blue and yellow.
But the text also kiiinda needs to be there, so that the text layout remains the same.
A modified version of the header with the linked words simply removed from the gradient layer.
No problem, right? Invisible text is how they make the colored links layer line up. They just set the text color to transparent.
Styling used in the colored links layer. More CSS makes the links have color other than transparent.
But there’s no such luck doing the same there here. The gradient text is done by using a background gradient with background-clip: text
, and with the text already transparent (i.e. thus not contributing any additional color to the background gradient).
Styling of the gradient layer. I’m guessing they use -webkit-text-fill-color
instead of color
so that a reasonable color
can be set for graceful degradation.
What turns out to be just right is visibility: hidden
. As MDN describes it,
The
visibility
CSS property shows or hides an element without changing the layout of a document.
The gradient layer with linked words hidden using visibility: hidden
.
Full composition.
Enlarged view of “WebXR” link, rendered in Firefox on Windows.
oh and a remix of the demo on glitch with a one-liner diff
diff --git a/style.css b/style.css
index 90a4022..e3065c7 100644
--- a/style.css
+++ b/style.css
@@ -214,6 +214,7 @@ span.fake-link {
font-size: inherit;
font-weight: inherit;
text-decoration: none;
+ visibility: hidden;
}
span.link-wrapper {