Cheesetoast » sprite http://www.cheesetoast.co.uk Brain Food for Web Developers Mon, 07 Jul 2014 23:18:22 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.10 Pseudo Element CSS Sprites http://www.cheesetoast.co.uk/pseudo-element-css-sprites/ http://www.cheesetoast.co.uk/pseudo-element-css-sprites/#comments Thu, 19 Dec 2013 22:46:58 +0000 http://www.cheesetoast.co.uk/?p=1226 CSS sprites are a great way to cut down on page size and increase website performance. It may not always seem like a lot but every bit helps and the less http requests made the better. Ideally, you want to keep decoration separate from the markup and that's where CSS pseudo elements come in, specifically :before and :after.
Now we have a way of combining spiriting with pseudo elements. Continue reading

The post Pseudo Element CSS Sprites appeared first on Cheesetoast.

]]>
CSS sprites are a great way to cut down on page size and increase website performance. It may not always seem like a lot but every bit helps and the less http requests made the better.

If you aren’t sure what CSS Sprites are you can read about what W3 Schools has to say about them.

Sprites are quite often used for things like menu icons or title decoration. The problem is that adding an image or even a <span> element solely for the purpose of adding an icon isn’t exactly very semantic. Ideally, you want to keep decoration separate from the markup and that’s where CSS pseudo elements come in, specifically :before and :after. These pseudo elements┬ácan be used to add content to existing markup from the CSS, keeping things clean.

Now we have a way of combining spiriting with pseudo elements. Take this markup for example:

<h2 class="article-heading">Man judo chops off own arm</h2>

If we wanted to add a sprite to the left of the header we would add the following CSS:

.article-heading:before {

   // Set content to blank, otherwise nothing will show.
   content: "";
   // Set the dimensions of the icon
   width: 35px;
   height: 35px;

   float: left; // Float left of the header
   // Use the background offset to select the sprite you want
   background: url(../images/sprite.png) -35px 0 no-repeat;

   // Add some spacing
   margin-right: 10px;

   float: left;
}

You can also use absolute positioning if you want more control over where the sprite ends up:


.article-heading { 
   position: relative;
   padding: 50px;
}

.article-heading:before {

   // Set content to blank, otherwise nothing will show.
   content: "";

   // Set the dimensions of the icon
   width: 35px;
   height: 35px;

   // Use the background offset to select the sprite you want
   background: url(../images/sprite.png) -35px 0 no-repeat;

   // Adjust positioning
   position: absolute;
   left: 15px;
   top: 10px;
}

Here it is on codepen: Pseudo Element CSS Sprites Demo

The post Pseudo Element CSS Sprites appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/pseudo-element-css-sprites/feed/ 2