Cannot add box-shadow or text-shadow to the Z's in this animation

Question

I am new to programming and I'm trying to have the Z's from this beautiful piggie animation have a box-shadow or a text-shadow directly underneath the Z's so it will (hopefully :D) give the Z's a "3d-look". I hope someone can help me because when I try box-shadow, it does not appear on the text. When I tried text-shadow, it created a second Z next to the first Z, but it's not aligned and both move seperately in the animation.

please help

//Pig face position
var elmFace = $("#face").offset();

function snore() {
  //Create Z
  var elm = document.createElement("span");
  //Text
  elm.innerText = "Z";
  //Set attributes
  elm.setAttribute("class", "z");
  //Get positions
  posTop = elmFace.top + 20;
  posLeft = elmFace.left + ($("#face").width()/2) + 35;
  aniTop = posTop - 160;
  aniLeft = (posLeft-40) + Math.round(Math.random()*80);
  //Style/position it
  $(elm).css({
    "top": posTop,
     "left": posLeft
  });
  //Append
  $("body").append(elm);
  //Animate
  $(elm).animate({
    "top": aniTop,
    "left": aniLeft,
    "font-size": "60px",
     "opacity": 0
    },
    5000, //Duration
    function() { //Function
      $(this).remove(); //Remove
  });
}

setInterval(snore, 1000);
snore();

/* -- THE BODY -- */
.body {
}

#face-wrap {
  margin: 160px auto 0;
  width: 160px;
}

#face {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 80px;
  background: rgb(255, 200, 200);
  transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
  -moz-transform: rotate(15deg);
  -o-transform: rotate(15deg);
}

.ear {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 35px;
  background: rgb(255, 200, 200);
}
#ear-l {
  left: -20px;
}
#ear-r {
  left: +110px;
}

.eye {
  top: +75px;
  position: absolute;
  width: 40px;
  height: 4px;
  background: rgb(255, 250, 250);
}
#eye-l {
  left: +14px;
}
#eye-r {
  left: +100px;
}

#nose {
  position: absolute;
  top: +75px;
  left: +47px;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background: rgb(250, 160, 160);
}
.nose {
  top: +13px;
  position: absolute;
  width: 7px;
  height: 35px;
  background: rgb(255, 125, 125);
}
#nose-l {
  left: +16px;
}
#nose-r {
  left: +36px;
}


/* -- ZZZzzzz -- */
.z {
  position: absolute;
  color: black;
  font-family: arial;
  font-size: 0;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="face-wrap">
  <div id="face" class=" body">
    <div id="ear-r" class="ear body"></div>
    <div id="ear-l" class="ear body"></div>
    <div id="eye-r" class="eye body"></div>
    <div id="eye-l" class="eye body"></div>
    <div id="nose">
      <div id="nose-r" class="nose body"></div>
      <div id="nose-l" class="nose body"></div>
    </div>
  </div>
</div>

https://codepen.io/TomMcPadden/pen/yAblG

Answer 1

text-shadow works fine for this. You probably adjusted the offset on accident.

//Pig face position
var elmFace = $("#face").offset();

function snore() {
  //Create Z
  var elm = document.createElement("span");
  //Text
  elm.innerText = "Z";
  //Set attributes
  elm.setAttribute("class", "z");
  //Get positions
  posTop = elmFace.top + 20;
  posLeft = elmFace.left + ($("#face").width()/2) + 35;
  aniTop = posTop - 160;
  aniLeft = (posLeft-40) + Math.round(Math.random()*80);
  //Style/position it
  $(elm).css({
    "top": posTop,
     "left": posLeft
  });
  //Append
  $("body").append(elm);
  //Animate
  $(elm).animate({
    "top": aniTop,
    "left": aniLeft,
    "font-size": "60px",
     "opacity": 0
    },
    5000, //Duration
    function() { //Function
      $(this).remove(); //Remove
  });
}

setInterval(snore, 1000);
snore();

/* -- THE BODY -- */
.body {
}

#face-wrap {
  margin: 160px auto 0;
  width: 160px;
}

#face {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 80px;
  background: rgb(255, 200, 200);
  transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
  -moz-transform: rotate(15deg);
  -o-transform: rotate(15deg);
}

.ear {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 35px;
  background: rgb(255, 200, 200);
}
#ear-l {
  left: -20px;
}
#ear-r {
  left: +110px;
}

.eye {
  top: +75px;
  position: absolute;
  width: 40px;
  height: 4px;
  background: rgb(255, 250, 250);
}
#eye-l {
  left: +14px;
}
#eye-r {
  left: +100px;
}

#nose {
  position: absolute;
  top: +75px;
  left: +47px;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background: rgb(250, 160, 160);
}
.nose {
  top: +13px;
  position: absolute;
  width: 7px;
  height: 35px;
  background: rgb(255, 125, 125);
}
#nose-l {
  left: +16px;
}
#nose-r {
  left: +36px;
}


/* -- ZZZzzzz -- */
.z {
  position: absolute;
  color: black;
  font-family: arial;
  font-size: 0;
  font-weight: bold;
  text-shadow: 1px 1px 3px pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="face-wrap">
  <div id="face" class=" body">
    <div id="ear-r" class="ear body"></div>
    <div id="ear-l" class="ear body"></div>
    <div id="eye-r" class="eye body"></div>
    <div id="eye-l" class="eye body"></div>
    <div id="nose">
      <div id="nose-r" class="nose body"></div>
      <div id="nose-l" class="nose body"></div>
    </div>
  </div>
</div>