Photoshop Question posted in
The official user guide can be found here.

Is it possible to get an outlined text effect using CSS? – Photoshop

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

Tags:

4

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
  4. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search