ZENVERSE » css http://zenverse.net Design and Web Development Mon, 26 Jul 2010 13:01:56 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Preload Multiple Images using CSS for Smooth & Instant Rollover Effect http://zenverse.net/preload-multiple-images-using-css-for-rollover-hover/ http://zenverse.net/preload-multiple-images-using-css-for-rollover-hover/#comments Tue, 30 Jun 2009 11:33:30 +0000 zen http://zenverse.net/?p=304 To improve your website’s design or user experience, you might need to preload some images for smooth hover or rollover. Instead of using javascript to preload the images, we can do that using CSS.

1. A container that hold the images to be preloaded

The HTML :

?View Code HTML
....
<body>
<div class="preload">
<img src="IMAGE_TO_PRELOAD_1" />
<img src="IMAGE_TO_PRELOAD_2" />
<img src="IMAGE_TO_PRELOAD_3" />
</div>
...
...

The CSS:

?View Code CSS
.preload {
position:absolute;
top:0px;
left:0px;
width:1px;
height:1px;
visibility:hidden;
overflow:hidden;
}

EXPLAINATION

  • We place the container after <body> and assign an absolute position to it because usually there will not be anything at that position.
  • We make the container 1 pixel width and height so that visitors cannot see it.
  • Besides, we need to set its overflow to hidden so that the overflow wouldn’t be visible.
  • Lastly, change its visibility to hidden so that the container is invisible (but it is still there and most importantly it loads)

 

2. Demo & Rollover Code

Demo:

The Code:

?View Code HTML
<div style="position:absolute;top:0px;left:0px;width:1px;height:1px;visibility:hidden;overflow:hidden;">
<img src="http://zenverse.net/wp-content/uploads/2009/06/csshover_2.jpg" /></div>
 
<img src="http://zenverse.net/wp-content/uploads/2009/06/csshover_1.jpg" onmouseout="this.src='http://zenverse.net/wp-content/uploads/2009/06/csshover_1.jpg'" onmouseover="this.src='http://zenverse.net/wp-content/uploads/2009/06/csshover_2.jpg'" />
]]> http://zenverse.net/preload-multiple-images-using-css-for-rollover-hover/feed/ 4 Create a Fancy Search Box using CSS http://zenverse.net/create-a-fancy-search-box-using-css/ http://zenverse.net/create-a-fancy-search-box-using-css/#comments Mon, 08 Jun 2009 09:14:39 +0000 zen http://zenverse.net/?p=100 Nowadays, most websites come with a search box to improve surfing experience. To make your website looks good, beside having a nice looking theme, you would need a fancy search box to replace the classic ones.

Let’s start

1. Design your own search box


In this example, I will use this as my search box.

2. Crop it out

Make sure the background color outside the search box is the same as your design. Now crop the whole search box out.

result:

3. Create a blank image as submit button


The picture above explained all.

4. HTML codes for the search box

?View Code HTML
<div id="searchwrapper"><form action="">
<input type="text" class="searchbox" name="s" value="" />
<input type="image" src="THE_BLANK_SUBMIT_BUTTON_IMAGE" class="searchbox_submit" value="" />
</form>
</div>

Replace the “THE_BLANK_SUBMIT_BUTTON_IMAGE” with the image at step 3.

5. CSS codes for my search box

?View Code CSS
#searchwrapper {
width:310px; /*follow your image's size*/
height:40px;/*follow your image's size*/
background-image:url(THE_SEARCH_BOX_IMAGE);
background-repeat:no-repeat; /*important*/
padding:0px;
margin:0px;
position:relative; /*important*/
}
 
#searchwrapper form { display:inline ; }
 
.searchbox {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:4px;
left:9px;
width:256px;
height:28px;
}
 
.searchbox_submit {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:4px;
left:265px;
width:32px;
height:28px;
}

Basically what’s going on :
#searchwrapper wrap the whole search box, carrying the whole search box image as its background image.
.searchbox is the text area to enter search keyword, given a transparent background and no border.
.searchbox_submit is the submit button, also given a transparent background and no border.

NOTE:
Both .searchbox and .searchbox_submit have been given an absolute position, you should modify their position, width and height according to your own search box.

That’s it.

Feel free to reply here :)

]]> http://zenverse.net/create-a-fancy-search-box-using-css/feed/ 18