Home Forums Pro tips Share your tips! Building CSS-like image sprites

  • Author
  • #6428 Score: 1
    22 pts

    CSS image sprites let designers use one image file contain two apparent bitmaps. With CSS, the image is then cropped to only show part of its full contents. Upon interacting with the image, usually on hover, users see the image change by moving the graphics within a cropped group.

    While sprites might not save many kilobytes, they do reduce HTTP requests, making pages load slightly faster. It’s quick, it’s efficient, and it’s been a staple of computing for decades.

    Here’s how you can simulate image sprites without using a multistate element (MSE) in UXPin.

    1. Stack two icons or images adjacent to each other, one on top of the other. This example uses icons that are each 32 pixels tall.
    2. Group them. In this case that creates a group 64 pixels tall.
    3. Crop the group to half its height, so only one image or icon is visible.
    4. Add an interaction to the group: on hover, move both of the icons –32px vertically.

    And that’s it. If you need a simple icon swap, you may find this easier to manipulate than a full MSE.

    You must be logged in to view attached files.

You must be logged in to reply to this topic. Click here to login or register