Graphic Design Notes

 Uncategorized  Comments Off on Graphic Design Notes
Mar 202013
 

Notes on Sprite

A:
display:block
Width (exacly to size of first image)
Height (exacly to size of first image)
background-position: 0 -180px; (x, y)
text-indent:-9999px;

A:hover
background-poisiont 0 -360px; (x, y)

Read Stephanie Rewis article on BG images.

box-sizing: border-box (if you add padding then it’s not calculalted as part of the total width
Padding

Negative margins – sometimes absoloute positioning might be better.

ul text-align:center

li display:inline

a display:inlin-block

 

http://bradfrostweb.com/

 Posted by at 2:32 pm