Articles Tagged
sprites
Freak Flags
I don’t see image sprites used that much anymore, but it’s still a good technique for reducing downloaded decorative image assets when you have multiple on a page. The big idea is combining all the graphics into one and then …
A Snippet to See all SVGs in a Sprite
I think of an SVG sprite as this:
<svg display="none">
<symbol id="icon-one"> ... </symbol><symbol>
</symbol><symbol id="icon-two"> ... </symbol><symbol>
</symbol><symbol id="icon-three"> ... </symbol><symbol>
</symbol></svg>
I was long a fan of that approach for icon systems (<use></use>
-ing them as needed), …
Musings on HTTP/2 and Bundling
HTTP/2 has been one of my areas of interest. In fact, I’ve written a few articles about it just in the last year. In one of those articles I made this unchecked assertion:
…If the user is on HTTP/2: You’ll
Basic Link Rollover as CSS Sprite
a {
background: url(sprite.png) no-repeat;
display: block;
height: 30px;
width: 250px;
}
a:hover {
background-position: 0 -30px;
}
The set height and width ensure only a portion of the sprite.png graphic is shown. The rollover shifts the position of the …
Need front-end development training?
Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.