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 :
Copy the codes below:
Ok. Here comes the explanation and some codes that you can adjust for your own environment is:
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 :)
1st Line Text
2nd Line Text
2nd Line Text
Copy the codes below:
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 :)