Home » Atom text editor for windows » CSS HTML IDE » CSS3 » Multiplying the text-shadow property

Multiplying the text-shadow property

Atom text editor for windows, CSS HTML IDE, CSS3 10:42 AM No Comments

Text-shadow css3 awesome effect , 3d text shadow css3 , Atom css3



Demo
Source Files

Love it ? Grab the code below . We loved the shiny new Atom editor by Github , so here's a rebound built with pure CSS , with over twenty text-shadow elements , it came to look like this.

Stariting with the html  it's pretty basic, an <h1> tag inside a <div> id .

HTML
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="atom-main.css"/>
</head>
    <body>
        <div id="Main">
            <h1>Atom</h1>    
        </div>
        </body>
</html>

Big . Big . Big , Now it looks cool
See the multiple shadows . A couple of text-shaodows could gives a subtle look to he typgraphy . It would look much better if there were a grunge type of background .

Using the text-shadow property:
The formal syntax for the text-shadow is

text-shadow: [x-offset][y-offset][z-offset] color;
The x-offset is your x coordinate , y-offset for y-coordinate and the z-offset is for blur ( This is the moment when you say WTF?htmlcss ) .
Now let's begin coding the stylesheet . We are going to add opacity to the text so as to mix the text a bit with the background . For this, we'll use the opacity property .
 opacity: [value] ;
The value ranges forom 0 to 1 , where 0 is for more transparency and to 1 is for more opaque .

We are setting it to 0.6 .
Next comes a huge list of text-shadow properties .

 text-shadow:

        /* 3D text shadow */

        0.5px 0.5px 0.5px #747474,
         1px 1px 0.5px #747474,
         1.5px 1.5px 0.5px #747474,
         2px 2px 0.5px #747474,
         2.5px 2.5px 0.5px #747474,
         3px 3px 0.5px #747474,
         3.5px 3.5px 0.5px #747474,
         4px 4px 0.5px #747474,
         4.5px 4.5px 0.5px #747474,
         5px 5px 0.5px #747474,
         5.5px 5.5px 0.5px #747474,

        /* Light shadow */

        -0.5px -0.5px 0.5px #aaa,
         -1px -1px 0.5px #aaa,
         -1.5px -1.5px 0.5px #aaa,
         -2px -2px 0.5px #aaa,
         -2.5px -2.5px 0.5px #aaa,
         -3px -3px 0.5px #aaa,

        /* highlights*/

        3px 6px 0.2px #8c9140,
        3.5px 6.5px 0.2px #868d39,
        2px 8px 0.5px #acb442,
        2px 8.5px 0px #acb442,
        5px -3px 0.3px #8f9636

        ;

}

That's just it . Now mess around with it .

CSS

html{
    background-color:#9ba236;
}
body{
}
#Main{
    margin:0 auto;
}
h1{
    opacity:0.6;
    font-size: 90px;
    font-family:Montserrat;
    color:white;
    text-shadow:
         0.5px 0.5px 0.5px #747474,
         1px 1px 0.5px #747474,
         1.5px 1.5px 0.5px #747474,
         2px 2px 0.5px #747474,
         2.5px 2.5px 0.5px #747474,
         3px 3px 0.5px #747474,
         3.5px 3.5px 0.5px #747474,
         4px 4px 0.5px #747474,
         4.5px 4.5px 0.5px #747474,
         5px 5px 0.5px #747474,
         5.5px 5.5px 0.5px #747474,
        -0.5px -0.5px 0.5px #aaa,
         -1px -1px 0.5px #aaa,
         -1.5px -1.5px 0.5px #aaa,
         -2px -2px 0.5px #aaa,
         -2.5px -2.5px 0.5px #aaa,
         -3px -3px 0.5px #aaa,
        3px 6px 0.2px #8c9140,
        3.5px 6.5px 0.2px #868d39,
        2px 8px 0.5px #acb442,
        2px 8.5px 0px #acb442,
        5px -3px 0.3px #8f9636
        ;
}



Gadget News
README

Saya berterima kasih untuk semua orang yang mengatakan tidak kepada saya. Itu karena mereka ingin saya melakukannya sendiri. [Source : Albert Einstein]