Letter Shadows from User Input

Question

Goal: User types name into user input field, selects Animate button, and name is printed vertically with each letter containing a drop shadow of each letter. The Javascript li

Answer 1

Here is also the text output function with Raphael:

function draw_text() {
  var txt = document.getElementById("words").value;
  var posy = txt.length*10;
  r.clear();
  var attr = {font: "50px Helvetica", opacity: 0.5};
  var text = r.text(40, 40+posy, txt).attr(attr).attr({fill: "#0f0"}); // underlayer or "shadow"
  text.attr({transform: "r270"}); // rotate 270 degrees
  var text2 = r.text(43, 43+posy, txt).attr(attr).attr({fill: "#aa0"}); // text above
  text2.attr({transform: "r270"}); // rotate 270 degrees
  r.safari();
}

var r = new Raphael("draw-here-raphael");

The full script, based on this example, is here.

Answer 2

Do you really need raphael? What I did was simply print out your words onto an element and get the shadow with css's text-shadow. To get the vertical text I added a </br> after each letter.

Take a look at the fiddle: http://jsfiddle.net/joplomacedo/wVGbF/

Here's the code in case you can't see the fiddle:

HTML

Text: <input type="text" id="words" value="" /> 
      <input id="animateBtn" type="button" value="Animate" />
      <div class="print"></div>

CSS

.print {
    font: 44px/0.8em "Lobster", cursive;
    color: gold;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}​

JS

var join = Array.prototype.join;

$('#animateBtn').on('click', function() {
    var txt = $('#words').val(),
        spaced_txt = join.call(txt, "</br>");

    $('.print').html(spaced_txt);
});​