HTML doesn't allow <div> inside <h1>. I found before that using a
<span> caused the background not to work. That seems to be down to CSS2
section 10.6.1, describing inline, non-replaced elements: "The height of
the content area should be based on the font, but this specification
does not specify how."
Happily, we can just define this particular <span> to be a block
element, so that it behaves like a <div> even though it's a <span>.
That works fine, and because we're only using it to get a well-defined
content area it doesn't matter if it's ineffective when the stylesheet
is missing.
}
.fade {
+ display: block;
-webkit-mask-image: linear-gradient(to right, transparent 1em, white 3em);
mask-image: linear-gradient(to right, transparent 1em, white 3em);
}
<link rel="icon" href="icon-64.png" type="image/png" sizes="64x64" />
</head>
<body>
- <h1><div class="fade">Bedstead</div></h1>
+ <h1><span class="fade">Bedstead</span></h1>
<p>Bedstead is a family of outline fonts based on the characters
produced by the
Mullard SAA5050 series of Teletext Character Generators. The
~bjharris / bedstead-debian.git / commitdiff