CSS Tricks / discoverweb.info

Archive for the ‘CSS Tricks’ Category

Preloading Multiple Images

To improve website performance we need to preloaded the images which used in hover and rollover effects

Instead of using jquery or javascript to preload the images, we can do that using CSS.

The following Example show you how to preload all images

<html>
<title> preloading Images</title>
<style>
.load_images
 {   display : none; }
<body>
<div class="load_images">
/* You can Load Multiple no images like this */
<img src="preloaded_image1.jpg" />
<img src="preloaded_image2.jpg" />
<img src="preloaded_image3.jpg" />
<img src="preloaded_image4.jpg" />
<img src="preloaded_image5.jpg" />
</div>
</body>
</html>

The “load_images” class will load and hide all images., So the roll over images will load smoothly.

Posted in CSS Tricks

Comments Off

Pseudo-selectors like :hover, :focus and :active will become more widely used in website designing. One common problem is the rollover image getting downloads only when that event fire., but all the necessary images must be downloaded already, Otherwise the rollover will behave badly.

So here we are going to discuss two methods to handles rollover image loading

Fast Rollovers Without Preload

In this method we are going to use single background image for both rollover and non-rollover images. which means combine both images in to a single image, and then position using the background position css property (CSS Sprite technique). So instead of changing the image when mouse over the element we simply change the background position to reveal the rollover image.

CSS Image preloaded method

Downloading the image before it is required for the rollover. This can be done by applying the image as a background to an element, and then hiding it using the background-position property. The image will then be downloaded but will not be displayed. Then, when the rollover is activated, it will operate smoothly and instantly.

So you need to create one class with the background image property., Use the rollover image as a background image and hide that element by using background position property as seen below.

.load_image
 {
     background-image: url("rollover-image.jpg");
     background-repeat: no-repeat;
     background-position: -1000px -1000px;
 }

<div class="load_image"></div>

Your rollover image will be loaded while the page was loading. When a rollover is then activated, the image will already be available to the browser and the effect will be instant.

Click here for “Multiple images preload css”

Posted in CSS Tricks

Comments Off

css text highlight

Using CSS you can highlighting the text,

Example for text highlight using CSS

This text is highlighted by using the following css properties

.texthighlight
{
   background-color:#3399ff;
   color:#fff;
   padding:2px;
}

Posted in CSS Tricks

Comments Off

How to remove the dotted outline of the Anchor tag

Remove outline for anchor tag

a { outline : none; }

Remove outline from image link

a img {outline : none;}

Remove border from image link

img {border : 0;}

Remove Outline from image link

Posted in CSS Tricks

No Comments »

Archive for the ‘CSS Tricks’ Category

Preloading Multiple Images

To improve website performance we need to preloaded the images which used in hover and rollover effects

The following Example show you how to preload all images

CSS Image Preload

Fast Rollovers Without Preload

CSS Image preloaded method

css text highlight

Example for text highlight using CSS

Remove the outline using css

How to remove the dotted outline of the Anchor tag

Remove outline for anchor tag

Remove outline from image link

Remove border from image link

Recent Posts

Categories