Drop shadow on text using .html

Ask the community
,
1

Hey all,

What’s the best way to add a drop shadow using Velo on EditorX? Right now I have this:

$w("#text3").html = "<p style='word-spacing: 4px;filter: drop-shadow(1px 1px 5px #000000)'>TEXT</p>"

Which works, but when I try this…

$w("#text3").html = "<p style='word-spacing: 4px;filter: drop-shadow(1px 1px 5px #000000)'>${​​​​​​​​​$w("#text3").text}</p>";

It doesn’t work, any idea why? I’d like to just use the #text3 variable rather than writing the text out in the .js

Thanks!

  • Chris
2

You are looking for —> “text-shadow”?

$w("#text3").html ="<p style='word-spacing: 4px;filter: text-shadow(1px 1px 5px #000000)'>${​​​​​​​​​$w("#text3").text}</p>";

1208×1405 79.9 KB

3

Thanks, I’m getting an error saying it’s

1409×299 8.41 KB

missing a semicolon.

4

@anenga
I copy and pasted your starting CODE → You have an SYNTAX-ERROR…

$w("#text3").html ="<p style='word-spacing: 4px;filter: text-shadow(1px 1px 5px #000000)'>${​​​​​​​​​$w("#text3").text}</p>";

Take a look onto this working example! Pay ATTENTION onto the right SYNTAX!

$w('#myTextElementIDhere').html=`<b><p style="color:white; text-align:center; font-size:11px">Installed</p></b>`;
5

Hi there …

The problem here is the quotations, he’s inserting a value as a regular text, it’s an undefined inline attribute, therefore an error will always occur.

When you want to insert an inline value, use the (``) quotations instead of (’ ') or (" ").

Try this instead:

$w("#text3").html = `<p style='word-spacing: 4px;filter: text-shadow(1px 1px 5px #000000)'>${​​​​​​​​​$w("#text3").text}</p>`;

Let me know if this helped.

6

Thanks, I now get this error:

1019×216 5.53 KB

Appreciate the help!

7

@anenga try

$w("#text3").html =`<p style='word-spacing:4px;filter:text-shadow(1px 1px 5px #000000)'>` + ​​​​​​​​​$w("#text3").text + `</p>`;
8

Answered this on SO a while ago: css - How To Add Drop Shadow in Wix Editor X - Stack Overflow