Adding drop shadow to heading text

[Acorn]

You could add a few lines of CSS - the shadow can then be consistently applied to any headings - no images anywhere.



More: https://developer.mozilla.org/en-US/...SS/text-shadow

Gary

All (& thanks Gary), here is a working example: CSS - Poster Child.xar

Any Text column (or Area) has a Name, htmlclass='text-outline' applied.

The Website Head (code) is CSS that adds a shadow NSEW.

<style>
:root {
--hdist: 1;
--vdist: 1;
--spread: 0.25;
--shadow: #121221aa;
}

.text-outlined {
text-shadow:
calc(var(--hdist) * -1px) 0 calc(var(--spread) * 1px) var(--shadow),
0 calc(var(--vdist) * 1px) calc(var(--spread) * 1px) var(--shadow),
calc(var(--hdist) * 1px) 0 calc(var(--spread) * 1px) var(--shadow),
0 calc(var(--vdist) * -1px) calc(var(--spread) * 1px) var(--shadow);
}
</style>

You can change the extent, colour, blur and opacity of the outline in the root part:

• --hdist - replace with any decimal, including negatives and this becomes the horizontal distance of the shadow.
• --vdist - replace with any decimal, including negatives and this becomes the vertical distance of the shadow.
• --spread: this is the amount of blur, again a decimal but only positive values.
• --shadow: this is the hex rgba colour values; the first three hexadecimal pair change the mix of red, Greed & Blue, the last pair is the opacity from 0 (invisible) to ff (full on).

You need not touch the ClassName text-outlined.

Webbie & Xara things of note:

• There is no current CSS text-stroke available over major browsers. This would be the way to go.
• Using a Line Width of 0px (not None) adds the smallest visible line thickness to a shape but only in the design but not when rendered.
• Xara fails to treat rotated Text as a Font so you are stuck with an image. It is very simple to achieve this in CSS.
• All CSS effect are lost in Exporting as PDF. A Screenshot may be your only out.

Acorn