Just another blog on the net

Tutorial: Beautify your text with CSS!
11 Nov 2012 | Comment

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 {
  color: #ccc;
    background-image: url('');
-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!


Hi, I'm Grace and I maintain this blog with my occasional musings. Apart from writing, I like being occupied with anything artsy, I enjoy the company of books and I like unleashing my inner nerd through occasional coding. My ideal day would be holding a book in one hand, matcha in the other, ears plugged and a cat purring on my lap.