eyelearn.org

applied art for the web

Sprite setup

Using the previously created icon, let's create a SVG sprite with CSS.

#1: sprite dimensions:
setup of artboard + guides

  1. set up new folder for the sprite
  2. make copy of icon file and open in vector app
  3. set up one new artboard for the sprite visuals:
    512px remains the set width - the height will triple to accommodate the icon 3 times: width: 512px; height 1536px;
  4. copy icon onto new layer and move onto new artboard (lock layers no needed for edit)
  5. create a 512x512 square with coloured stroke to use as alignment guides; copy two times and align evenly with artboard; name layer 'guides' and lock

#2: sprite visuals:
editing visuals + save SVG/PNG

  1. add a circular outline and scale/align icon graphic inside
  2. make a copy of both, align centre of the 2nd square; note: use 'align to key object' option.
  3. edit 2nd icon for changes on roll-over; optimise as always (expand stroke/merge/simplify path)
  4. make one final copy for the 3rd state; edit to suite.
  5. export as PNG (for fallback) and save as SVG; optimise the code (SVGOMG) and save final version into your webfolder

#3: CSS sprite:
CSS roll-over using SVG + PNG fallback

  1. download the empty HTML page, or create your own;
    setup requires one custom link.
  2. set type and layout for link
  3. set background colour + add PNG fallback
  4. add SVG background image, demo and notes
  5. remove background repeat and set size to 256px
  6. adjust padding to position text and add border radius
  7. add transitions to link element, set as required
    NOTE: transitions should be set specifically and not affect background-position to avoid 'scrolling' of visuals
  8. edit alignments for visual appearance
  9. add changes to :hover: adjusting colour and radius and shifting the background-position vertically to reveal the 2nd visual
  10. add changes to :active + :focus: adjusting colour and radius and shifting the background-position vertically to reveal the 3rd visual
  11. test - tweak - and done.
  1. demo and notes
  2. download the empty HTML page
sprite overview