Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Outline Text on Webpage

Posted on 2008-11-03
6
1,257 Views
Last Modified: 2012-05-05
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
Comment
Question by:shaun_hester
  • 2
  • 2
  • 2
6 Comments
 
LVL 24

Expert Comment

by:glcummins
ID: 22866972
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
 

Author Comment

by:shaun_hester
ID: 22867040
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
 
LVL 24

Expert Comment

by:glcummins
ID: 22867118
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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 7

Accepted Solution

by:
Valleriani earned 125 total points
ID: 22867177
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
 

Author Comment

by:shaun_hester
ID: 22867184
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
 
LVL 7

Expert Comment

by:Valleriani
ID: 22867199
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question