Originally Posted by
Initiostar
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
Bookmarks