Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to outline text in HTML / CSS

Tags:

html

css

Let's say I have white characters and I want a black outline over each character (this is different from outlining the whole text box).

What is the code to make this outline ?

EDIT: Well bummer, I'm not asking for a whole document. All I want is the one line of code and the needed parameters to create an outline for text. I don't feel the need to post code as it is really just a simply request.

I have tried using text-outline: 2px 2px #ff0000; but this is not supported across any major browsers.

Scope :

function createTitleLegend() {     legendTitle = document.createElement('div');     legendTitle.id = 'legendT';     contentTitle = [];     contentTitle.push('<h3><font size="16">TM</font></h3>');     contentTitle.push('<p class="test"><br><font size="6" color=#000000>We have <b><font size="7" color="white" text-outline: 2px 2px #FF0000;>21421</font></b></font></p>');     legendTitle.innerHTML = contentTitle.join('');       legendTitle.index = 1; } 

I have tried using outline within the font, as well as a class and div. None works. The bruteforce approach doesn't seem to work either.

Yet another EDIT:

This is the key line where I want the outline.

contentTitle.push('<p class="test"><br><font size="6" color=#000000>We have <b><font size="7" color="white">21421</font></b> asdasd</font></p>'); 

Before I apply the outline, the string is written in one line. After I apply the outline, we have 3 different lines of text.

contentTitle is a legend in a Google Maps where the text align is at the center. That sentence that is being pushed uses two different type of fonts, one for the words and one for the number. In the event that I apply a text shadow with a div, that creates a new line. I know the normal solution for keeping everything in the same line is the use of float. However if I float, nothing is centered anymore.

Maybe I'm not floating correctly, but I've tried both div style=float and class="float" thus far.

like image 696
krikara Avatar asked Jul 04 '12 06:07

krikara


People also ask

Can I outline text in HTML?

The two methods you can use to create an HTML text outline are shown in the following list: Using the CSS outline property. Using the CSS -webkit-text-stroke property.

How do you outline a text box in HTML?

You can use the CSS border property to add a border around your HTML textboxes. You can also use border-width , border-style , and border-color , but the border property covers all of these anyway.


2 Answers

from: Outline effect to text

.strokeme {     color: white;     text-shadow:     -1px -1px 0 #000,     1px -1px 0 #000,     -1px 1px 0 #000,     1px 1px 0 #000;   } 
like image 131
niico Avatar answered Sep 23 '22 23:09

niico


Try CSS3 Textshadow.

.box_textshadow {      text-shadow: 2px 2px 0px #FF0000; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */ } 

Try it yourself on css3please.com.

like image 31
algi Avatar answered Sep 20 '22 23:09

algi