Gareth Compton Gareth Compton - 4 months ago 6x
CSS Question

Border style lettering (Specifically Embosery type lettering)

I know in all cases that the border attribute in CSS covers, of course the borders of the HTML attributes. But my main question is:

For a border like this:

.blah-border {
border: #333 outset 5px;

be turned into embossed lettering?

Is there a way to make embossed lettering instead of the use of text-shadow? Or if it is by use of tex-t shadow, how can it be wrapped on all sides of the letter?

shade and shine bordering


It sounds like you want text-shadow:

text-shadow: 1px 1px 1px #fff, -1px -1px 1px #000;
color: [background color of the container]

Basically you set a 1px shadow offset up and left one pixel, and then another offset down and right one pixel, with a colors that give you an inset or outset effect. This doesn't work so well on a textured background as the text itself needs to be the same color as the background (transaprent lets the shadows show through).

CodePen demo