HEMANT SONKER’S BLOG

January 13, 2009

CSS Sprites

Filed under: HTML, css — Hemant Sonker @ 5:28 pm

CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.

So how it is done?

This technique can be very effective for improving site performance, particularly in situations where many small images, such as menu icons, are used. The Yahoo page or msn home page, for example, employs this technique.

Let’s start by showing the traditional way of making the list as navigators. Notice in the CSS below how the anchor tag does not get a background-image, but each individual class does.

#nav li a {background:none no-repeat left center}
#nav li a.item1 {background-image:url(‘../img/image1.gif’)}
#nav li a:hover.item1 {background-image:url(‘../img/image1_over.gif’)}
#nav li a.item2 {background-image:url(‘../img/image2.gif’)}
#nav li a:hover.item2 {background-image:url(‘../img/image2_over.gif’)}
.
.
.and so on

example1before

Using CSS Sprites, we can really lighten this example up. Instead of having ten separate images for the buttons (five default states and five rollover states), we can literally combine all of them into one big long image. I won’t go into great detail about how this is done, I’ll just give you a basic walkthrough. Create a new image that is as wide as your widest image and and as tall as the combined height of all your images plus X pixels, where X is the number of images you have. Now place you images into this new image, left aligned, one on top of the other with one pixel of white space in between.

Now check out by using css sprites example. Notice in the CSS that there is a single background-image applied to the anchor element itself, and the unique classes merely shift the background position with negative Y coordinates.

#nav li a {background-image:url(‘../img/image_nav.gif’)}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}
…

so on…..

example1after

We were able to reduce the number of HTTP-Requests by 9 and the total file size of the image(s) by 6.5 KB. That’s a pretty huge improvement for such a little example.

This was a small example which reduced this much size.Think about this doing on the whole website.

Please refer  Alistapart.com

too.

Fade Out Bottom

Filed under: HTML, css — Hemant Sonker @ 3:46 pm

This is a cool effect where the bottom of the page seems to fade out. The technique makes use of an fixed position div (bottom: 0px;) with a transparent PNG image and a high z-index value. There is also a fix in place for IE 6.Just what like at the bottom of facebook.

The source code for the html is:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Strict//EN”>

<head>
<title>Fade Out Bottom</title>

<link rel=”stylesheet” type=”text/css” href=”style.css” />

<!–[if lte IE 6]>

<style type=”text/css” media=”screen”>
#bottom_fade {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’bottom-fade.png’,sizingMethod=’scale’);
left: 0px;
height: 200px;
position: absolute;
bottom: -18px;
width: expression(document.body.clientWidth);
}
html, body {
height: 100%; overflow: auto;
}
</style>
<![endif]–>
</head>

<body>

<div id=”page_wrap”>

<h1>Fade Out Bottom</h1>

<br />

<p><strong>This is a cool effect where the bottom of the page seems to fade out. The technique makes use of an fixed position div (bottom: 0px;) with a transparent PNG image and a high z-index value. There is also a fix in place for IE 6.</strong></p><br />

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

<br />
<div id=”bottom_fade”><ul><li>abcd </li><li>abcd </li><li>abcd </li><li>abcd </li><li>abcd </li></ul></div>
</div>
</body>

</html>

The source code for  stule.css will be

* {
margin: 0;
padding: 0;
border: 0;
}

body {
font-family: “Lucida Grande”, Georgia, sans-serif;
font-size: 67.5%;
}

p {
font-size: 1.1em;
line-height: 1.6em;
}

#page_wrap {
width: 600px;
z-index: 1;
margin: 10px auto;
}

#bottom_fade {
width: 600px;
height: 50px;
z-index: 99;
position: fixed;
bottom: 0px;
background: url(“bottom-fade.png”) bottom center no-repeat;
}

#bottom_fade ul{list-style:none;display:block;margin-top:10px;}
#bottom_fade ul li{display:inline;padding:10px;}

Try this source code and change the background image as this is the faded one.

September 21, 2007

Scroll area with overflow in CSS

Filed under: css — Hemant Sonker @ 1:15 pm

Small Scrollable Areas

Scrollable areas on webpages has become increasingly popular after being used by some leading design communities on internet. Scroll areas can be done with a textarea or iframe tags, but a more frequent way of doing it is through using the abilities that already lies within HTML and CSS for any block element. A normal block element like <div> can be set to a certain height and width. What happens when the content of the element exceeds the size given to it?

Enter the CSS property overflow.

  • overflow: auto – This will insert a scrollbar – horizontal, vertical or both only if the content in the block requires it. For practical purposes, this is probably the most useful for creating a scrolling area.
  • overflow: scroll – This will will insert horizontal and vertical scrollbars. They will become active only if the content requires it.
  • overflow: visible – This will cause the block to expand to view the content.
  • overflow: hidden – This forces the block to only show content that fits in the block. Other content will be clipped and not hidden with no scrollbars.

for example

<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>scrolling</title>
<style type=”text/css”>
<!–
div.scroll {
height: 200px;
width: 300px;
overflow: auto;
border: 1px solid #666;
background-color: #ccc;
padding: 8px;
}
–>
</style>
</head>

<body>

<div class=”scroll”>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>
<span style=”color: red;”>This is red color</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>This is a normal paragraph.
<span style=”font-weight: bold; font-size: 22px;”>This is big bold text</span>
</p>
<p>This scrolling are can contain normal html like <a href=”#”>link</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div>

</body>

</html>
save this code and run.

Layer on layer with z-index (Layers)

Filed under: css — Hemant Sonker @ 12:26 pm

CSS operates in three dimensions – height, width and depth. . In this, we will learn how to let different elements become layers. In short, this means the order of which the elements overlap one another.

For that purpose, you can assign each element a number (z-index). The system is that an element with a higher number overlaps an element with a lower number.

Blog at WordPress.com.