1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Jazz Up Your Pages and Blogs With This Easy Text-Shading Effect

Discussion in 'General Scripting Chat' started by The Scarlet Pimp, Jul 8, 2014.

  1. The Scarlet Pimp

    The Scarlet Pimp Senior Member

    Joined:
    Apr 2, 2008
    Messages:
    841
    Likes Received:
    3,217
    Occupation:
    Chair moistener.
    Location:
    Cyberspace
    you can make your pages look better by adding shade effect to some of the letters, like this:

    1. put this in the css file,
    Code:
    .shade {text-shadow: 1px 1px 1px #000;}
    2. you can show the effect by calling the class, like this:
    Code:
     
    <h1 class="shade">text</h1>
    
    or...
    
    <span class="shade">text</span>
    
    or...
    
    <font class="shade">text</font>
    
    or...
    
    <b class="shade">text</b>
    
    try it here: http://www.w3schools.com/css/tryit.asp?filename=trycss_default

    Code:
    <html>
    <head>
    <style>
    body {
        background-color: #d0e4fe;
    }
    
    h1 {
        color: orange;
        text-align: center;
    }
    
    p {
        font-family: "Times New Roman";
        font-size: 20px;
    }
    
    .shade {text-shadow: 1px 1px 1px #000;}
    </style>
    </head>
    <body>
    <h1 class=shade>My First 3-D CSS Example</h1>
    </body>
    </html>
    
     
    • Thanks Thanks x 1
    Last edited: Jul 8, 2014
  2. grafxextreme

    grafxextreme Regular Member

    Joined:
    Nov 28, 2008
    Messages:
    350
    Likes Received:
    1,248
    Occupation:
    Retired
    Location:
    Tri-Dimensional Importation
    Thank you, I'll add that to my toolbox of things to do on my website to help it stand out.