• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1264
  • Last Modified:

Outline Text on Webpage

What i'd like to do is to decorate some text with an outline, in the same way you can put a border around a table i'd like to put an outline on the text.
0
shaun_hester
Asked:
shaun_hester
  • 2
  • 2
  • 2
1 Solution
 
glcumminsCommented:
You can use CSS to add a border around an element, like this:
<p style="border: 1px solid blue">Your text here</p>

Open in new window

0
 
shaun_hesterAuthor Commented:
Sorry perhaps i did clearly state what i meant, i don't what a border around the text area, i what the text itself to be outlined. Just like an underline or strikethrough can be applied to the text.
0
 
glcumminsCommented:
I don't know of any way to outline text itself. Borders can be added to nearly any element (p, span, a, input, etc), but not to the text. You can place your text in any of those elements, and add the border as needed.

For more information, please see:

http://www.w3schools.com/css/css_border.asp
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
VallerianiCommented:
I do not think there is any 'easy' way to make text glow like you want it too.

This however works in IE browsers, but not in firefox since it is not supported yet:

<span style="FILTER: Glow(Color=#ff0000, Strength=6); width:200px;font-size:20pt;">*Text Here*</span>

I think for glowing text that is multibrowser, you are out of luck until CSS3 is on all browsers.

However, you can take a look at http://www.designdetector.com/demos/cross-browser-text-glow-demo.html

That does work on most browsers, however, it is very dirty to manipulate. I'll provide the source for that page, but it is 'not' my doing, some guy created it at designdetector.com :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Cross-Browser Text Glow Demo</title>
<!-- see link below for details
 
http://www.designdetector.com/2005/10/cross-browser-text-glow-demo.php
 
-->
 
<style type="text/css">
* {
font-family:Arial,Helvetica,sans-serif;
font-size:16px;
}
div {
	position:absolute;
	top:20px;
	left:20px;
	padding:0;
	color:#000;
	z-index:3;
}
#d2, #d3, #d4, #d5, #d6, #d7 {color:#fd6;}
#d8, #d9, #d10, #d11, #d12, #d13 {color:#ffa;}
 
.top {color:#fff;}
 
#d2 {
	top:19px;
	left:19px;
	z-index:2;
}
#d3 {
	top:21px;
	left:21px;
	z-index:2;
}
#d4 {
	top:19px;
	left:21px;
	z-index:2;
}
#d5 {
	top:21px;
	left:19px;
	z-index:2;
}
#d6 {
	top:19px;
	z-index:2;
}
#d7 {
	top:21px;
	z-index:2;
}
 
 
#d8 {
	top:18px;
	left:18px;
	z-index:1;
}
#d9 {
	top:22px;
	left:22px;
	z-index:1;
}
#d10 {
	top:18px;
	left:22px;
	z-index:1;
}
#d11 {
	top:22px;
	left:18px;
	z-index:1;
}
#d12 {
	top:18px;
	z-index:1;
}
#d13 {
	top:22px;
	z-index:1;
}
</style>
</head>
 
<body>
 
<div id="d1"><b>Cross-Browser Text Glow Demo</b> <br /><br /><i>By Chris Hester</i><br /><br />Released 27 October 2005<br /><br /><span class="top">Updated 27 October 2005</span></div>
<div id="d2"><b>Cross-Browser Text Glow Demo</b> <br /><br /><i>By Chris Hester</i><br /><br />Released 27 October 2005<br /><br /><span>Updated 27 October 2005</span></div>
<div id="d3"><b>Cross-Browser Text Glow Demo</b> <br /><br /><i>By Chris Hester</i><br /><br />Released 27 October 2005<br /><br /><span>Updated 27 October 2005</span></div>
<div id="d4"><b>Cross-Browser Text Glow Demo</b> <br /><br /><i>By Chris Hester</i><br /><br />Released 27 October 2005<br /><br /><span>Updated 27 October 2005</span></div>
<div id="d5"><b>Cross-Browser Text Glow Demo</b> <br /><br /><i>By Chris Hester</i><br /><br />Released 27 October 2005<br /><br /><span>Updated 27 October 2005</span></div>
<div id="d6"><b>Cross-Browser Text Glow Demo</b> <br /><br /><i>By Chris Hester</i><br /><br />Released 27 October 2005<br /><br /><span>Updated 27 October 2005</span></div>
<div id="d7"><b>Cross-Browser Text Glow Demo</b> <br /><br /><i>By Chris Hester</i><br /><br />Released 27 October 2005<br /><br /><span>Updated 27 October 2005</span></div>
 
<div id="d8"><b>Cross-Browser Text Glow Demo</b> <br /><br /><i>By Chris Hester</i><br /><br />Released 27 October 2005<br /><br /><span>Updated 27 October 2005</span></div>
<div id="d9"><b>Cross-Browser Text Glow Demo</b> <br /><br /><i>By Chris Hester</i><br /><br />Released 27 October 2005<br /><br /><span>Updated 27 October 2005</span></div>
<div id="d10"><b>Cross-Browser Text Glow Demo</b> <br /><br /><i>By Chris Hester</i><br /><br />Released 27 October 2005<br /><br /><span>Updated 27 October 2005</span></div>
<div id="d11"><b>Cross-Browser Text Glow Demo</b> <br /><br /><i>By Chris Hester</i><br /><br />Released 27 October 2005<br /><br /><span>Updated 27 October 2005</span></div>
<div id="d12"><b>Cross-Browser Text Glow Demo</b> <br /><br /><i>By Chris Hester</i><br /><br />Released 27 October 2005<br /><br /><span>Updated 27 October 2005</span></div>
<div id="d13"><b>Cross-Browser Text Glow Demo</b> <br /><br /><i>By Chris Hester</i><br /><br />Released 27 October 2005<br /><br /><span>Updated 27 October 2005</span></div>
 
</body>
</html>

Open in new window

0
 
shaun_hesterAuthor Commented:
You can add a border to the text area using css. but a border is not what i'm looking for, i what the text OUTLINED
0
 
VallerianiCommented:
As you can see here, how they do it is by overlapping words over words over words. It makes a 'glow' effect. Some are midly easy though, but yeah, you'd need to define the text more then once. It makes pages DIRTY.
0

Featured Post

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 2
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now