Hungred Dot Com - Page 55 of 60 - save life through coding since 2009

Free Web Hosting

i was quite surprise with web hosting nowadays. Although free web hosting has been around for quite sometime, but there will always be ads banner or certain restriction that will link on your site because the service is free. Nowadays, there isn't any ads and the service provided and is equally comparable with the service given by paid hosting! Furthermore, it's TOTALLY FREE! (ah..its better than paid hosting in my country =/)

i went to google it up and found quite a few free hosting chart that show list of free hosting services. However, the same things happen with free web hosting which i though only happen with paid hosting is that there are many bad quality service although their marketing strategy looks very attractive. The 'bad' quality i am referring here is the number of downtime and their terms and condition that users do not read. Most of these free attractive hosting plans have terms which will cause your site to be removed. Some even cause your site to be down for a week/month/year because they do not really care about what happen to your site since its free. Thus, finding good quality free hosting is important if you want your site to remain alive and don't feel con after all the work you have done to get your hosting up.

Personally, i do not know any free hosting site that may worth to try but i do believe the following site may hold some interest for those who are searching desperate for it:

http://www.000webhost.com/
http://www.110mb.com/

Seriously, i am not doing any affiliate program for the above site. (if i am, it will be a link instead of a site url) I believe if you come in this topic and this site you are most likely someone i know or desperate for a hosting plan. If you would like to share your hosting experience with everyone, please post it up here so that people are aware. But if you are looking for a paid hosting plan i will have an idea and if you guys really like to know, you can email me if you want to or leave a post =)

Cheers,

Clay Lua

Tutorial: How to write or design in chalk with this two technique

1. Fire up your photoshop and open up a workspace, change the background to a color where it fit the color of a blackboard(#33463a)

2. Create a new layer and mess up the blackboard so that it look like one! This can be done by using the smudge tool and some line drawn on the board. I used 1 line with a Smudge strength of 89% and a large enough pixel for me to swing continuously on the board to create a nice effect as shown below.

3. Use the Horizontal Type Tools with color (#d7d7d7) and write something on the blackboard. Next, Rasterize it.

4. Now, use the Smudge tool and rub the text until you get an effect which feel like a chalk.

5. Finally, add some blur to it by doing this, Filter->Blur->Gaussian Blur, 2.5 Radius.

if you would like a nice drawing that looks like a chalk drawn you can do this,

1. Create a new layer and draw a bubble shape in the same color as shown above and contract it by 10px then color it with the blackboard color as shown below,

2. Next, take the Eraser tool and adjust its opacity to 50% and start erasing the shape until you get something like this. You can duplicate this image before applying Eraser tool to retry again for a better effect.

Done!

Tutorial: How to draw a simple butterfly logo using Adobe Illustrator

I opened up a new document in Illustrator and drew a basic wing shape using the Pencil tool. I adjust the wing shape by using the Direct Selection tool and double clicking on the path that I drew. I can then drag the lines to perfect my wing shape.

Then I filled it with a light blue colour with the Colour tool, and the border with black.

I drew a second wing shape with the Pencil tool again overlapping the first wing. This time I filled it with a darker blue.

I set the opacity on the transparency tool so that the backwing is visible

Next. again with the pencil tool, I draw a shape of the abdomen. This might not be perfect on the first try so I perfect it with the drag selection tool. Next I click on live paint bucket and make a live paint bucket from my selection of the abdomen. I then fill this in. I click on swatches and select an orange gradient. To change the degree of the gradient, I click on gradient (Window > Gradient) and drag the gradient slider around. To change colour I double click on the gradient slider which would bring me to the colour picker to choose a new colour.

Next I make the feelers. I make this with the Spiral tool hiding under the line segment tool. First I selected fill as black, and then the border as white. I then draw two spirals which I transform and edit to fit around the head.

Almost finished! The wing looks a bit dull so I add patterns with the brush tool. I select the shape I want and draw spirals in the wing.

Finished!, I can then save this as a symbol for future use.

Tutorial: how to attach an image to a link in css

First I made an unordered list in my html body with two links that I wanted. Here's an example below.

<div>
<ul>
	<li id="girl">
		<a href="http://looliwun.com">looliwun</a>
		</li>
	<li id="boy">
		<a href="http://hungred.com">hungred</a>
		</li>
		</ul>
</div>

This would result in a basic unordered list.

link1

I styled it in css using two pictures I made with Photoshop

ul
{
list-style: none; /*removes the underline below the link*/
margin: 0; /*removes the margin*/
padding: 0; /*removes the padding*/
}

ul li
{
float: left; /*this makes the element displays in a horizontal line*/
margin: 0;
padding: 0;
}

ul li a
{
color: #777;
display: block;  /*The element will be displayed as a block level element */
width: 75px; /*This allows the picture to be fit in the block*/
padding: 60px 10px 5px; /*There is 60px of padding on the top, 10px of padding on the right and left, and 5px of padding on the bottom*/
text-align: center;
text-decoration: none; /*removes all text decoration*/
}

ul li#girl a
{
background: transparent url(blablabla_files/rabbit.png) no-repeat top center; /*this makes the picture appears in the top center without any repeats*/
}

ul li#boy a
{
background: transparent url(blablabla_files/rawr.png) no-repeat top center;
}

ul li#girl a:hover,
ul li#boy a:hover
{
background-color: #FFFBC6;
/*this makes the color of the text change when the mouse hovers over the link*/}

ul li a:hover
{
color: #000 /*this makes the color of the text change when the mouse hovers over the link*/
}

This would make my link look like this
link2

When my mouse hovers over the link, the background colour changes to yellow, and the text of the link changes from gray to black.

Tutorial: How to add button image to a link with css

I got an image from the tutorial i wrote previous and wanted to do some simple stuff like adding it to a link so i did the following css code:

a.button {
display: block; 					/* this make it possible to hook the image to the link */
background-color: transparent;
background-image: url(mybutton.png); /*set the button image */
background-repeat: no-repeat;		/*set it once only */
width: 150px;						/*width of the image*/
height: 65px;						/*height of the image*/
margin: 5px auto;					/*align the text to center with top and bottom 5px margin*/
padding: 15px 0 0 0;				/*add a padding of 15px to the top*/
text-align: center;					/*this is required to make it align to center but we usually place this on the body instead*/
font-family: Myriad Pro, Calibri, Arial, sans-serif;/*font of the image*/
font-size: 100%;									/*font size*/
color: #FFF;										/*font color*/
font-weight: bold;									/*font style*/
text-decoration: none;								/*remove the link decoration*/
}

The code is well commented for understanding and you can find the sample code from here here. You will get something like this in HTML,