Geek asks and answers

Is there a CSS sprite generator that also provides settings?

If it is already gone, I would really appreciate it if someone could give some instructions on how to make a mesh and non-mesh CSS sprite yourself. Preferably using possibly some kind of CSS sprite generator in the process.

Related topic: http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/

Thank you all in advance!

+5
source share
5 answers

Method 1

Mixin here , in order to achieve this with the help of Compass

Method 2

  • , "" , , . (, 23 41 , 46 28 ).
  • http://spritegen.website-performance.org/ -. , , 25 . " ": 25 50 . sprite.png spritex2.png

  • css - :

    .#spriteA,spriteB{
     background-image: url(sprite.png);
     width:25px;
     height:25px;
 }        

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 240dpi) {
.#spriteA,spriteB{
     background-image: url(spriteX2.png);
     width:25px;
     height:25px;
 }
}

.spriteA{ background-position: 0 50%; }
.spriteB{ background-position: -31px 50%; }

, (50%) , .

+5

- low hiDef: cssspritegenerator.net

webp, , @1-size ;)

+2

, -. grunt Sprite Smith .

http://www.retinaspritegenerator.com . , Sprite Smith.

+1

, , , .

smartsprites, . CSS , , , , CSS .

, , , . , !

0

There are some amazing spina sprit generators. I recently used a couple of them that I personally love. 1. Sprites 2. Sprite field 3. Retina Sprites 4. Zero Sprites 5. Sprite generator

As mentioned in the previous answer, Sprite Smith is another amazing generator.

0
source

More articles:


All Articles