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
The aim is to reduce HTTP requests. In addition, sometimes the compressed sprite will weigh less than the original images. Recently I had a website with a lot of transparent gradients (white to trans, grey to trans) and some black and white on transparent images. By putting them all in a sprite and reducing the … Read more
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
Yes, if you use Font Awesome with Bootstrap! The icons are slightly different, but there are more of them, they look great at any size, and you can change the colors of them. Basically the icons are fonts and you can change the color of them just with the CSS color property. Integration instructions are … Read more
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.
After playing around with different transparent GIFs, some are unstable and cause CSS glitches. For example, if you have an <img> and you use the tiniest transparent GIF possible, it works fine, however, if you then want your transparent GIF to have a background-image, then this is impossible. For some reason, some GIFs such as … Read more
2021 Update: Background size is supported by most major browser but if your mobile browsers doesn’t support it use zoom. You could use background-size, as its supported by most browsers (but not all http://caniuse.com/#search=background-size) background-size : 150% 150%; Or You can use a combo of zoom for webkit/blink/ie and transform:scale for Mozilla(-moz-) and old Opera(-o-) … Read more