CODEWITHSUNDEEP
htmlcss
Sanjeev Kumar
Sanjeev Kumar

Reputation: 3163

Text Shadow CSS not working properly

I am trying to make the text shadow effect as per the example below:

text shadow

This is what I have created:

.yb-shipping {
  color: #f2de4d;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 22px;
  font-weight: bold;
  text-shadow: 0 0 2px rgba(1, 96, 116, 1);
  text-transform: uppercase;
}
<div class="yb-shipping">Free Shipping</div>

Not able to make as attached, should I try something else except text-shadow?

Please suggest

Upvotes: 4

Views: 12777

Answers (5)

bxorcloud
bxorcloud

Reputation: 689

This generator can help you make text shadow more accureate. http://css3gen.com/text-shadow/ and http://www.css3generator.in/text-shadow.html The codes can be copy and paste directly.

Upvotes: 0

Mr Lister
Mr Lister

Reputation: 46539

If you use a blur radius, the shadow will be blurred, and that's not the intended result.
You can, however, use multiple text-shadows. So that's the solution: add several of them, all with a blur radius of 0, in different directions.

.yb-shipping {
  color: #f2de4d;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 22px;
  font-weight: bold;
  text-shadow: -2px -2px 0 rgba(1, 96, 116, 1),
               2px -2px 0 rgba(1, 96, 116, 1),
               -2px 2px 0 rgba(1, 96, 116, 1),
               2px 2px 0 rgba(1, 96, 116, 1),
               -3px 0 0 rgba(1, 96, 116, 1),
               3px 0 0 rgba(1, 96, 116, 1),
               0 -3px 0 rgba(1, 96, 116, 1),
               0 3px 0 rgba(1, 96, 116, 1);
  text-transform: uppercase;
}
<div class="yb-shipping">Free Shipping</div>

Upvotes: 8

Asons
Asons

Reputation: 87191

You can combine many shadows

.yb-shipping {
  color: #f2de4d;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 22px;
  font-weight: bold;
  text-shadow: 
    2px 2px 2px rgba(1, 96, 116, 1),
    -2px 2px 2px rgba(1, 96, 116, 1),
    2px -2px 2px rgba(1, 96, 116, 1),
    -2px -2px 2px rgba(1, 96, 116, 1);
  text-transform: uppercase;
}
<div class="yb-shipping">Free Shipping</div>

Upvotes: 3

Tony Hensler
Tony Hensler

Reputation: 1492

Please see the following:-

https://jsfiddle.net/enryhfz3/

If you change you text-shadow to :-

text-shadow:
    -1px -1px 5px rgba(1, 96, 116, 1),  
    1px -1px 5px rgba(1, 96, 116, 1),
    -1px 1px 5px rgba(1, 96, 116, 1),
    1px 1px 5px rgba(1, 96, 116, 1);

Upvotes: 1

Saeed
Saeed

Reputation: 572

you can use -webkit-text-stroke as below:

.yb-shipping {
  color: #f2de4d;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 22px;
  font-weight: bold;
  -webkit-text-stroke: 2px rgba(1, 96, 116, 1);
  text-transform: uppercase;
}

Upvotes: 1

Related Questions