56 lines
1.9 KiB
HTML
56 lines
1.9 KiB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<body style="margin: 0px">
|
|
|
|
<style>
|
|
div, text {
|
|
font-family: Arial;
|
|
font-size: 50px;
|
|
}
|
|
|
|
text, tspan {
|
|
alignment-baseline: hanging;
|
|
}
|
|
|
|
div.shadow, text.shadow {
|
|
text-shadow: hsla(20, 100%, 50%, 1) 7px 4px 0
|
|
, hsla(60, 100%, 50%, 1) -8px 14px 2px
|
|
, hsla(100, 100%, 50%, 1) -21px -12px 5px;
|
|
}
|
|
</style>
|
|
<p>The first two texts should look identical, as there is no shadow applied.</p>
|
|
|
|
<div style="position: absolute; left: 20px;">
|
|
<span style="-webkit-text-stroke: 1px; -webkit-text-fill-color: transparent;">This</span>
|
|
<span style="-webkit-text-stroke: 1px; -webkit-text-fill-color: white;">text</span>
|
|
<span>casts multiple</span>
|
|
shadows
|
|
</div>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="100" style="margin-top: 50px;">
|
|
<text x="20" y="30">
|
|
<tspan fill="white" fill-opacity="0" stroke-width="1px" stroke="black">This</tspan>
|
|
<tspan fill="white" stroke-width="1px" stroke="black">text</tspan>
|
|
<tspan>casts multiple</tspan>
|
|
shadows
|
|
</text>
|
|
</svg>
|
|
|
|
<p>The next two texts have subtle differences, as the stroke/fill is painted seperated in SVG.</p>
|
|
|
|
<div class="shadow" style="position: absolute; left: 20px;">
|
|
<span style="-webkit-text-stroke: 1px; -webkit-text-fill-color: transparent;">This</span>
|
|
<span style="-webkit-text-stroke: 1px; -webkit-text-fill-color: white;">text</span>
|
|
<span>casts multiple</span>
|
|
shadows
|
|
</div>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="100" style="margin-top: 50px;">
|
|
<text class="shadow" x="20" y="30">
|
|
<tspan fill="white" fill-opacity="0" stroke-width="1px" stroke="black">This</tspan>
|
|
<tspan fill="white" stroke-width="1px" stroke="black">text</tspan>
|
|
<tspan>casts multiple</tspan>
|
|
shadows
|
|
</text>
|
|
</svg>
|
|
|
|
</body>
|
|
</html>
|