CODEWITHSUNDEEP
javascriptjqueryhtmlcssonload
Damon Jenkins
Damon Jenkins

Reputation: 352

How can you add multiple text shadows for one piece of text in one jquery ".css()"

How can you add multiple text shadows for one piece of text in one jquery ".css()"?

I'm trying to animate the title of a page on my site, I have made the text 3D with multiple shadows, and I want to change what colour it is on page load.

This is what I have currently:

//Animates section 1 of mainpage title
function tsec1Anim(){
    $("#tsec1").css({
        "font-family" : "Lucida Console",
        "font-weight" : "bold",
        "text-align" : "center",
        "margin-bottom" : "12px",
        "top" : "0px",
        "color" : "#0033cc",
        "font-size" : "75px",
        "text-shadow" : "0px 1px 0px #002eb8",
        "text-shadow" : "0px 2px 0px #0029a3",
        "text-shadow" : "0px 3px 0px #00248f",
        "text-shadow" : "0px 4px 0px #001f7a",
        "text-shadow" : "0 5px 0 #001a66",
        "text-shadow" : "0 6px 1px rgba(0,0,0,.1)",
        "text-shadow" : "0 0 5px rgba(0,0,0,.1)",
        "text-shadow" : "0 1px 3px rgba(0,0,0,.4)",
        "text-shadow" : "0 3px 5px rgba(0,0,0,.50)",
        "text-shadow" : "0 5px 10px rgba(0,0,0,.80)",
        "text-shadow" : "0 10px 10px rgba(0,0,0,.60)",
        "text-shadow" : "0 20px 20px rgba(0,0,0,.75)",
        "margin-top" : "15px"
     });
}

Upvotes: 1

Views: 952

Answers (2)

Wahyu Kodar
Wahyu Kodar

Reputation: 674

You can try this code:

function tsec1Anim(){
    $("#tsec1").css({
        "font-family" : "Lucida Console",
        "font-weight" : "bold",
        "text-align" : "center",
        "margin-bottom" : "12px",
        "top" : "0px",
        "color" : "#0033cc",
        "font-size" : "75px",
        "text-shadow" : "4px 4px 1px #300000,4px 6px 1px #400000,4px 8px 1px #500000,4px 10px 1px #600000,4px 12px 1px #700000,4px 14px 1px #800000,4px 16px 1px #900000",
        "margin-top" : "15px"
        });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="tsec1">Tesa</div>
<div onclick="tsec1Anim()">Klik</div>

Upvotes: 0

Jacob G
Jacob G

Reputation: 14152

Firstly, to have multiple text-shadows, you separate them with a comma:

text-shadow: 0 0 5px black, 0 0 10px red;

With your coding, that adds up to:

text-shadow: 0px 1px 0px #002eb8,
         0px 2px 0px #0029a3,
         0px 3px 0px #00248f,
         0px 4px 0px #001f7a,
         0 5px 0 #001a66,
         0 6px 1px rgba(0,0,0,.1),
         0 0 5px rgba(0,0,0,.1),
         0 1px 3px rgba(0,0,0,.4),
         0 3px 5px rgba(0,0,0,.50),
         0 5px 10px rgba(0,0,0,.80),
         0 10px 10px rgba(0,0,0,.60),
         0 20px 20px rgba(0,0,0,.75);

JSFiddle Demo

In your case, i would really recommend using addClass() in your jquery, its easier:

      .myClass{
     font-family : Lucida Console;
            font-weight : bold;
            text-align : center;
            margin-bottom : 12px;
            top : 0px;
            color : #0033cc;
            font-size : 75px;
            text-shadow: 0px 1px 0px #002eb8,
             0px 2px 0px #0029a3,
             0px 3px 0px #00248f,
             0px 4px 0px #001f7a,
             0 5px 0 #001a66,
             0 6px 1px rgba(0,0,0,.1),
             0 0 5px rgba(0,0,0,.1),
             0 1px 3px rgba(0,0,0,.4),
             0 3px 5px rgba(0,0,0,.50),
             0 5px 10px rgba(0,0,0,.80),
             0 10px 10px rgba(0,0,0,.60),
             0 20px 20px rgba(0,0,0,.75);
            margin-top : 15px;
    }
function tsec1Anim(){
    $("#tsec1").addClass('myClass');
}

JSFiddle Demo

Upvotes: 1

Related Questions