Jprasads Info: May 2008

TeWallPack

Posted by jprasadsinfo at 12:23 AM

Download from Rapidshare
or
Download from Depositfiles

Aqua HD Wallpaper Pack

Posted by jprasadsinfo at 12:17 AM

Download from RapidShare or Depositfiles

CSS-Only Rollover Image Tutorial

Posted by jprasadsinfo at 5:07 PM

Forget using tons of Javascript and other crazy ways to create a simple image rollover.
Here is a simple CSS technique using one single image to create a nice rollover effect.

1. Start out with your image.

The top 32 pixels of the image will be the base and the bottom 32 pixels will be the rollover.

2. Setup Your Hyperlink

Button

Seems pretty straight forward?

3. Setup Your CSS

.mybutton {
display:block;
height:32px;
width:120px;
background:url(button.gif) no-repeat;
text-decoration:none;
}
.mybutton:hover {
background-position: 0px -32px;
}
.mybutton span {
position:absolute;
left:-999em;
}

We first setup the anchor as a block element. Give it the width of the image and half of the image’s height. Then set the image as the anchor’s background.

Next, we set the hover. By setting the background position at 0px on the horizontal and -32px on the vertical, we are pulling the image up half way, which reveals the bottom part of the image. (Our desired effect.)

We are setting the span as absolute and positioning it -999em to the left off the screen. So when CSS is disabled by the browser, anything in the span will up. Be sure to put any information that is on your button in the span block. This is great for usability and screen reader software.

4. Enjoy!

Button

Tweak as necessary for your needs

Make fancy buttons using CSS sliding doors technique

Posted by jprasadsinfo at 10:33 AM

This article will show you how to create fancy buttons using CSS sliding doors technique. It is much better to use this technique than to use image buttons because you can apply the style to any link and at the same time you don't have to create an image for each button. I posted this one on Morning Break weblog but due to its popularity I decided to publish it here.

What is sliding doors technique?

The technique is very simple. If we want to have a dynamic-width button, we have to find a way to stretch it horizontally. We will accomplish this if we create two background images that will define the button: one for the left side and one for the right side - like in the example below.

LEFT RIGHT

Smaller, right image will slide on the top of the larger, left image (that why it is called sliding doors). The more right image slides to the left, the narrower button will be and vice versa. The image below shows the technique.

Styling the button

First, let's take a look at the HTML elements that will simulate button. We have element within the element. Span element contains left, wider image and text. The width of the text will determine the size of the button.

<a class="button" href="#"><span>Submitspan>a>

Now let's take a look at the CSS code. We have a .button class that will be applied to element and .button span class that will be applied to element within element. We also have .button:hover span that will change the font style within element. And that's all. Simple, eh? The comments in the code below describes each element.

a.button {
    /* Sliding right image */
    background: transparent url('button_right.png') no-repeat scroll top right; 
display: block;
float: left;
height: 32px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
margin-right: 6px;
padding-right: 20px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
/* FONT PROPERTIES */
text-decoration: none;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}

a.button span {
/* Background left image */ 
background: transparent url('button_left.png') no-repeat;
display: block;
line-height: 22px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
padding: 7px 0 5px 18px;
}

a.button:hover span{
text-decoration:underline;
}