?
Solved

Test Shadow using CSS

Posted on 2008-11-05
4
Medium Priority
?
470 Views
Last Modified: 2012-05-05
I would like to bring up shadow effect using css. how can i do it?

say, "Sharepoint" text should display as Sharepoint with shadow effect
0
Comment
Question by:chikku2003
  • 2
4 Comments
 
LVL 9

Accepted Solution

by:
Seven price earned 2000 total points
ID: 22887546
Anyway, the CSS needed for Safari is as follows:
.shadow {
      text-shadow: #666666 5px 5px 5px;
}


       Although Internet Explorer doesnt use the text-shadow CSS property,       it does provide a nice easy way of creating text shadows: the shadow filter.  This       is well documented on other sites, so Ill just give you an example here.  To create       similar shadows to the example above for Safari, youd use the following CSS:   .shadow {
      height: 1em;
      filter: Shadow(Color=#666666,       
                  Direction=135,
                  Strength=5);
}

Shadows in Mozilla
 
Heres where things start getting meaty. Since the Gecko based browsers do not know about the previous two methods of creating shadows, we need to create our shadows in some third way.
 
There are various ways that we could create the text shadows in the Gecko browsers. You could, for example, make use of your favourite image replacement technique to replace the text to be shadowed with an image of some shadowed text. Thats a fine technique, but not the one that I chose. What I chose to do was create a piece of shadow text using the :before pseudo-element.
 
.shadow {
  line-height: 2em;
  white-space: nowrap;
  
}
 
.shadow:before {
  display: block;
  margin: 0 0 -2.12em 0.15em;
  padding: 0;
  color: #666666; 
}
 
#shadow_header:before { content: 'In shadow'; }

Open in new window

0
 
LVL 5

Expert Comment

by:vibrazy
ID: 22887588
0
 
LVL 9

Expert Comment

by:Seven price
ID: 22887698
I know thats my site.
0
 

Author Closing Comment

by:chikku2003
ID: 31513582
thanks. for the nice pointer
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

840 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