CODEWITHSUNDEEP
htmlcss
Andyf4
Andyf4

Reputation: 15

Why won't text shadow show on this button?

I have a button being used in an overlay. I can't see why the text shadow won't display on the "find out more" text within the button.

HTML:

 <a href="http://www.mysite.co.uk/promotions/cashback.htm" class="apply">Find out more<img src="img/glyphicons-224-chevron-right.png" class="chevronr" alt="some_text"></a>

CSS:

.apply {
  display: inline-block;
  background: linear-gradient(#98e901 ,#5ba119);
  vertical-align: middle;
  box-shadow: 0 4px 0 rgba(69,69,69,.11);
  text-align: center;
  text-shadow: 0, 4, 4, 0;
  border-radius: 4px;
  padding-top: 8px;
  padding-right: 42px;
  padding-bottom: 8px;
  padding-left: 42px;
  color: #fff;
  font-family: Raleway, arial, helvetica, sans-serif;
  font-weight: 800;
  font-size: 28px;
  line-height: 50px;
  margin-bottom: 30px;
  letter-spacing: -1px;
}

I can't see anything in my styling that would conflict but when testing the browser isn't rendering the text shadow?

Upvotes: 1

Views: 3341

Answers (4)

jbutler483
jbutler483

Reputation: 24559

You have used 

text-shadow: 0, 4, 4, 0;

Which, unfortunately, has a few things wrong with it.

The Text-shadow property takes the values of

Value: none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit

This property accepts a comma-separated list of shadow effects to be applied to the text of the element. The shadow effects are applied in the order specified and may thus overlay each other, but they will never overlay the text itself. ~ w3.org

This means that it takes only three values, and not four.

You are also missing units for your declaration (I have used px for this demo).

text-shadow: 3px 3px 5px red;

is a valid declaration.

where it will

place a shadow to the right and below the element's text. The shadow will have a 5px blur radius and will be red.

Upvotes: 1

Shaggy
Shaggy

Reputation: 6796

Your text-shadow property is invalid. With 4 properties, it should be of the format offset-x offset-y blur-radius color or color offset-x offset-y blur-radius. Note the use of space separators rather than the comma separators - commas are used to separate multiple shadows.

To rewrite the example provided in your question, making assumptions about the intent, it would be:

text-shadow: 0 4px 4px #000;

More information on text-shadow

Upvotes: 2

cssGEEK
cssGEEK

Reputation: 1014

Text-shadow is used usuall with px formatted numbers so 

text-shadow: 0, 4, 4, 0;

must be 

 text-shadow: 0px  4px 4px ;

Upvotes: 0

G.L.P
G.L.P

Reputation: 7217

Try like this: Demo 1

 text-shadow: 2px 2px 2px #000;

or like this: Demo 2

text-shadow: 0px 4px rgba(0, 4, 4, 0.4);

Upvotes: 1

Related Questions