Create metallic web buttons in photoshop

March 24th, 2008

While surfing you often see the attractive metallic buttons on the websites. Now I am going to explain the procedure to create the metallic button with round corners in adobe photoshop.
Metallic Web Button

Step 1: Open photoshop and start a new document of 300×100 pixels and 72 pixels/inch.web button

Step 2: Insert new layer then select rounded rectangle tool, set radius 4px and draw a rectangle as shown below(With any color). Read the rest of this entry »

Change style of submit button in html/CSS

March 22nd, 2008

It is very common practice for webmasters to change default style of submit button in html forms. It is easy to change default background image of button in firefox using CSS and it is equally easy in case of internet explorer but a bit tricky.

Here is the code to change style of button including background image with multi browser compatibility.

. submit-button {

background-color:transparent;

background-image:url(images/button.gif);

border:1px solid #CCCCCC;

font:14px Arial, Helvetica, sans-serif;

color:#FF3333;

width:100px;

height:30px;

}

background-color:transparent is required to show background image in case of internet explorer, it is not required in case of firefox.

Create equal height columns using CSS

March 21st, 2008

Here I am going to explain you the steps to create equal height columns without using image.

1. First of all you need to create a container and two columns inside the container. Here is the code:

<div id=”container”>

<div class=”leftcol”>This is column 1</div>

<div class=”rightcol”>This is column 2</div>

</div>

____________________________________________

Now make overflow of container hidden in style sheet Read the rest of this entry »

Create Three column layout using div and CSS

March 19th, 2008

In this tutorial you will learn to create a three column layout using css, and divs
Here is the sample sketch of layout.

Sketch layout

1. First of all we need to create a container for page contents.

<div id=”container”> </div>

2. Now create three partitions of it by creating three divs(header, content and footer) inside the container tag.

3. Finally add three more divs inside the content part. We will use these three divs to create columns in content area.

Html code for above code is: Read the rest of this entry »

Alignment using float property in css

March 19th, 2008

In this tutorial you will learn the use of float property in css. We will create two unordered lists and align them side by side. Write the following code in your html page. You can use any text editor or software like dreamweaver for that.

<div id=”test”>
<div class=”lefty”>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</div>
<div class=”righty”>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</div>
</div>
Now make these entries to your css file: Read the rest of this entry »