-
Notifications
You must be signed in to change notification settings - Fork 3
/
sprite-tutorial.html
23 lines (21 loc) · 2.71 KB
/
sprite-tutorial.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
<title>Sprite tutorial</title>
<body>
<h1>Tutorial</h1>
<p>Suppose you have your sprite-image (that of course consists of logically measured items!) called sprite.png that contains several blocks of icons.</p>
<p>1. Make sure that every block of icons has the icons appearing from left to right, with equal width/height, preferrably avoiding spacing. Optionally have your mouseovers and stuff on additional lines of icons below the original ones.</p>
<p>2. Define generic SPRITE-block: (the .sprite-function can now be used to display anything from your sprite, not just the icons) </p>
<blockquote class="posterous_short_quote">.sprite(@x, @y)<br />{<br /> background-image: url(sprite.png);<br /> background-repeat: no-repeat;<br /> background-position: @x @y;<br />}</blockquote>
<p>3. Define generic ICON-block:</p>
<blockquote class="posterous_short_quote">.icon(@width, @height, @x: 0px, @y: 0px)<br />{<br /> .sprite(@x, @y);<br /> display: block;<br /> width: @width;<br /> height: @height;<br />}</blockquote>
<p>4. For every icon-type, define a HELPER-block (my-icons are 50px x 100px and the set of my-icons is positioned at 200px x 400px in sprite.png):</p>
<blockquote class="posterous_short_quote">.icon-my-icon-helper(@pos, @shift: 0)<br />{<br /> .icon(50px, 100px, -1 * (400px + 100px * @shift), -1 * (200px + 50px * @pos));<br />}</blockquote>
<p>5. Define the actual ICON-block, specifying the position for every named icon, and optionally specifying your hovers:</p>
<blockquote class="posterous_medium_quote">.icon-my-icon<br />{<br /> .icon-my-icon-helper(0);<br /> &.first<br /> {<br /> .icon-my-icon-helper(0);<br /> &:hover<br /> {<br /> .icon-my-icon-helper(0, 1);<br /> }<br /> }<br /> &.second<br /> {<br /> .icon-my-icon-helper(1);<br /> &:hover<br /> {<br /> .icon-my-icon-helper(1, 1);<br /> }<br /> }<br />}</blockquote>
<p>(You would wish for a cleaner specification of all the hovers at once, but because of most browsers lacking the background-position-x and background-position-y feature, that seems impossible, ideas welcome though!!!).</p>
<p>6. Now, for whatever icon you want, just write some HTML like this: [a class="my-icon first"]My First Icon[/a], you're all set!</p>
<p><strong>Cheers!</strong></p>
<p><em>(For any questions or comments, please tweet at @changertech or mail me at ruben.stolk[at]changer.in, also contact me if you're interested in a solid job offering for front-end developer in Pune!)</em></p>
</body>
</html>