how2.0 : Creating An Overlapped Text In Your Page

One of my reader want to know a site that can create a text header that is transparent. However, this is a simple codes that is quite fun to play with. Here, i  would like to teach how to create an "Overlapping Text" with simple step and instruction. This "Overlapping Text" can be used as a header in your blog page or either in Myspace or Friendster page. The final result will be something like this :

1st Line Text
2nd Line Text

Copy the codes below:


<div style="line-height:10%; text-align:center; font-weight:bold; text-decoration: ; font-style:"><span style="font-size:24px; color:#09a9e9; font-family:Arial">1st Line Text</span><br /><span style="font-size:14px; color:#000000; font-family:Arial">2nd Line Text</span></div>

Ok. Here comes the explanation and some codes that you can adjust for your own environment is:

Value	Description	Example
line-height:80%	Line-height" is the value where your 1st & 2nd text is overlapped. Here you can adjust the % value on your own	0% - 100% [smaller value means the more the text overlapped]
text-align:center	the text alignment	center, left, right
font-weight:bold	Either the font is bold, it must be set to "bold" or empty for normal	bold
text-decoration: underline	Additional decoration over the text	underline / overline
font-style: italic	The style should be set under "italic" or none	italic
font-size:24px	size under pixel count	24px, 15px & so on
color:#172ae3	The color can be set using rgb format or color codes format	1. [color codes format #fffff, #e8f610] 2. [rgb format : writen as :rgb(53,221,179) where the numbers indicates red, green & blue channel composition]
font-family:Arial	Font face for the text	comic sans, verdana, arial
1st Line Text	For your 1st text	welcome
2nd Line Text	For your 1st text	to my world

update : to change the text into picture such as a question in the below comment, the situation given is the picture will replace the "1st line text". That means, the picture will be at the bottom layer. So, simply remove the codes after "< span" and change it to "< span >" only. Followed by < img src="http://www.imghosting.com/yourpicture.png"> and continue closed by < /span >.

eg : ..... ; font-style:" >< span >< img src="http://i528.photobucket.com/albums/dd325/zxara_project/ads_default.png"/ >< /span >< br/ >< span style=....


hope this help :) Feel free to comment. If you find this tutorial didn't help, request me a little further info about this tutorial :)