Tutorial: Beautify your text with CSS! comment
11.11.12


Note the above text has;
  • text-shadow
  • clipped-background
  • beautiful font(cursive)
..and guess what..they're all made of CSS coding! ..not an image made in photoshop or something, that's the best part ya see.. Here's what you do:

  • download a nice font via Dafont or choose a font from google/webfonts
  • browse the internet for a nice background/image/gif
  • copy&paste the following codes (you can edit the codes to you hearts desire!)
paste the following codes after <style type="text/css">

.name {
margin-top:-8px;
font-family:"miniver";
 font-size:20px;
  color: #ccc;
    background-image: url('http://24.media.tumblr.com/1707f406739b70bc196fa8977a0b27b5/tumblr_mpfpvwJrGC1r89lywo1_500.jpg');
opacity:.80;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;

text-shadow: 0 0 0.7em       #eee;
   -webkit-text-stroke: 0.2px white;
    }

*the text in pink are important codes.
..and voila! you're done!