Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Cropping & Transformation with CSS sprites

In this article we will discuss about background cropping and transformation in css sprites.

The CSS image sprites are a way to reduce the number of HTTP requests made for image resources referenced by our site. Pictures are combined into one larger image at defined X and Y coordinates. The background-position CSS property can then be used to shift the visible area to the required component image . You know, they are a quite well-established method and have managed to become common practice in Web improvement. Of course, CSS sprites are not always necessary but you can use it for general purpose. This method can be very effective for improving site presentation, particularly in situations where many small descriptions, such as menu icons, are used. The Yahoo abode page, for example, employs the technique for exactly this.

The CSS sprites are a great way to improve the loading speed of our web pages. One of the troubles you might face with sprites is how to deal with cases when the contextual repeats. The rule is attractive simple: if you want the background to repeat vertically (top to bottom), place the images in the sprite straight (left to right) and make sure the individual images in the sprite have the identical height. For the opposite case: when you want to repeat horizontally, sprite upright.

If you want to use more div, you can do like this way. You have three divs and you want to repeat their background vertically, so that the background takes the whole elevation of the div, according to the content.

Singe image sprite Example

Figure 1: Singe image sprite Example

Listing 1: Image sprite

div {
background-image:url(spritesample.png);
background-repeat: repeat-y;
width: 180px;
padding: 10px;
margin: 20px;
float: left;
    }
 #mycss {
background-position: 0px;
    }
    #mycss2 {
background-position: -600px;
    }
    #mycss3 {
background-position: -600px;
    }

Every image is 250px wide. Because of the 2x20px edge left and right, the width is 180px (=200 - 20 - 20)

The tree divs have IDs: mycss, mycss2, mycss3

You know that the image Sprites is a very good way to feed your application some images. Essentially, it consists of combining a set of images in a larger one and then just caching it. When you need one of the little images, all you have to know are the coordinates of it on the large one. With this system, you just need to load one image for the entire submission and reuse it, in its place of loading every image at a time.

Background image cropping:

The background image cropping can be emulated in modern browsers using only CSS 2.2. The standard behind a pseudo background-crop is to apply a background-image to a pseudo-element rather than the building block itself. An example would be to crop an image to display in the contextual. Another would be to crop an image sprite to display icons on the side of text with links. By using this step, you can add Background image cropping on your web based pages.

This below example shows how to crop icons that are part of a dense image sprite that uses an 18px × 18px grid. It uses a simple list and specifies a class for each type of action.

Listing 2: Background image cropping

<ul class="actions">
<li class="save"><a href="#">Save it</a></li>
<li class="delete"><a href="#">Delete it</a></li>
<li class="share"><a href="#">Share it</a></li>
<li class="comment"><a href="#">Comment It</a></li>
</ul>

Some styling can be applied to present this list in whatever way we want. From that base, a pseudo-element can be created and then treated as you would an empty, inline DOM building block.

In this case, then: before pseudo-element is used and sized to match the sprite’s grid unit. It could be sized to whatever magnitude is required to match a section of the sprite that needs to be cropped.

Background image cropping

Figure 2: Background image cropping

In quite a lot of cases, using pseudo-elements may have advantages over existing; option techniques because it combines their strengths and avoids some of their weaknesses. Google, Face book, and Twitter all make use of empty DOM fundamentals to crop dense sprites and display icons next to definite links in their borders. The alternative is not to use empty elements but be mandatory into using multiple images and/or to design sub-optimal image sprites that have their constituent images spaced out.

Pseudo-elements can be used in much the same way as empty DOM rudiments. This at the same time eliminates the need for presentational HTML and doesn’t depend so heavily on an image sprite’s drawing. Using pseudo-elements for this purpose does have its own drawback - a lack of support in legacy browsers like IE7 and IE8. Though, the technique will progressively enhance capable browsers while leaving a perfectly usable experience for incapable browsers. Here some more example code: cropping a sprite:

Listing 3: Background image cropping 2

.actions a:before {
content:"";
float:left;
width:18px;
height:18px;
margin:0 5px 0 0;
background:url(sprite.png);
}
.save a:before {background-position:0 -18px;}
.delete a:before {background-position:0 -36px;}
.share a:before {background-position:0 -46px;}
.comment a:before {background-position:0 -62px;}

 

This example shows how to crop icons that are part of a dense image sprite that uses an 18px × 18px grid. It uses a simple list and specifies a class for each type of action. Providing hovers, focus, action, and “saved” states are just a case of declaring the correct background position in each case.

Listing 4: Save hover

.save a: hover:before,
.save a:focus:before,
.save a: active: before {background-position:-18px -18px;}

.saved a:before {background-position:-32px -18px;}

Background-transform by CSS image sprites:

Some combining pseudo-elements and transforms makes it possible to emulate the backgroundalters. A pseudo background-transform can be used to replace, scale, and skew background images and sprites. There is no application for background-image converts, so a pseudo-element hack is one way to emulate it.

Some example: rotating a background image:

The example of cropping sprites can be further developed by reducing the number of different images used in the sprite. Rather than applying converts to images in a graphics bundle, they can be applied in the CSS.

Listing 5: Background-transform

.accordion a:before {
content:"";
float:left;
width:18px;
height:18px;
margin:0 5px 0 0;
background:url(sprite.png) no-repeat 0 0;
}

.accordion.open a:before {
   -webkit-transform:rotate(180deg);
   -moz-transform:rotate(180deg);
   -ms-transform:rotate(180deg);
   -o-transform:rotate(180deg);
transform:rotate(180deg);
}
Background-transform

Figure 3: Background-transform

It involves setting the contextual image on a pseudo-element which is then located behind the content layer of an element using unqualified positioning and z-index.

You need to think positively about the CSS image sprites. All of these things help you lot to Combine Images into CSS Sprites. Combining large pictures into CSS gives boost to set speed and provides user sociable experience. By reading the article you will get a solid idea about the CSS image sprites and you will able to use it in your web layout.

Hope you liked it.



My main area of specialization is Java and J2EE. I have worked on many international projects like Recorders,Websites,Crawlers etc.Also i am an Oracle Certified java professional as well as DB2 certified

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login