CODEWITHSUNDEEP
htmlcssbordereffect
Trung Vu Huu
Trung Vu Huu

Reputation: 1

How to create this text effect with css3?

[Help me please, how to create this effect with css3][1] I've tried many create tools to make this effect but it's don't work

you can view my picture in this link, I'm noob, I don't know how to attach picture here : https://ibb.co/kn1aKa

here is codes in CSS file

@font-face { font-family: 'UTM Cookies'; font-style: normal; font-weight: 400; src: local('UTM Cookies'), local('UTM Cookies'), url(../fonts/UTM-Cookies_0.woff) format('woff');

}

.headline-wrap h1 { font-size: 20px; text-transform: uppercase; margin: 0px 0px 15px 0px; color: #000; font-family: UTM Cookies; padding: 6px 0px 6px 0px; color: #FF972F; text-align: center; }
<div class="headline-wrap">
  <h1>Some Text</h1>
</div>

Upvotes: 0

Views: 74

Answers (1)

Chava Geldzahler
Chava Geldzahler

Reputation: 3730

What you are looking for is the CSS3 text-shadow property, and you would need to apply it several times to get it all around the text.

The text shadow property takes values for the x-offset, y-offset, blur-radius, and color.

          /* offset-x | offset-y | blur-radius | color */
text-shadow: 1px        1px        2px           white;

It does not take a value for the spread, but you can apply multiple shadows with different offsets as a comma-separated list to achieve the desired effect.

text-shadow: 2px 2px white, -2px -2px white, 2px -2px white, -2px 2px white;


@font-face { font-family: 'UTM Cookies'; font-style: normal; font-weight: 400; src: local('UTM Cookies'), local('UTM Cookies'), url(../fonts/UTM-Cookies_0.woff) format('woff');
}

.headline-wrap {
  background-color: lightblue;
}

.headline-wrap h1 { font-size: 20px; text-transform: uppercase; margin: 0px 0px 15px 0px; color: #000; font-family: UTM Cookies; padding: 6px 0px 6px 0px; color: #FF972F; text-align: center; 
  font-weight: bolder;
  text-shadow: 2px 2px white, -2px -2px white, 2px -2px white, -2px 2px white;
}
<div class="headline-wrap">
  <h1>Some text</h1>
</div>

Upvotes: 2

Related Questions