7

Seen discussions here but it has been 2 years!

I don't know if I'm using this right but I have the following sass/compass code:

+text-shadow(red 0 3px 0 3px)

Generating the following css:

text-shadow: red 0 3px 3px, red 0 3px 0 3px;
text-shadow: red 0 3px 0 3px, red 0 3px 0 3px;

Which not works in neither Chrome/Safari/Firefox/Opera.

Is this something with the declaration or this spread feature was really removed from specs?

Community
  • 1
  • 1
Alvaro Lourenço
  • 1,321
  • 1
  • 10
  • 21
  • i really have no idea why the compass code generates the value x4 but the right syntax is "text-shadow: 1px 1px 0px #fff;" with the color on end and no comma-separated duplicating – john Smith Jan 05 '13 at 20:40

3 Answers3

12

It's not ideal, but since text-shadow accepts a comma separated list of values, you can "stack" text-shadows on top of each other to get a more opaque outcome.

text-shadow: 0 0 1px white, 0 0 2px white, 0 0 3px white;
Andy Ford
  • 8,410
  • 3
  • 26
  • 36
9

It says in the specs that,

This property accepts a comma-separated list of shadow effects to be applied to the text of the element. Values are interpreted as for ‘box-shadow’ [CSS3BG]. (But note that spread values are not allowed.) The shadow is applied to all of the element's text as well as any text decorations it specifies.

Pranav 웃
  • 8,469
  • 6
  • 38
  • 48
  • 1
    The spread value can be specified by using the mixin: `single-text-shadow` instead. – Rubens Mariuzzo Jan 05 '13 at 20:49
  • 2
    Yes, single-text-shadow accepts spread value, but unfortunately browsers won't render it, unless not anymore. I don't remember if browsers ever rendered it, by the way. Stills the question: Why compass has it in documentation? – Alvaro Lourenço Jan 05 '13 at 22:49
-1

Compass doesn't allow to set the spread value when using the mixin: text-shadow as they said in their documentation:

if any shadow has a spread parameter, this will cause the mixin to emit the shadow declaration twice, first without the spread, then with the spread included. This allows you to progressively enhance the browsers that do support the spread parameter.

Alternatively, you can use the mixin: single-text-shadow then pass all the values including the spread value separated with commas.

single-text-shadow(0, 3px, 0, 3px, red);

That will work as you expected.

Rubens Mariuzzo
  • 28,358
  • 27
  • 121
  • 148
  • This is not working either. Just tried with last `compass-rails` and Chrome 23.0.1271.101. It generates 2 lines of `css` code. 1st) `text-shadow: 0 3px 0 red, 0 3px 0 3px red;` ... and 2nd `text-shadow: 0 3px 0 3px red, 0 3px 0 3px red;`. All 4 parameters are on compiled declarations. Maybe is this a spec issue? – Alvaro Lourenço Jan 05 '13 at 20:49