Contact Us

|

FriendFeed FriendFeed

|

follow us on twitter Twitter

|

 Rss Feed

|

Favorites Add to Favorites

Wednesday, August 26, 2009

Test your Website in different Screen Resolutions in one place

Experts says that when you are publishing a website for viewers, you should optimize the web pages for 1024×768 resolution as it is still the most common size. So you must always keep in mind when you are designing a website, make sure that the layout should be good and readable in all the resolutions.

Have you ever wondered how your website appears to a visitor who might be using a different screen resolution?

Tried of changing your resolution each and every time when you are making changes?

Here is a simple way to check your web page in all the resolution in one place. Viewlike.us is the site you are looking far.

Just type the address of your web page and the tool will show you how that page will look like in different screen resolutions. You can test the layout using most common resolutions like 800×600, 1024×768 or even the iPhone and Wii browser.

Labels: ,

Read more...

Wednesday, August 12, 2009

Create gradient buttons using css

Creating a glossy gradient button effect is easy to make in photoshop. But for example, in your site you want ten buttons to be created. So what you will do, as of all we will be creating 10 different button in photoshop.

But all of these button will make your page weight of having 10 request to the site. So here is a simple trick how to create different buttons with single transparent image.

Follow this simple steps... Download the png file to have the gradient button. And copy the HTML and CSS code. So you will not be creating different image, just this png image will do the magic.

HTML:
<a href="#" class="btn ovrlay ">Super Awesome Button</a>

CSS:
.btn{font:13px arial;color:#fff;text-decoration:none;}
.btn:hover{background:#630030;}
.ovrlay{background:#A9014B url(btn-overlay.png) repeat-x;padding:5px 10px 6px;position:relative;}
.btn{background-color:#E33100;border:1px solid #7c1f06}

Just change the color of the .btn class, similarly you can have different n number of buttons by just class....

Before Gradient effect


After Gradient Effect


PNG Transparent Image

Just copy the above png image...

Note:
Do not forget to put png hack for ie6.

Labels: , ,

Read more...

Thursday, August 6, 2009

Convert images to vector formate

Designers used to take images from a famous image selling website for their site to be used. But at some point they also need vector based images to be used such as for logos, header images etc to give a clarity picture.

These vector images can be resized to any size so that the quality of the image will not get damaged. But converting an image to vector formate might be costlier. So what to do? where to go?

Here is a simple solution to convert your image to vector images. Vector Magic.com is a free online image to vector Convert site. Easily convert bitmap images to clean vector art.

Convert bitmap images like JPEGs, GIFs and PNGs to the crisp, clean, scalable vector art of EPS, SVG, and PDF with the world's best auto-tracing software.

Upload the image to be traced and within seconds you will get the image converted to vector format. You can also edit the configuration such as details, colors etc. But the only worry is they leave a water mark of their website at the bottom of the image. I think the designer know what to do with it!

They also provide a desktop version for trail, where you can download and install it in your pc. Then you can work on it. The desktop version also contains the background remover which is not available in online version.

If you want to convert many images to vector, you can go for the trail version and if you are interested you can buy the software. Because i think it gives a better quality and clarity vector images.

And also they provide hand tracing, where you can order for images to be converted and they will do it for you.

Labels:

Read more...

Monday, August 3, 2009

Center align a div horizontally and bottom of the page

There is an easy way to have the div position to the left or right to the screen with the use of fixed property. But how do you make a div horizontally center aligned and always be at the bottom of the page?

This will be of great useful if you want to make any popup div for display important messages or take any surveys etc. So here is a simple trick to show the content of a div horizontally aligned and always be at the bottom of the page...

HTML:
<div class="parent">
<div class="child">
Content here
</div>
</div>

CSS:
.parent{
position:fixed;
bottom:0px;
width:100%; //width should be 100%
}
.child{
width:300px; //min width should give to center the div.
margin:0px auto; //here it will make center
}

Position fixed will support modern browser including ie7, but for ie6 you have to use microsoft expressions to render the page as position fixed, as it will render wrongly. If you find any solutions without using expression in ie6, please explain use which will be helpful to others.

Labels: ,

Read more...