How to make "custom" background for a word? (how the image shows)

Asked

Viewed 124 times

0

How to do this kind of background effect, as shown in the image below? If possible using CSS.

inserir a descrição da imagem aqui

I want it to look like the image. I did it with the text-shadow (http://jsfiddle.net/9N94B/) but it didn’t turn out well I think.

jquery html css css3

  • I gave my answer but from what I saw in your edition, you already knew the way. That’s right. Now you have to model the style to stay in the desired colors and proportions!

  • The most I could do was this: http://jsfiddle.net/dieegov/9N94B/2/ (I had to use an attribute in order to retrieve it in css)

  • @Jeffesonalison, I believe that use an image (GIF or PNG) in the background with repetition x to get this result, if possible, could post the link from where this text was taken?

  • Okay @Diegovieira, I’ve thought about it. But if you use an image there are some places that won’t be cool like, when you have the accent, you may notice that the background "goes up". The link is not yet available, I’m mounting the layout for now. I like the way you did with the shadow in the previous comment.

  • 1

    Already tried to combine several shading increasing the Blur gradually? Example: text-shadow: 0 0 5px #BAD042, 0 0 10px #BAD042, 0 0 15px #BAD042, 0 0 20px #BAD042, 0 0 25px #BAD042, 0 0 30px #BAD042; Fiddle: http://jsfiddle.net/9N94B/5/

1 answer

1

Use CSS3 Text Shadow:

<style>
.sombra {
    text-shadow: 1px 2px 3px #666;
}
</style>
<p class=sombra>Teste</p>

Browser other questions tagged jquery html css css3

You are not signed in. Login or sign up in order to post.