Cheesetoast » pseudo 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
CSS Paper Stack Effect http://www.cheesetoast.co.uk/css-paper-stack-effect-pseudo-pile-notes/ http://www.cheesetoast.co.uk/css-paper-stack-effect-pseudo-pile-notes/#comments Mon, 25 Mar 2013 20:45:28 +0000 http://www.cheesetoast.co.uk/?p=1108 This bit of CSS helps to add some decoration to a standard box area. Using the rotate effect we can make an area appear like a stack of paper notes. Continue reading

The post CSS Paper Stack Effect appeared first on Cheesetoast.

]]>
This bit of CSS helps to add some decoration to a standard box area. Using the rotate effect we can make an area appear like a stack of paper notes.

Box made to look like a stack of paper notes

View the demo at Codepen.

All we need to do for the HTML is to add a class to a standard div:

<div class="paper-stack">
   <h1>Notes</h1>
   <p>Paragraph</p>
</div>

Now the CSS. To add two extra pages to the box without using additional divs (which is not semantic) we use the pseudo elements :before and :after.

We start with the general styling that applies to all paper sheets.  We give the pages both inset and outset shadows to give the impression of depth:

.paper-stack, .paper-stack:before, .paper-stack:after
{
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 0 30px rgba(0,0,0,0.1),
                  1px 1px 3px rgba(0,0,0,0.2);
}

Now we’ll get more specific:

.paper-stack

{
position: relative;
width: 200px;
padding: 2em;
margin: 35px auto;
}

/* Setup height, width, rotation, etc. for both underlying papers */
.paper-stack:before, .paper-stack:after
{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: rotateZ(1deg);
-o-transform: rotate(1deg);
transform: rotateZ(1deg);
z-index: -1;
left: 10px;
top: 7px;
}

/* Tweak the lower paper note so that it sticks out further still */
.paper-stack:after
{
-webkit-transform: rotateZ(0.5deg);
-o-transform: rotate(0.5deg);
transform: rotateZ(0.5deg);
left: 5px;
top: 3px;
}

*/ Dress up the header a little */
.paper-stack h1
{
font-size: 1.8em;
font-weight: normal;
text-align: center;
padding: 0.2em 0;
margin: 0;
border-bottom: 2px solid #ddd;
}

.paper-stack p
{
text-align: left;
margin: 1.5em 0;
}

View the demo at Codepen.

Original article on SitePoint.

I tried playing around with CSS animations to make the pages shuffle out a little on hover but unfortunately the animation effects on pseudo elements like :before and :after are not well supported. For more info visit CSS Tricks – Transitions and Animations on CSS Generated Content.

The post CSS Paper Stack Effect appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/css-paper-stack-effect-pseudo-pile-notes/feed/ 1