Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Drop shadow text using CSS

Posted on 2012-09-12
5
Medium Priority
?
443 Views
Last Modified: 2012-09-14
I want to have a header that has a drop shadow.

 I don't think there's a style that adds a drop shadow to your text. If there is that's my first choice.

But second, I was going to define two elements, that have identical text, but have different style sheets.

This does work, but I don't want the position to be absolute. I want to have this header anywhere within my content body, so I don't want to have to define the exact position:

.ScreenNameMain
{
    color: #384E73;
    top: 60px;
    left: 20px;
    position: absolute;
}

.ScreenNameShadow
{
   color: #8080FF;
   top: 62px;
   left: 22px;
   position: absolute;
}

Open in new window


How would I do this? thanks!
0
Comment
Question by:Starr Duskk
  • 2
  • 2
5 Comments
 
LVL 7

Accepted Solution

by:
DIIRE earned 1900 total points
ID: 38393540
Have you tried text-shadow property

http://www.css3.info/preview/text-shadow/

More info on text-shadow:

http://webdesign.about.com/od/css3tutorials/a/css-shadows.htm

This should do what you want.
0
 
LVL 2

Author Comment

by:Starr Duskk
ID: 38393558
Anything for IE?
0
 
LVL 7

Assisted Solution

by:DIIRE
DIIRE earned 1900 total points
ID: 38393744
You can try javascript to get the same result.

See link below:

http://kilianvalkhof.com/2008/javascript/text-shadow-in-ie-with-jquery/

Also filter: dropshadow is supposed to work in IE but apparently it wont work if you have a background color.

It would be great if IE started supporting text-shadow like most other browsers.  I personally don't care if a visual effect can't be seen IE because it doesn't support it as long it still looks good. Dropshadow is deprecated IE9 also.
0
 
LVL 11

Assisted Solution

by:mcnute
mcnute earned 100 total points
ID: 38394253
you can use the filter method in ie:

h1 {filter:progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=45);}

Open in new window


you need to dedlare both styles for the rest of the browsers:

text-shadow: 1px 1px 1px #ccc;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=45;

Open in new window

0
 
LVL 2

Author Comment

by:Starr Duskk
ID: 38399706
Both of those other options look ugly. I checked out numerous plug ins, etc. and none are truly drop shadows. They are just blurry text. It's better to leave it off in my opinion. But thanks. I know it's out of your control.
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

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

This article shows how to deploy dynamic backgrounds to computers depending on the aspect ratio of display
Hello there! As a developer I have modified and refactored the unit tests which was written by fellow developers in the past. On the course, I have gone through various misconceptions and technical challenges when it comes to implementation. I would…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month20 days, 14 hours left to enroll

810 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