CODEWITHSUNDEEP
csstypography
user1757120
user1757120

Reputation: 329

How do you create white inset text?

Creating dark inset text is simple. You just write the same word twice (using text-shadow in this case) but the second time you write it drop it down and to the right a little bit and write it in a lighter color with some opacity. Easy once you figure it out.

The problem I am having is with white inset text. There is no color whiter than white so there is no way to create the illusion of more light being at the top than down inside the inset character. The best I can come up with is white outset text but I want white inset text.

.dark {
    color:rgba(0, 0, 0, .6);
    text-shadow:2px 2px rgba(255, 255, 255, .1);
}
.light {
    color:rgba(200, 200, 200, 1);
    text-shadow:2px 2px rgba(0, 0, 0, .2);
}

​

fiddle

enter image description here

Found an answer on IRC fiddle the light is hitting from the top left so it looks darker where the tl z axis would be

Upvotes: 1

Views: 1949

Answers (2)

Josh
Josh

Reputation: 276

You just have to try different combinations. I have also used multiple text-shadows to do inset text styles.

I prefer just doing this for your light style:

text-shadow:1px -1px rgba(0, 0, 0, .2);

Upvotes: 2

freejosh
freejosh

Reputation: 11383

Position the dark text shadow on the opposite side of the light text shadow:

text-shadow: -2px -2px rgba(0, 0, 0, .2);

Upvotes: 0

Related Questions