Adding drop shadow to heading text

[letsgofishing]

If I do the above, I assume the text get converted to a bitmap?
If I copy the word, put it back 1 and give it a 1pt outline and then soft group it, it also gets exported as a bitmap...
I've got some white headings on top of a photo and I need to do something make the text stand out better on the light areas....
Many thanks - LGF

[Egg Bramhill]

Hi LGF, Select your text and apply a shadow, glow shadow is best for the purposes you require. Copy this shadowed text to the clipboard. Now with the original text selected, Arrange / Convert to Editable Shape, then Ungroup. Select only the text shape and delete. Ctrl+Shift+V to place the bitmap copy in the same position then remove the drop shadow from text.

Your left with text as text and a bitmap shadow.

[gwpriester]

Except Egg - The text is now a shape and not findable by search engines. So modify your steps:

1. Create your headline and Copy it to the clipboard.
2. Add your shadow to the text on the screen.
3. Select the text with shadow and Convert to Editable Shapes
4. Select the text and Ungroup. Delete the text part. Leave the shadow.
5. Edit > Paste > Paste in Place the Headline Text you copies to the clipboard.

Export your website and see if the text in your browser is selectable with the Text Tool (it is)

[letsgofishing]

Awesome - thank you Sir!

[letsgofishing]

Many thanks too Priester

[Initiostar]

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

[Egg Bramhill]

Except Egg - The text is now a shape and not findable by search engines.

Sorry Gary that's not true. In my explanation the shadow is a bitmap and the text remains text

I stated Select only the text shape and delete, so that removes the text as a shape.

I attach my example.

Gary's (Initiostar) is the best method but for those not wanting to dabble in CSS mine works well.

[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

[gwpriester]

Fair enough Egg.

[Chris M]

Why not clone the text in place and add the shadow to the one at the rear?
Or, clone, add an outline and feather the rear one.