This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Dreamweaver > August 2004 > shadowed text
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
|
|
| A.H.O. 2004-08-09, 4:14 am |
| Hey again everybody...
Im trying to figure out how to make shadowed text. Ive read some stuff about
it, but to be honest don't understand what it is saying. Everything Ive read
just lists the code to put in, but Im not sure where the code goes, or if it
will work with the code Im writing. For example....
{ text-shadow: 3px 3px 5px red }
This is great, but Ive never seen code like this, and I have NO CLUE where it
might go.
What Im trying to do is to use CSS to make shadowed text. Is the above
example for CSS? If not, how can I do it? If someone could either point me
to a tut. that makes sense, or give me a brief explanation of how to proceed,
Id appreciate it.
| |
| .: Nadia :TMM :. 2004-08-09, 4:14 am |
| Matt,
have a look here http://www.w3.org/TR/1998/WD-css2-19980128/text.html
further down the page - look for text-shadow
(a good reference site - put it in your book marks)
I've never used this myself, but I *think* it may not be cross browser.
There are examples at the link above to show you how to write the css.
--
Nadia
Team Macromedia Volunteer for Dreamweaver
---------------
http://www.DreamweaverResources.com
Free Templates | Free Nav Bar Sets
Dropdown Menu Designs | CSS Layouts
Ecommerce - YVStore | SEO Articles
Table Tutorials | Background image Tutorials
------------------------------------------------
MM Dreamweaver Tutorials
http://macromedia.com/devnet/mx/dreamweaver/
-----------------
"A.H.O." <webforumsuser@macromedia.com> wrote in message
news:cf71ad$elc$1@forums.macromedia.com...
> Hey again everybody...
> Im trying to figure out how to make shadowed text. Ive read some stuff
about
> it, but to be honest don't understand what it is saying. Everything Ive
read
> just lists the code to put in, but Im not sure where the code goes, or if
it
> will work with the code Im writing. For example....
> { text-shadow: 3px 3px 5px red }
> This is great, but Ive never seen code like this, and I have NO CLUE
where it
> might go.
>
> What Im trying to do is to use CSS to make shadowed text. Is the above
> example for CSS? If not, how can I do it? If someone could either point
me
> to a tut. that makes sense, or give me a brief explanation of how to
proceed,
> Id appreciate it.
>
| |
| A.H.O. 2004-08-09, 12:15 pm |
| Thanks Nadia. My confusion though, lies in WHERE in the code that code is
placed? Does it have to go into a H1 or H2 tag? I dont have any H tags. Can
I put it in a table or tr or td tag? if so how?
Do I need to define that style in the style sheet first, and then just insert
the name of the style into the tags? If so, then how do I define itin my
stylesheet? Can I handwrite it into the stylesheet instead of using the pop up
window thatI usually use? (Im such a beginner) lol
Thanks
| |
| .: Nadia :.TMM :. 2004-08-09, 12:15 pm |
| Ok, looking at your page, you have: (cut out a heap of styles though for
brevity)
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(foresttile.jpg);}H1{ text-shadow: 3px 3px 5px red }H2
{whatever style you want in here;}
-->
</style>Add the H1 style as above. You then add text to one of your
rows/cells, highlight the text and from the PI choose H1. It will be
automatically styled because you have already written the style to the head
of the document.So for all text that you declare a H1 it will be styles as
above. HOpe this helps.... -- NadiaTeam Macromedia Volunteer for
Dreamweaver---------------http://www.DreamweaverResources.comFree Templates
| Free Nav Bar SetsDropdown Menu Designs | CSS LayoutsEcommerce - YVStore |
SEO ArticlesTable Tutorials | Background image
Tutorials------------------------------------------------MM Dreamweaver
Tutorialshttp://macromedia.com/devnet/mx/dreamweaver/-----------------
"A.H.O." <webforumsuser@macromedia.com> wrote in message
news:cf7us2$gm0$1@forums.macromedia.com...
> Thanks Nadia. My confusion though, lies in WHERE in the code that code is
> placed? Does it have to go into a H1 or H2 tag? I dont have any H tags.
Can
> I put it in a table or tr or td tag? if so how?
>
> Do I need to define that style in the style sheet first, and then just
insert
> the name of the style into the tags? If so, then how do I define itin my
> stylesheet? Can I handwrite it into the stylesheet instead of using the
pop up
> window thatI usually use? (Im such a beginner) lol
>
> Thanks
>
| |
| .: Nadia :.TMM :. 2004-08-09, 12:15 pm |
| Posting this again - so it is easier to read - not sure what happened to the
formating of my last post - apologies....
Ok, looking at your page, you have: (cut out a heap of styles though for
brevity)
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(foresttile.jpg);}
H1 { text-shadow: 3px 3px 5px red;}
H2 {whatever style you want in here;}
-->
</style>
Add the H1 style as above. You then add text to one of your
rows/cells, highlight the text and from the PI choose H1. It will be
automatically styled because you have already written the style to the head
of the document.So for all text that you declare a H1 it will be styles as
above.
--
Nadia
"A.H.O." <webforumsuser@macromedia.com> wrote in message
news:cf7us2$gm0$1@forums.macromedia.com...
> Thanks Nadia. My confusion though, lies in WHERE in the code that code is
> placed? Does it have to go into a H1 or H2 tag? I dont have any H tags.
Can
> I put it in a table or tr or td tag? if so how?
>
> Do I need to define that style in the style sheet first, and then just
insert
> the name of the style into the tags? If so, then how do I define itin my
> stylesheet? Can I handwrite it into the stylesheet instead of using the
pop up
> window thatI usually use? (Im such a beginner) lol
>
> Thanks
>
| |
| A.H.O. 2004-08-09, 7:15 pm |
| OK Ive added the H1 to the code exactly like you said to do.
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(foresttile.jpg);}
H1 {text-shadow: 3px 3px 5px black;}
.style1 {
font-size: 16px;
color: #f8C702;
}
What do you mean selct H1 from the property inspector? Ive highlighted the
text I want to apply a shadow to and there isnt anything in the property
inspector that has an H1. Not in the style list or anywhere. There is a
FORMAT area that has HEADING 1, HEADING 2, etc. When I choose the heading 1
there it makes the text HUGE. So Im not sure how to apply the H1 styling to
the text. Can I add it to the td, tr, or th tag like a class?
Do I need to put it in my style sheet?
This is turning to be more of a pain than it's worth, but now I HAVE to know
how to do it. =-)
| |
| Murray *TMM* 2004-08-09, 7:15 pm |
| You haven't even begun to explore the browser support....
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================
"A.H.O." <webforumsuser@macromedia.com> wrote in message
news:cf8qqo$ihl$1@forums.macromedia.com...
> OK Ive added the H1 to the code exactly like you said to do.
>
> <style type="text/css">
> <!--
> body {
> margin-left: 0px;
> margin-top: 0px;
> margin-right: 0px;
> margin-bottom: 0px;
> background-image: url(foresttile.jpg);}
>
> H1 {text-shadow: 3px 3px 5px black;}
>
> .style1 {
> font-size: 16px;
> color: #f8C702;
> }
>
> What do you mean selct H1 from the property inspector? Ive highlighted
the
> text I want to apply a shadow to and there isnt anything in the property
> inspector that has an H1. Not in the style list or anywhere. There is a
> FORMAT area that has HEADING 1, HEADING 2, etc. When I choose the heading
1
> there it makes the text HUGE. So Im not sure how to apply the H1 styling
to
> the text. Can I add it to the td, tr, or th tag like a class?
>
> Do I need to put it in my style sheet?
>
> This is turning to be more of a pain than it's worth, but now I HAVE to
know
> how to do it. =-)
>
| |
| A.H.O. 2004-08-09, 11:14 pm |
| I havnt?
| |
|
|
| A.H.O. 2004-08-09, 11:14 pm |
| That could be an issue! lol
I was reading some tutorials on it though, and they had shadowed text. I
guess it could have been an image, but the tut said it was text. Im using IE 6
on win 2k pro. Unless it was an image I would assume that means that IE 6
does? Maybe Im assuming wrong. Wouldnt be the first time. =-)
| |
|
|
|
|
|
|
| Lossed 2004-08-09, 11:14 pm |
| yes, with IE6.something on XP
no, with firefox 0.9 on XP
"A.H.O." <webforumsuser@macromedia.com> wrote in message
news:cf98dp$bn$1@forums.macromedia.com...
> Better yet go here.
>
> www.americanheritageoutdoors.com/clarkforkriver.htm
>
> I put some shadowed text at the bottom of the page. Can you see it?
| |
|
|
| A.H.O. 2004-08-09, 11:14 pm |
| now go to this page an click on the text shadow example.
It works on my computer....
http://www.geocities.com/htmlmegan/css.html
I don't get it. I can get the shadow to work on my comp in a blank page, but
when I apply it in the same manner to the code in the pages I want to change,
it doesnt do a thing.
| |
| Al Sparber- PVII 2004-08-09, 11:14 pm |
| Lossed wrote:[color=darkred]
> yes, with IE6.something on XP
> no, with firefox 0.9 on XP
>
> "A.H.O." <webforumsuser@macromedia.com> wrote in message
> news:cf98dp$bn$1@forums.macromedia.com...
Yes. But shadows rendered with browser filters make the ext almost
impossible to read. I don't think that shadow is a positive attribute of
your web page.
--
Al Sparber - PVII
http://www.projectseven.com
DW Extensions - Menu Systems - Tutorials - CSS FastPacks
---------------------------------------------------------
Webdev Newsgroup: news://forums.projectseven.com/pviiwebdev/
CSS Newsgroup: news://forums.projectseven.com/css/
RSS/XML Feeds: http://www.projectseven.com/xml/
| |
| A.H.O. 2004-08-09, 11:14 pm |
| FYI
<table style="filter:SHADOW(color=black, strength=4)" width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td><div align="center"><span class="style16">Does the shadow work
here?</span></div></td>
</tr>
</table>
<table class="blackshadow" width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td><div align="center">Shadowed text doesnt work</div></td>
</tr>
</table>
The first table with shadowed text works in IE6. It does not work in Netscape
7.1, or Opera.
The second table didnt apply shadow in any of those browsers. But as Im not
css proficient I wouldnt put weight to that second table.
Any thoughts on how to adjust how the shadow lays? In other words instead of
being bottom left, Id like it bottom right.
| |
| Murray *TMM* 2004-08-10, 4:14 am |
| That's not a CSS text-shadow, though.... That's a proprietary IE filter.
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================
"A.H.O." <webforumsuser@macromedia.com> wrote in message
news:cf999e$129$1@forums.macromedia.com...
> FYI
>
> <table style="filter:SHADOW(color=black, strength=4)" width="100%"
border="0"
> cellspacing="0" cellpadding="0">
> <tr>
> <td><div align="center"><span class="style16">Does the shadow work
> here?</span></div></td>
> </tr>
> </table>
> <table class="blackshadow" width="100%" border="0" cellspacing="0"
> cellpadding="0">
> <tr>
> <td><div align="center">Shadowed text doesnt work</div></td>
> </tr>
> </table>
>
> The first table with shadowed text works in IE6. It does not work in
Netscape
> 7.1, or Opera.
> The second table didnt apply shadow in any of those browsers. But as Im
not
> css proficient I wouldnt put weight to that second table.
>
> Any thoughts on how to adjust how the shadow lays? In other words
instead of
> being bottom left, Id like it bottom right.
>
| |
| snowball7 2004-08-10, 4:14 am |
| How much of the text of your page are you looking to add shadows to? I would
think that very much of it would become very difficult to read. If you are
only going to use it for titles for example, why not simply create the text
(with shadow) as an image, with the appropriate background to match the page
(or a transparent gif)?
| |
| lockmart 2004-08-10, 4:14 am |
| According to MacEdition
<http://macedition.com/cb/resources/...csssupport.html> the text-shadow
style is supported only in the Safari browser thus far. I just did a Google
search on CSS2 and browser.
One of my colleagues worked out a text shadow using a filter that's kind of
cool. It's at the NASA Cell Science Conference site
<http://slsd.jsc.nasa.gov/bso/ncsc/> The following goes into your CSS file.
{
position: absolute ;
left: 0px ;
top: -14px ;
color: #c7dae8 ;
font-family: Garamond ;
font-size: 60pt ;
font-weight: 400 ;
}
Hope this helps...
| |
| lockmart 2004-08-10, 4:14 am |
| There's a W3 validator page that shows the following to be correct markup for
your shadow. It's at http://www.w3schools.com/css/css_reference.asp
Have fun with the Cell Science site - make sure you drop Stuart a line and
tell him how cool he is... :o)
| |
| A.H.O. 2004-08-10, 4:14 am |
| So its because of a filter in IE.....DANG. I guess that makes sense. How come
the W3C is doing tutorials on making text shadows
(http://www.w3.org/TR/1998/WD-css2-19980128/text.html) if web browsers dont
support it? In the hopes tha they will support it soon? Or maybe they know
something thatwe dont?
And to answer the questions...I dont plan to use shadows much IF at all.
There were a couple of areas that I thought would look cool with text shadow.
I could do it with a graphic in about 10 seconds, but thought that the idea of
text shadow via css was pretty cool. Thanks a lot for all of the imput guys.
Once again, I have learned a few things that to you most likely seem old news
and trivial, while to me they are pretty major stepping stones.
Al, You're right...for now shadowed text isnt that answer that Im looking for.
Through filters or css anyway. I'll wait until the browsers catch up to me
(HAHAHAHAHA).
I have to admit though...Im going to have to experiment with that code from
the NASA site...thanks for sharing!
| |
| Murray *TMM* 2004-08-10, 12:14 pm |
| Xref: kermit macromedia.dreamweaver:949137
Kind of cool? I see no shadowed text on that page, and if I didn't have
Garamond installed, I'd see the text content in Times/Times New Roman.
Ugh....
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================
"lockmart" <webforumsuser@macromedia.com> wrote in message
news:cf9hst$7gj$1@forums.macromedia.com...
> According to MacEdition
> <http://macedition.com/cb/resources/...csssupport.html> the
text-shadow
> style is supported only in the Safari browser thus far. I just did a
Google
> search on CSS2 and browser.
>
> One of my colleagues worked out a text shadow using a filter that's kind
of
> cool. It's at the NASA Cell Science Conference site
> <http://slsd.jsc.nasa.gov/bso/ncsc/> The following goes into your CSS
file.
>
> {
> position: absolute ;
> left: 0px ;
> top: -14px ;
> color: #c7dae8 ;
> font-family: Garamond ;
> font-size: 60pt ;
> font-weight: 400 ;
> }
>
> Hope this helps...
>
| |
| Murray *TMM* 2004-08-15, 12:15 pm |
| Kind of cool? I see no shadowed text on that page, and if I didn't have
Garamond installed, I'd see the text content in Times/Times New Roman.
Ugh....
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================
"lockmart" <webforumsuser@macromedia.com> wrote in message
news:cf9hst$7gj$1@forums.macromedia.com...
> According to MacEdition
> <http://macedition.com/cb/resources/...csssupport.html> the
text-shadow
> style is supported only in the Safari browser thus far. I just did a
Google
> search on CSS2 and browser.
>
> One of my colleagues worked out a text shadow using a filter that's kind
of
> cool. It's at the NASA Cell Science Conference site
> <http://slsd.jsc.nasa.gov/bso/ncsc/> The following goes into your CSS
file.
>
> {
> position: absolute ;
> left: 0px ;
> top: -14px ;
> color: #c7dae8 ;
> font-family: Garamond ;
> font-size: 60pt ;
> font-weight: 400 ;
> }
>
> Hope this helps...
>
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|