Text mit Schatten

Wenn ihr mal einen Text auf eurer Homepage erzeugen wollt, der einen Schatten wirft, könnt ihr dieses Javascript nutzen.

Ihr könnt bei diesem Javascript die Textfarbe anpassen (hier geht es zu den Farbcodes), die Schattenfarbe, die Textgröße und natürlich auch den Abstand des Schattens zum Text.

Um es zu testen, gebt einfach mal einen Text in das Feld ein, und schon seht ihr den Text mit Schatten 🙂

<!-- präsentiert von kostenlose-javascripts.de --> <script type='text/javascript'> <!-- var textfarbe = 'FF0000'; // Farbe des Textes var schafarbe = 'CCCCCC'; // Farbe des Schattens var offset = 3; // Abstand des Schattens vom Text var textgroesse = 40; // Textgröße function initShadow() { document.write('<div style="background-color: black">'); document.write(' <div style="position: relative; width:100%; font-size:'+textgroesse+'px; font-weight: bold;;">'); document.write(' <span id="farbe2" style="position: absolute; top: '+offset+'px; left: '+offset+'px; color: #'+schafarbe+';"> </span>'); document.write(' <span id="farbe" style="position: absolute; top: 0px; left: 0px; color:#'+textfarbe+'"> </span>'); document.write(' </div>'); document.write('</div>'); } function check(){ document.getElementById('farbe').innerHTML = '' + document.getElementById('eingabe').value + ''; document.getElementById('farbe2').innerHTML = '' + document.getElementById('eingabe').value + ''; } //--> </script> <div align="center">Bitte gib einen Text ein. <input type="text" name="eingabe" id="eingabe" size="25" onkeyup="check();" /></div> <br /> JavaScript von <a href="http://www.kostenlose-javascripts.de/javascripts/texteffekte/text-mit-schatten/" target="_blank">kostenlose-javascripts.de</a> <br /> <script type="text/javascript">initShadow();</script> <!-- präsentiert von kostenlose-javascripts.de -->