Embrossed Letterign style

Question

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.}

If you can edit (and post) an image of how you want an example text to look people will be able to give you more help. It is hard to tell whether it is possible if we do not know what you're looking for. — grochmal, May 28 '16 at 01:55

score 0 · Accepted Answer · answered May 28 '16 at 01:59

0

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

answered May 28 '16 at 01:59

aardrian

8,581
30
40

thats what i was after, the way the outset/inset worked, i didn't really knew it was the same – Gareth Compton May 28 '16 at 02:10
Cool. If it works for you, an accept is much appreciated. – aardrian May 28 '16 at 02:16
can't bump your answer up though. ty though for the help! – Gareth Compton May 28 '16 at 02:17
You accept by hitting the checkmark below arrows. I don't think there is a rep minimum as it is your question. – aardrian May 28 '16 at 02:32
i did find a problem. If i wanted to make it thicker, it will go top left the bottom right, not full around. – Gareth Compton May 28 '16 at 12:10
was aiming for the Embross kind of lettering. – Gareth Compton May 28 '16 at 12:12
Correct. That is a limitation of this technique. – aardrian May 28 '16 at 12:13
but for now, nothing is made for the embrossary lettering technique yet. It appeard to work with the 1px though. ty for your hard work! – Gareth Compton May 28 '16 at 12:34
Happy to help. You can pay it back with an upvote or answer accept. – aardrian May 28 '16 at 12:39
that works, i can accept but cant upvote til im 15 rep... – Gareth Compton May 28 '16 at 13:19
Keen. Thanks much! – aardrian May 28 '16 at 16:43

CoolLife · Answer 2 · 2016-05-28T04:34:23.870

you need understand this I recommend this page web for you can study more about it and I leave 1 example of this:

web page

here is the example:

.back {
 background-color: black; 
}
.enjoy-css {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  border: none;
  font: normal 72px/normal "Passero One", Helvetica, sans-serif;
  color: rgba(255,255,255,1);
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  text-shadow: -3px -5px 0 rgb(170,170,170) , -3px -4px 0 rgb(185,185,185) , -3px -3px 0 rgb(187,187,187) , -3px -2px 0 rgb(201,201,201) , -3px -1px 0 rgb(204,204,204) , 3px 1px 0 rgb(204,204,204) , 3px 2px 0 rgb(201,201,201) , 3px 3px 0 rgb(187,187,187) , 3px 4px 0 rgb(185,185,185) , 3px 5px 0 rgb(170,170,170) ;
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
}

.enjoy-css:hover {
  color: rgba(169,214,169,1);
  text-shadow: -3px -5px 0 rgba(255,255,255,1) , -1px -3px 0 rgba(255,255,255,1) , -2px -3px 0 rgba(255,255,255,1) , -3px -2px 0 rgba(255,255,255,1) , -3px -1px 0 rgba(255,255,255,1) , 3px 1px 0 rgba(255,255,255,1) , 3px 2px 0 rgba(255,255,255,1) , 3px 3px 0 rgba(255,255,255,1) , 3px 4px 0 rgba(255,255,255,1) , 3px 5px 0 rgba(255,255,255,1) ;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}

<body class="back">
<div class="enjoy-css">3D effect</div>
<link async href="http://fonts.googleapis.com/css?family=Passero%20One" data-generated="http://enjoycss.com" rel="stylesheet" type="text/css"/>
</body>

/

Very nice 3D visual and looks great, but I am still seeking a border that surrounds all sides, like a border that surrounds all sides and was hoping i find where it surrounds all sides by the letter. — Gareth Compton, May 28 '16 at 03:52
Well I try something different is not the expected result, because need add more shadows and colors is just be changing this in a good css editor, it's complicated. — CoolLife, May 28 '16 at 04:37

Embrossed Letterign style

2 Answers2