Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Shrinking a sprite on the fly

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #274464
    csdude55
    Participant

    I have 2 sprites set up for emojis, where one is just a larger version of the original emojis so that the user can mouse over the small emoji and see it bigger.

    It originally looked like this:

    [data-emoji] {
      background:url('//example.com/sprite_emoticon.png');
      width: 19px;
      height: 19px
    }
    
    [data-emoji_large] {
      background:url('//example/sprite_emoticon_large.png');
      width: 40px;
      height: 40px;
      display: none
    }
    
    [data-emoji='01'],
    [data-emoji_large='01'] { background-position: 0 0 }
    
    ...
    
    [data-emoji='56'] { background-position: 0 -836px }
    [data-emoji_large='56'] { background-position: 0 -1804px }
    

    But since each data-emoji is just a smaller version of the same data-emoji_large, I feel like I’m wasting bandwidth by loading 2 images and doubling down on the CSS… why not just load the larger version, then use background-size to make the smaller one?

    How do I modify each of the [data-emoji=’xx’] elements to be the smaller version of the original?

    I’ve gotten this far:

    [data-emoji], [data-emoji_large] {
      background:url('//example.com/sprite_emoticon_large.png');
    }
    
    [data-emoji] {
      width: 19px;
      height: 19px;
      background-size: contain
    }
    
    [data-emoji_large] {
      width: 40px;
      height: 40px;
      display: none
    }
    
    // I thought this would be the next section
    [data-emoji='56'],
    [data-emoji_large='56'] { background-position: 0 -1804px }
    

    but the problem is that [data-emoji=’56’] takes the entire sprite_emoticon_large.png and shrinks it down to 19×19, instead of just the 40×40 section that was defined by [data-emoji_large]. Which makes sense, really, because at this point [data-emoji] doesn’t “know” that the original is 40×40.

    So what’s the right way to do it? Or is it even possible?

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.