Gareth Compton Gareth Compton - 1 year ago 85
CSS Question

Embrossed Letterign style

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

{edited: What I meant was, instead of web-kit (after testing) didn't show the accurate result. When trying the Web-kit shadow tool, was a bit disapointed that it completely doesnt cover the letters like it normally do with cornered "outset" and "inset" bordering styles from CSS. What kind of CSS scripting that allows the border to cover all the parameter of the letter (like an offset) with shadows and shined areas as described by the picture.}

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download