Outline Effect to Text

Outline effect to text

There is an experimental webkit property called text-stroke in CSS3, I've been trying to get this to work for some time but have been unsuccessful so far.

What I have done instead is used the already supported text-shadow property (supported in Chrome, Firefox, Opera, and IE 9 I believe).

Use four shadows to simulate a stroked text:

.strokeme {  color: white;  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;}
<div class="strokeme">  This text should have a stroke in some browsers</div>

How to get an outline effect on text in SVG?

Yes it can ;-)

I tried to realize that with Inkscape and then edited the source of the svg-File.
Just don't fill it and use a stroke with color and width to draw it.
I got that:

<text x="100" y="100" id="text2383" xml:space="preserve" style="font-size:56px;font-style:normal;font-weight:normal;fill:none;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream Vera Sans"><tspan x="100" y="100" id="tspan2385">D</tspan></text>

Outline effect to text in Arabic using CSS

Stack many text-shadow having 1px of blur to simulate a solid stroke. The more shadow you add the more you get close to a solid visual

body {
background-color: pink;
}

h1 {
color: white;
text-align: center;
text-shadow:
0 0 1px #000,
0 0 1px #000,
0 0 1px #000,
0 0 1px #000,
0 0 1px #000,
0 0 1px #000,
0 0 1px #000,
0 0 1px #000,
0 0 1px #000,
0 0 1px #000,
0 0 1px #000,
0 0 1px #000,
0 0 1px #000;
}
<h1>Experiment</h1>
<h1>تجربة</h1>

Font outline using only CSS

One way to do that is to use text-shadow and overlap multiple shadows:

.introText {
text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
}

4 times in this case.

Example:

.introText {        font-family: "Nunito", sans-serif;        text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;         color: white;        font-size: 50px;        margin-top: 20vh;      }
    <h1 class="introText text-center">We've got your perfect spot.</h1>

CSS - Is it possible to add a black outline around each character in text?

You can simulate it with the CSS 2.1 text-shadow property:

p {
color: #fff;
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}

This is, of course, not supported in IE9 and below. See: http://www.jsfiddle.net/yijiang/UCjgg/ for a simple demo.



Related Topics



Leave a reply



Submit