Test Shadow using CSS

Posted on 2008-11-05
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
Question by:chikku2003
    LVL 9

    Accepted Solution

    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,       

    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

    LVL 5

    Expert Comment

    LVL 9

    Expert Comment

    I know thats my site.

    Author Closing Comment

    thanks. for the nice pointer

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Find Ransomware Secrets With All-Source Analysis

    Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

    In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
    JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
    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…

    779 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

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now