css-sprites

Compass: generate Sprites, plus width / height on each images in the sprite

by

This works: @include all-<map>-sprites(true); But you may want to consider the documented way of using configuration variables: http://compass-style.org/help/tutorials/spriting/ You just specify the config variable before the import. In your case: $ico-sprite-dimensions: true; @import “ico/*png”. @include all-ico-sprites; Sending true to the all include works, but as it’s undocumented, it would seem that configuration variables are the … Read more

Using sprites with IMG tag?

by

Using sprites doesn’t necessarily mean you need to define them in css backgrounds. You can also use IMG tag sprites, to do so you need basically trim your image. There are two good articles explaining that technique: http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp http://www.artzstudio.com/2010/04/img-sprites-high-contrast/ Both CSS and IMG methods sure have their own benefits, so you need to figure out … Read more

Clip/Crop background-image with CSS

by

You can put the graphic in a pseudo-element with its own dimensional context: #graphic { position: relative; width: 200px; height: 100px; } #graphic::before { position: absolute; content: ”; z-index: -1; width: 200px; height: 50px; background-image: url(image.jpg); } #graphic { width: 200px; height: 100px; position: relative; } #graphic::before { content: ”; position: absolute; width: 200px; height: … Read more

Tools to make CSS sprites? [closed]

by

Instant Sprite is an in-browser CSS sprite generator I’m working on. It’s really fast, but doesn’t have quite as many features as some of the others. It currently only works in Firefox or Chrome, since it uses JavaScript FileReader and HTML Canvas to generate the sprites inside the web browser without uploads.

tech