?
Solved

decorate text

Posted on 2006-05-30
14
Medium Priority
?
475 Views
Last Modified: 2008-02-01
hi

is there a way to decorate text using css?

i dont just mean underline and overline.

i am looking to add a small black line that flows around the letters of some white text.

0
Comment
Question by:naifyboy123
  • 6
  • 4
  • 2
  • +1
14 Comments
 
LVL 49

Expert Comment

by:Roonaan
ID: 16789133
<span style="text-decoration:underline;">underlined text</span>

<span style="text-decoration:overline;">overlined text</span>

<span style="text-decoration:line-through;">strikethrough text</span>

-r-
0
 

Author Comment

by:naifyboy123
ID: 16789180
hi roonan

that's not what i mean.

i meant to decorate text as per http://www.flowersdelivereduk.com/image.html

you will notice the green background - but the white text has a small black line going round it like a border.

0
 
LVL 49

Expert Comment

by:Roonaan
ID: 16789193
For internet explorer you might be able to use different filters.
However for this kind of things, you'd better just use a graphic.

-r-
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:naifyboy123
ID: 16789222
thanks roonan  -  i was afraid that would be the anwser.

the text i want to change is pulled from a db, so i can produce a grpahic.

will leave the Q open for a couple of days to see if anyone else can help.

thanks for help......
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16789454
That will be possible with CSS3:  http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows
For the time beeing you should use graphics.

There is a trick that consists of using several different overlapping layers that contain the same text and use some offsets to give the illusion of a border, but that's not recommended because it requires artificial duplicate content.
In case you want to do that, using non-obscursive javascript to duplicate your text is the best option.
0
 

Author Comment

by:naifyboy123
ID: 16789500
thanks - do we have to wait for people to update their browsers before css3 will work? or when will it be available?
0
 
LVL 8

Accepted Solution

by:
radnor earned 2000 total points
ID: 16789557
As GrandSchtroumph said, this will get the illusion of a shadow, but does dupr the text....

I've used it on a site there page titles needed the shadow and where I did not want "another" graphic file...

<html>
<head>
<title>test</title>
<style>
.white {
      position: absolute;
      top:2px;
      left:2px;
      color:white;
      font-size: 20px;
}
.black {
      position: absolute;
      top:0px;
      left:0px;
      color: black;
      font-size:20px;
}
</style>
</head>
<body bgcolor="green">
<span class="black">Occasion Flowers</span>
<span class="white">Occasion Flowers</span>
</body>
</html>
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16789604
> do we have to wait for people to update their browsers before css3 will work? or when will it be available?

Yes, CSS3 is still in its draft version.  But Firefox 1.5 already implements some features of CSS3:
http://developer.mozilla.org/en/docs/Category:CSS_3
0
 

Author Comment

by:naifyboy123
ID: 16791044
thanks guys - radnor offered me a solution using css - although not ideal, it is something i can implement now using css2.

thanks for all your input
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16791259
> thanks guys - radnor offered me a solution using css
That's exactly what i explained in my first post.
0
 

Author Comment

by:naifyboy123
ID: 16791307
oops sorry - i took the view that radnor posted code for me....

maybe i should get the points split....
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16791384
> maybe i should get the points split....
that's fine, don't worry about that...
i just wanted to make sure you read my comments on that technique.
=)
0
 
LVL 8

Expert Comment

by:radnor
ID: 16791428
Whatever....  with the points, I'm in a  CLOSE 2nd....  Cant spend em....
0
 

Author Comment

by:naifyboy123
ID: 16791463
yeah - thanks GrandSchtroumpf i certainly did read your comments.

i always value everything both you and Roonaan have to offer (plus all the other guys) - without your comments past and present i would never have moved on from using FrontPage!!!!  

LOL

thanks everyone!
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Suggested Courses
Course of the Month16 days, 16 hours left to enroll

862 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