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 :)

how2.0 : Put "web 2.0 styles" Badges or Buttons Anywhere at Your Site Page

 

Want to put your own custom badges or buttons at your site? This web2.0 style? Just like this site [eg : pic above]? and make it linked to a site or page? Follow this easy step-by-step tutorial :

Step 1

Create your "button" or "badge" image as something like this below :

Make sure it is [*.gif] or [*.png] format because this graphic format support transparent background.[i would suggest *.png format]. Advanced user may create some simple animation too. For someone who did not know how to create it by yourself, you can use [Easy GIF Animator] or using a real time online generator sites that you can find it here. You may also download many of free badges templates [*.psd] here.

 

Step 2

Uploads your images in any image hosting service like Photobucket or Tinypic. And grab [copy] your image link.Paste the codes somewhere else as it will be used after this step.

Step 3

Copy & Paste this codes into your < body > tag [i suggest you to full back-up your template first] :

<div style='position:absolute;left:130px;top:90px;'><a href='http://www.YourLinkedPage.com'><img border='0' src='http://YourPhotoHostingServer/YourBadgeOrButton.png'/></a></div>

Step 4

[Change Links]

• change the "http://www.YourLinkedPage.com" to the address that you want the badge or button to linked to.
• change the "http://YourPhotoHostingServer/YourBadgeOrButton.png" to your grabbed image link that i was just mention before [last part of Step 2]

[Set Image Position]

< div style='position:absolute;left:130px;top:90px;' >

• "left:130px" : This is the image start position [X-axis]. You may change it to "right" if u want to start the pixel [px] position from the right. Ok. I'll give the example based on my site. "left:130px" means the image position is 130px from the left hand side of your page. So, set it to the exact px.[preview test mode is the best answer to try to view the result]
• "top:90px" : This is also the image start position [Y-axis]. I suggest u NOT to change the "top". This "top:90px" means the image position is 90px from the top side of your page. So, just change the [px] value to ur exact value.
• The example value that i've give to you is what i used in my page. Change it according to your site page

Hope you can find this useful. Good luck to all. You may asked me if you can't understand this how2.0 tutorial :)

Flow Wallpaper With *.psd Pack

Pretty well for me. 2 pack here. My first try in making sleek glowing[ish] wallpaper. I'll upload the tutorial later. Quite hard to make a photoshop tutorial, so here is the pack that comes with raw files [*.psd] inside. Let you see the raw files first in making this wallpaper [i prefer to call it "WallaPaper"]. =X. Right now the tutorial is still under construction =P. See the WallaPaper below and have a nice download.

[download]                                            [download]

Bootscreen : Compaq Devil Edition v1

This is my first self created BootScreen design for XP. Made for my Compaq laptop but compatible to all WinXP machine. Submitted at deviantart.com on April 19, 2008. More Boot Screen will be coming ~ soon. :) Glad if you have some idea for me to make another BootScreen as your request. Just shouted me ya!

[1MB]

[download now]

WYSIWYG Web Builder v4.3.4

Web Builder is a WYSIWYG (What-You-See-Is-What-You-Get) program used to create web pages. WYSIWYG means that the finished page will display exactly the way it was designed. The program generates HTML (HyperText Markup Language) tags while you point and click on desired functions; you can create a web page without learning HTML. Just drag and drop objects to the page position them 'anywhere' you want and when you're finished publish it to your web server (using the built in Publish tool). Web Builder gives you full control over the content and layout of your web page.

[2.1MB]

[download now]

Portable Easy Gif Animator v4.12

You can use special features to add stunning visual effects and prepare your animation for publishing on your web page. Easy GIF Animator supports all types of GIF animation and provides high compression and great quality for your animated GIF images.

[3MB]

[download now]

Macromedia Flash MX Action For Designers

Try this plenty of ActionScript for your Flash project. With plenty of tutorials inside, it will make you Flash project become more interesting. For sure with its 419 pages and 17 chapter of educational information inside :) 

[8MB]

[download now]

6600 Theme Editor S60

Lots of features in this very nice theme maker. Compatible with Nokia 6600 and most of the S60 phone series. Ideal for low speed computers. This application can save the themes for further editing and generate S60 installer (*.sis)

[2MB]

[download now]