Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

outline text

Status
Not open for further replies.
richcleverley

richcleverley

MIS
Jul 28, 2005
358
FR
Hi all,

Is it possible to have my text outlined (like applying a 1px stroke in photoshop) using css? This would need to work in all browsers, if not I gues I'll just have to use an image.

Thanks,

Rich
 
Sort by date Sort by votes
Absolutely :
Code: 
<span style="border: 1px solid red;">I have an outline!!</span>

It might get a little tricky if you have a block of text which wraps, but it's all basically like this.

--
-- Ghodmode
 
Upvote 0 Downvote
Not quite what I meant. I want each letter to be have a border that flows around the content of the letter.

Thanks anyway

Rich
 
Upvote 0 Downvote
You have an option rich, however it's a limited option. This will only work in IE, as filters are not supported by other browsers. Additionally after playing around with it a little bit, I could only get it to work if I declared an explicit width on the element. So, it's not a whole lot to work with, but it gives you something:

Code: 
<html>
<head>
<style type="text/css">

div {
   color:#ffffff;
   font-size:30pt;
   Filter: Glow(Color=#ff0000, Strength=1);
   width:100px;
}

</style>
</head>
<body>

<div>
This text should have a red outline
</div>

</body>
</html>

Here's a page that gives reference to IE's filter options:


-kaht

[small] <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
[banghead] [small](He's back)[/small]
 
Upvote 0 Downvote
I've not tested this, but you might find that you can replace "width:100px;" with "zoom:1;" to "give the element layout" (I hate that phrase every time I read it on the MS site)

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Sorry - really wish I could edit my own post! Then you could pick a font to use with the above technique that shows visually what you'd like to accomplish. I don't think it wrap though.
 
Upvote 0 Downvote
Hmm, The filter option pretty much what I wanted to do, (a bit ugly though). Shame it doesn't work on other browsers though.

Not too sure about the dynatext method, I'll have to look at it a bit more closely.

I only really want this for headers on some boxes (that hold a small form) so may just use image instead.

Thanks guys, gave me some new ideas for various other things. Hadn't ever heard of the Filter methods in IE before so it's always useful to find out about these things.

Rich
 
Upvote 0 Downvote
That is less like stroke and more like drop shadow.

-kaht

[small] <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
[banghead] [small](He's back)[/small]
 
Upvote 0 Downvote
True, I want a stroke more than a drop shadow really, just trying out different things to see if they work.

Gues what, It looked pretty awful at smaller font sizes!

Richard
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
138
jjgupta915
jjgupta915
coldbohemia
  • Locked
  • Question
I'm inserting a text file into a we
Replies
2
Views
106
coldbohemia
coldbohemia
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
131
ChrisHirst
ChrisHirst
AzizKamal
  • Locked
  • Question
center-align menu item text 1
Replies
8
Views
186
vacunita
vacunita
1DMF
  • Locked
  • Question
semantically replacing unordered list (UL) free text 1
Replies
9
Views
95
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top