2

I use Binner Di Regular font. Here are two example images. The first one shows an original Binner Di Regular font. The second one show the same font with Photoshop effects. So is it possible to get such an effect using CSS only? Or how can I get such a text other way then CSS?

Original Binner Di Regular:

enter image description here

Binner Di Regular with Photoshop effects:

enter image description here

J Sargent
  • 227
  • 3
  • 9
Green
  • 28,742
  • 61
  • 158
  • 247
  • 2
    you mean a [text shadow](http://caniuse.com/#feat=css-textshadow)? – jbutler483 Feb 03 '15 at 16:11
  • 1
    Maybe can be possible . but have you tried something? Search about text-shadow. or Pseudo-elements – DaniP Feb 03 '15 at 16:11
  • In future the (currently unsupported) `text-outline: 2px 2px #ff0000;` attribute could be invaluable. – J Sargent Feb 03 '15 at 16:13
  • 1
    You could also try [**this trick**](http://css-tricks.com/adding-stroke-to-web-text/) – J Sargent Feb 03 '15 at 16:14
  • http://stackoverflow.com/questions/11737168/how-to-embed-fonts-in-css – gvee Feb 03 '15 at 16:14
  • you might be able to achieve this effect with the tips from [http://stackoverflow.com/questions/2889501/inner-text-shadow-with-css][1] [1]: http://stackoverflow.com/questions/2889501/inner-text-shadow-with-css – Perry Lucas Feb 03 '15 at 16:15
  • 2
    You can combine different box-shadow layers in one style, so you can achieve different coloring. It's done like `text-shadow: properties, properties`. –  Feb 03 '15 at 16:16

4 Answers4

3

enter image description here

You can use the text-shadow CSS property 

div {
font-weight: bolder;
font-size: 100px;
letter-spacing: 6px;
text-align: center;
padding-top: 20px;
text-shadow: 2px 0px 0 #ccc, -2px 0 0 #ccc,3px 2px 0 #ccc,-2px -2px 0 #ccc,3px -2px 0 #ccc, 0px 2px #ccc, -2px 2px #ccc,3px 0px 0 #ccc,0 0 8px #000;
}
<div>1234 567</div>
Gildas.Tambo
  • 22,173
  • 7
  • 50
  • 78
3

Webkit-only Solution

Example

In Webkit-based browsers we can make use of the -webkit-text-stroke and -webkit-fill-color properties alongside text-shadow.

This works in Chrome, Safari, Opera, iOS Safari, Android Browser and Chrome for Android (Can I Use...).

span {
  background: #D4D9D8;
  color: #3D463F;
  display: inline-block;
  font-size: 64px;
  font-weight: 900;
  padding: 20px;
  
  text-shadow: 0 0 5px #333;
  -webkit-fill-color: #3D463F;
  -webkit-text-stroke: 1px white;
}
<span>1234 567</span>
Community
  • 1
  • 1
James Donnelly
  • 126,410
  • 34
  • 208
  • 218
3

You can use text-shadow in this way : 

    p{
      font-size:50px;
      text-shadow: 1px 1px 0px #fff,
        1px -1px 0px #fff,
        -1px -1px 0px #fff,
        -1px 1px 0px #fff,
        1px 1px 3px #000;
      background:grey;
      font-family: sans-serif;
      padding: 2em;
      }
    <p>Text sample</p>

By adding multiples shadow, you can emulate a border on the text and adding a real shadow.

tomtomtom
  • 829
  • 1
  • 8
  • 20
2

This is mostly possible through use of the text-shadow property

@import url(http://fonts.googleapis.com/css?family=Montserrat);

html,body{
  font-family: 'Montserrat', sans-serif;
  font-size:50px;
  text-shadow: 
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;
  background:black;
  }
hi. I'm not even in a div 1234567890

Webkit browsers

If you're only targeting webkit browsers, then you could make use of the -webkit-text-stroke- property.

jbutler483
  • 24,074
  • 9
  • 92
  • 145
  • 1
    That doesn't really resemble the image in the question, does it? You may want to update the offsets of the text shadow. – David Thomas Feb 03 '15 at 16:17