Jump to content

  • Free consultations and support
  • Live chatClick Here for Live Chat
  • Call ico 1888-906-1888
    Phone support: Open

    Ready for your call :)

    Our business hours:

    Mon — Fri, 2am — 8pm (EST)

    US & EU support teams

    Phone support: Closed

    We are back in: 1h 20m

    Our business hours:

    Mon — Fri, 2am — 8pm (EST)

    US & EU support teams


Replacing Images with CSS Sprites

css sprites. replace images

  • Please log in to reply
&nsbp;

#1 Salwa

Salwa

    Senior Member

  • Designer
  • 181 posts

Posted 02 January 2014 - 02:19 AM

To replace images with CSS Sprites
1. Make a CSS class for every image in your sprite.png
2. add an empty division for every CSS class.
3. Replace the actual image reference with the new sprite reference.
Ex
.spritetwith {
background: url(“sprite.png”) 0 0;
height: 25px;
width: 50px;
}
.spritebuff {
background: url(“sprite.png”) -50px 0;
height: 25px;
width: 50px;
}
Ex. of the empty HTML Div
<div class=”spritetwith”></div>
<div class=”spritebuff”></div>

#2 jmaya

jmaya

    Member

  • Designer
  • 41 posts

Posted 04 January 2014 - 09:41 PM

Thanks!

#3 sa7ary

sa7ary

    Junior Member

  • Designer
  • 4 posts

Posted 16 January 2014 - 05:55 AM

thanks a lot css sprites is very important in web-based mobile applications

#4 ptu12

ptu12

    Senior Member

  • Designer
  • 238 posts

Posted 18 February 2014 - 08:23 PM

I agree with Sa7ary. Thank for sharing this tip, Salva!

#5 jfoll

jfoll

    Junior Member

  • Designer
  • 16 posts

Posted 23 May 2014 - 12:18 AM

easy-peasy




1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users