Letter Shadows from User Input

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 library Raphael may be desirable.

Problem: So far what I have is the name being printed vertically twice side by side. Obviously the second column should be the letters as drop shadows, but I don't know how to change the style of them to look like shadows.

My manager gave me one hint: "I had to create a 2nd text line placed underneath the text...and I used the .blur() method on it. If I have to give you another hint I'll be hinting you to the door."

I'm in some real trouble here. If anyone has suggestions, solutions, anything it would be very much appreciated.

<html> 
<head> 
<script src="raphael-min.js"></script> 
<script src="jquery-1.7.2.js"></script>  
<script type="text/javascript">   

function animate() {  

var txt = document.getElementById("words").value;
var area = txt;
var splittxt = txt.split("");

document.getElementById("letters").innerHTML = "";
document.getElementById("letters2").innerHTML = "";
var i;
for (i = 0; i < splittxt.length; i++) {
document.getElementById("letters").innerHTML = document.getElementById("letters").innerHTML + splittxt[i] + "<br>";
document.getElementById("letters2").innerHTML = document.getElementById("letters2").innerHTML + splittxt[i] + "<br>";
}
//displays how many symbols are in text box and what is in text box
document.getElementById("num").innerHTML= txt.length;          
document.getElementById("msg").innerHTML = txt;          

r.clear();      
// Make our pink rectangle 
ellipse = r.ellipse(40, 15, 30, 5).attr({"fill": "#969696", "stroke": "none"}); 
ellipse.glow({width:10});  
}      

</script>
<style type="text/css">
#letters
{
background-color:yellow;
width:25px;
float:left;
}

#letters2
{
letter-spacing:0px;
display:block;
-moz-transform: rotate(80deg);  
margin-left:90px;
margin-top:80px;
width:25px;
color:#DEDEDE;
}
</style>

</head> 

<body>  

Text: <input type="text" id="words" value="" /> 
<input type="button" value="Animate" onclick="animate()" /> 
<div id='msg'></div> 
<div id='num'></div>
<div id='letters'></div>
<div id="letters2"></div>
<div id="draw-here-raphael" style="height: 200px; width: 400px; margin-top:0px;"> 
</div> 
<div id="elps" style="margin-left:100px;"/>  

<script type="text/javascript"> //all your javascript goes here  
var r = new Raphael("draw-here-raphael");  

</script>

</body> 
</html>

Live Long and Prosper.

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);
}

var join = Array.prototype.join;

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

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

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.

来源：https://stackoverflow.com/questions/11470932/letter-shadows-from-user-input

标签

javascript

css

animation

raphael