article-raw.txt

Are you a member? Register or Login

Design Shack
   
Search Design Shack
Articles Gallery About
Home › Articles › CSS › Use Pseudo Elements to Create an Image Stack Illusion
Use Pseudo Elements to Create an Image Stack Illusion
Use Pseudo Elements to Create an Image Stack Illusion
ON:	12 MAR 2012
BY:	JOSHUA JOHNSON
CATEGORY:	CSS
LENGTH:	10 MIN READ
Today we’re going to see if we can take a single image inserted via HTML and make it look like a messy stack of images using only CSS. The key: pseudo elements.

Along the way we’ll see how embarking on a project like this can quickly lead to some messy code and how we can combat that with some awesome DRY coding practices.

2 Million+ Digital Assets, With Unlimited Downloads
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.

Web Templates
Web Templates
LANDING PAGES & EMAIL
Fonts
Fonts
SANS SERIF, SCRIPT & MORE
Graphic Templates
Graphic Templates
LOGOS, PRINT & MOCKUPS
CMS Templates
CMS Templates
SHOPIFY, TUMBLR & MORE
 Presentation Templates
Presentation Templates
POWERPOINT & KEYNOTE
Graphics
Graphics
ICONS, VECTORS & MORE
Explore Design Resources

The Challenge
I was checking out some of the amazing content on our new downloads site, Pixels Daily, and I found a great little free PSD called Stacks that helps you quickly and easily build a stack of Polaroid-esque images in Photoshop.

screenshot
As you can see, it’s a pretty attractive effect. As soon as I saw it, I immediately wanted to try to pull it off with CSS. It’s a tricky situation though because there are multiple layers stacked on top of each other and we don’t want to clutter up our markup with three images for every gallery item. So how can we perform this illusion while minimizing our HTML markup?

It turns out, the answer that I was looking for lies in pseudo elements. This is a perfect use case to display the magic of :before and :after. Let’s get started.

The HTML
To create our first stack, the only HTML we’ll need is a div with an image inside of it. That’s all! The rest of the fancy footwork will all be performed via CSS. Make sure you add the “stackone” class to the div.

1
2
3
<div class='stackone'>
   <img src="http://lorempixum.com/200/200/city/7" />
</div>
Basic Styles
Nothing complicated here, just a basic margin/padding reset so our browsers get on the same page. Also, the borders on our images will be white so you’ll want to give the background a tint of some kind.

1
2
* {margin: 0; padding: 0;}
body {background: #ccd3d7;}
Top Image Styles
Now it’s time to turn our boring image into something a little more interesting. Here’s a chunk of code to get you started:

1
2
3
4
5
6
7
8
9
10
.stackone {
 border: 6px solid #fff;
 float: left;
 height: 200px; width: 200px;
 margin: 50px;
 position: relative;
 -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
 -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
 box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
There’s a lot going on here so let’s tear it up piece by piece. These four lines determine our size and positioning:

1
2
3
4
float: left;
height: 200px; width: 200px;
margin: 50px;
position: relative;
Because we’re going for a gallery effect, we’ve floated the images to the left and set a fairly arbitrary margin of 50px to space them out nicely. The height and width are set to the dimensions of the image that we used in our HTML (200px by 200px).

The most interesting part of this chunk of code is the positioning context, which is set to relative. As of right now, this isn’t doing anything. I’ve only included it because I know that we’ll be using absolute positioning on the pseudo elements later and I want the position for those to be “relative” to this item rather than the page as a whole.

Icing
The rest of the code is purely for aesthetic appeal. I added a fairly thick white border along with a box-shadow, being sure to utilize all of the vendor prefixes for maximum compatibility.

1
2
3
4
border: 6px solid #fff;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
Progress Check
At this point the top of our image stack is looking great. With just a few lines of code we’ve pulled off a decent looking instant camera style effect.

screenshot
The First Pseudo Element
Now it’s time to add in our first piece of the stack. Basically what we want to do is make it look like there’s another image under our current one. We can do this with the :before pseudo element and much of the same code that we used above.

To being, we use the following syntax:

1
2
3
.stackone:before {
 content: "";
}
Here we’ve targeted the class that contains our top image, then implemented the :before pseudo element with no content. This effectively adds another item to the document flow for us to work with. Now let’s style it like we did our previous image:

1
2
3
4
5
6
7
8
9
.stackone:before {
 content: "";
 height: 200px; width: 200px; 
 background: #eff4de;
 border: 6px solid #fff;
 -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
 -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
 box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
The key thing to notice here is that we’re not really working with an image. I could load in another image, but it would be a bad idea considering there we are making stacks of three. For every one image in the gallery, we don’t want to load in three! Fortunately, since most of the surface area of the pseudo elements will be hidden, we can simply use a solid color and still pull off the effect we’re looking for.

Positioning
At this point, things aren’t looking so good. In fact, we’ve really messed up our image!

screenshot
As you can see, our pseudo element is interfering with the image. To fix this, we need to add some positioning context, then push it to the back with z-index. I’ve split up the different chunks of styles here so you can clearly see what’s going on with each block.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.stackone:before {
 content: "";
 height: 200px; width: 200px;
 background: #eff4de;
 border: 6px solid #fff;
 
 position: absolute;
 z-index: -1;
 top: 0px;
 left: -10px;
 
 -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
 -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
 box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
 
 -webkit-transform: rotate(-5deg);
 -moz-transform: rotate(-5deg);
 -o-transform: rotate(-5deg);
 -ms-transform: rotate(-5deg);
 transform: rotate(-5deg);
}
By using absolute positioning, we can then push our image into place given the starting position of the original image. As we said, z-index then pushes the image to the background, which helps with the interference that we were getting before. Finally, we tossed on a transform effect to pull of the messy rotation that you see in the original Stacks PSD.

Progress Check
At this point, everything looks great! Our second photo (well, fake photo) is sitting nicely under our first and has enough rotation to set it apart. One more and we’re home free.

screenshot
The Second Pseudo Element
As you can probably guess, to add a third photo to the stack, we need to utilize the :after pseudo element. This works exactly like what we just did, so there’s no need to walk through it in detail. The primary differences will be a different background color, position and rotation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.stackone:after {
 content: "";
 height: 200px; width: 200px;
 background: #768590;
 border: 6px solid #fff;
 position: absolute;
 z-index: -1;
 top: 5px;
 left: 0px;
 -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
 -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
 box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
 -webkit-transform: rotate(4deg);
 -moz-transform: rotate(4deg);
 -o-transform: rotate(4deg);
 -ms-transform: rotate(4deg);
 transform: rotate(4deg);
}
Progress Check
Would you look at that? We’ve finished our first image stack! It’s a pretty snazzy effect considering it really only uses a single image.

screenshot
A Flawed Workflow
Given that the original PSD had several different image stacks to choose from, I wanted to do the same thing with CSS classes. To do this, we could easily copy and paste all of the code above into a new “stacktwo” class and change the rotation/positioning for the pseudo elements. Bam: you’ve got yourself a new stack.

Here’s the problem though: I did this with a whopping eight different stacks and the result was a horrendous blob of code. Seriously, it was uglier than a 1997 table-based layout. The problem of course is that I’m repeating myself over and over. More than half my code is comprised of pure redundancy. I can’t in good conscious pass on such horrid practices to you.

DRY CSS
Andy Hunt and Dave Thomas coined the term “DRY” in relation to programming, which stands for “Don’t Repeat Yourself.” To make an inane semantic point, CSS isn’t technically a programming language, it’s a style sheet language. However, if we treat it like a programming language and apply the concepts of DRY coding, we end up with a much better result.

Let’s see if we can apply these practices to make our code a little briefer and more extendable.

Let’s Try That Again
If we create a bunch of classes and follow on our current path, our CSS is going to get unwieldy. Right off the bat, we’ll have to declare each class individually and then pass in a big chunk of code to each. And this is before we even approach the pseudo elements, which will literally triple our code!

1
2
3
4
5
6
7
8
.stackone {...}
.stacktwo {...}
.stackthree {...}
.stackfour {...}
.stackfive {...}
.stacksix {...}
.stackseven {...}
.stackeight {...}
Given that a great deal of the styles will be shared, let’s cut back on our code and place some of these styles all in one declaration block.

1
2
3
4
5
6
7
8
9
10
.stackone, .stacktwo, .stackthree, .stackfour, .stackfive, .stacksix, .stackseven, .stackeight {
 border: 6px solid #fff;
 float: left;
 height: 200px; width: 200px;
 position: relative;
 margin: 50px;
 -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
 -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
 box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
This takes our core styles and applies them to all of the starter classes in one go, which is much better than repeating ourselves over and over. As an optional next step, you could get even fancier with your selectors.

Notice how all of our classes start with the same five letters: “stack”. Given this information, we can pull out the arbitrary substring attribute value selector and target any classes that begin with this string of five letters.

1
2
3
4
5
6
7
8
9
10
div[class*='stack'] {
 border: 6px solid #fff;
 float: left;
 height: 200px; width: 200px;
 position: relative;
 margin: 50px;
 -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
 -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
 box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
How fancy is that? This one selector targets all of those classes for us! Even better, if we choose to add eight more stack classes to the mix, this selector will still function perfectly.

Let’s take this to the extreme and see how brief we can make our code. The key here is to find everything that’s repeated and instead attempt to use it only once. As you can see, I started with the declarations that can be applied to only the “stack” classes. Then I moved onto styles that could be applied to the stack classes along with the :before and :after elements. Narrowing it down yet again I set up a declaration block for only the :before and :after styles. Finally, I ended with the different color that we’re using for the :before classes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
div[class*='stack'] {
 float: left;
 position: relative;
 margin: 50px;
}
 
div[class*='stack'], div[class*='stack']:before, div[class*='stack']:after {
 border: 6px solid #fff;
 height: 200px; width: 200px;
 -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
 -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
 box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
 
div[class*='stack']:before, div[class*='stack']:after {
 background: #768590;
 content: "";
 position: absolute;
 z-index: -1;
}
 
div[class*='stack']:before {
 background: #eff4de;
}
What we’ve done here is literally taken hundreds of lines of code and compressed them into a small space. This is fantastic for maintenance, loading times, and your general sanity! It’s a little bit tricky to wrap your mind around DRY principles at first, but once you do you’ll never look back.

Other Stacks
screenshot
From here out, each stack will be fairly unique so we will have to code the rest one at a time. A little Sass or Less would go a long way towards helping out this portion but you guys are sick of me ranting about the wonder of preprocessors so I did it the long way.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/*STACK ONE*/
.stackone:before {
 top: 4px;
 left: -6px;
}
 
.stackone:after {
 top: -2px;
 left: -6px;
}
 
/*STACK TWO*/
.stacktwo:before {
 top: 0px;
 left: -10px;
 -webkit-transform: rotate(-5deg);
 -moz-transform: rotate(-5deg);
 -o-transform: rotate(-5deg);
 -ms-transform: rotate(-5deg);
 transform: rotate(-5deg);
}
 
.stacktwo:after {
 top: 5px; left: 0px;
 -webkit-transform: rotate(4deg);
 -moz-transform: rotate(4deg);
 -o-transform: rotate(4deg);
 -ms-transform: rotate(4deg);
 transform: rotate(4deg);
}
 
/*STACK THREE*/
.stackthree:before {
 top: 5px;
 left: -15px;
 z-index: -1;
 -webkit-transform: rotate(-10deg);
 -moz-transform: rotate(-10deg);
 -o-transform: rotate(-10deg);
 -ms-transform: rotate(-10deg);
 transform: rotate(-10deg);
}
 
.stackthree:after {
 top: -2px;
 left: -10px;
 -webkit-transform: rotate(-5deg);
 -moz-transform: rotate(-5deg);
 -o-transform: rotate(-5deg);
 -ms-transform: rotate(-5deg);
 transform: rotate(-5deg);
}
Browser Compatibility
In my testing, the browser compatibility here was actually pretty impressive. Everything should work fine in Safari, Firefox, Chrome, Opera and IE9+. For IE7, you get a simple image gallery without the fancy stack effect, which I consider to be completely acceptable as this is a purely aesthetic touch similar to rounded corners.

IE8 is the tricky one because it partially supports enough stuff to really screw everything up. You can decide how to approach this issue however you like, but the solution I came up with was to use a horrible, dirty hack to target only IE8, which is to append \9 to any IE8 only styles. Utilizing this technique, I simply hid the :before and :after elements so that IE8 gets a simple image gallery like IE7.

1
2
3
4
5
6
7
8
9
10
div[class*='stack']:before, div[class*='stack']:after {
 background: #768590;
 content: "";
 position: absolute;
 z-index: -1;
 
 /*Dirty IE8 hack*/
 height: 0px\9; width: 0px\9; 
 border: none\9;
}
The fancy selectors are where IE8 tends to get tripped up, it actually supports before and after as long as you stick to the single colon syntax. If you list out the classes with commas rather than using the attribute value selector, you should be able to get IE8 to perform the stack effect.

Conclusion
We packed a lot in today. We built a cool image stack illusion, learned how to implement :before and :after, and then discussed best practices for coding while utilizing a DRY mentality. I hope you learned something and had as much fun as I did!

Keep an eye out on PixelsDaily in the days ahead for an awesome free download containing all of the source code for this tutorial along with eight awesome image stacks that you can use in your projects.

Become a Member
Join our 30,000+ members to receive our newsletter and submit your design work.

Email Address
  
RELATED
Like This? We'd Recommend:
5 New CSS Techniques to Master in 2022	5 New CSS Techniques to Master in 2022
13 Best Ways to Learn CSS Grid	13 Best Ways to Learn CSS Grid
12 Fun CSS Text Shadows You Can Copy and Paste	12 Fun CSS Text Shadows You Can Copy and Paste


Made by Compact Creative © 2022

   

Home / Articles / Features / Gallery

About / Membership / Advertising & Sponsorship / Privacy

In Partnership with

article.html

<!doctype html>
<html lang="en-US">
<head>

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-2121991-2"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-2121991-2');
  </script>
<link rel="preload" href="/framework/fonts/Black-webfont.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/framework/fonts/Bold-webfont.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/framework/fonts/Regular-webfont.woff" as="font" type="font/woff" crossorigin>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Use Pseudo Elements to Create an Image Stack Illusion | Design Shack</title>
<meta name="description" content="Today we&#8217;re going to see if we can take a single image inserted via HTML and make it look like a messy stack of images using only CSS. The key: pseudo elements. Along the way we&#8217;ll see how embarking on a project like this can quickly lead to some messy code and how we can [&hel..." />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#98b782" />
<link rel="alternate" type="application/rss+xml" title="Design Shack RSS" href="http://feedpress.me/designshack" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@designshack">
<meta name="twitter:creator" content="@designshack">
<meta name="twitter:title" content="Use Pseudo Elements to Create an Image Stack Illusion">
<meta name="twitter:description" content="Today we&#8217;re going to see if we can take a single image inserted via HTML and make it look like a messy stack of images using only CSS. The key: pseudo elements. Along the way we&#8217;ll see how embarking on a project like this can quickly lead to some messy code and how we can [&hel...">
<meta name="twitter:image" content="https://designshack.net/wp-content/uploads/stackscss-f.jpg">
<meta property="og:title" content="Use Pseudo Elements to Create an Image Stack Illusion" />
<meta property="og:type" content="article" />
<meta property="og:description" content="Today we&#8217;re going to see if we can take a single image inserted via HTML and make it look like a messy stack of images using only CSS. The key: pseudo elements. Along the way we&#8217;ll see how embarking on a project like this can quickly lead to some messy code and how we can [&hel...">
<meta property="og:url" content="https://designshack.net/articles/css/use-pseudo-elements-to-create-an-image-stack-illusion/">
<meta property="og:image" content="https://designshack.net/wp-content/uploads/stackscss-f.jpg" />
<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "WebSite",
    "name": "Design Shack",
    "url": "https://designshack.net",
    "potentialAction": {
      "@type": "SearchAction",
      "target": "https://designshack.net/search/{search_term_string}/",
      "query-input": "required name=search_term_string"
    }
  }
  </script>
<link rel="image_src" href="https://designshack.net/wp-content/uploads/stackscss-f.jpg" /> <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "mainEntityOfPage": {
          "@type": "WebPage",
          "@id": "https://designshack.net/articles/css/use-pseudo-elements-to-create-an-image-stack-illusion/"
        },
        "headline": "Use Pseudo Elements to Create an Image Stack Illusion",
        "author": {
          "@type": "Person",
          "name": "Joshua Johnson"
        },
        "datePublished": "2012-03-12T06:00:04+00:00",
        "dateModified": "2012-03-12T06:00:04+00:00",
        "image": {
          "@type": "ImageObject",
          "url": "https://designshack.net/wp-content/uploads/stackscss-f.jpg",
          "height": 477,
          "width": 715
        },
         "publisher": {
          "@type": "Organization",
          "name": "Design Shack",
          "logo": {
            "@type": "ImageObject",
            "url": "https://designshack.net/images/designshack-structured-data.png",
            "width": 402,
            "height": 60
          }
        }
      }
    </script>
<meta name='robots' content='max-image-preview:large' />
<link rel='dns-prefetch' href='//s.w.org' />
<style id='global-styles-inline-css' type='text/css'>
body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--duotone--dark-grayscale: url('#wp-duotone-dark-grayscale');--wp--preset--duotone--grayscale: url('#wp-duotone-grayscale');--wp--preset--duotone--purple-yellow: url('#wp-duotone-purple-yellow');--wp--preset--duotone--blue-red: url('#wp-duotone-blue-red');--wp--preset--duotone--midnight: url('#wp-duotone-midnight');--wp--preset--duotone--magenta-yellow: url('#wp-duotone-magenta-yellow');--wp--preset--duotone--purple-green: url('#wp-duotone-purple-green');--wp--preset--duotone--blue-orange: url('#wp-duotone-blue-orange');--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
</style>
<link rel="https://api.w.org/" href="https://designshack.net/wp-json/" /><link rel="alternate" type="application/json" href="https://designshack.net/wp-json/wp/v2/posts/30504" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://designshack.net/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://designshack.net/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 5.9" />
<link rel="canonical" href="https://designshack.net/articles/css/use-pseudo-elements-to-create-an-image-stack-illusion/" />

<style>

    *,:after,:before{box-sizing:border-box}body{background-color:#fff;color:#444;margin:0;padding:0;font-size:1em}h1,h2,h3,h4,h5,p{margin:0;line-height:1.4em}a{text-decoration:none}input[type=submit]{-webkit-appearance:none}input[type=email],input[type=password],input[type=text],textarea{border:1px solid #ccc;-webkit-appearance:none}button:focus,input:focus,select:focus,textarea:focus{outline:0;border:1px solid #aaa;background:#fcfcfc}p.success{display:block;padding:10px 10px 10px 20px;background:#d7e7d5;border-left:5px solid #b5ceb3}p.error{display:block;padding:10px 10px 10px 20px;background:#ebd9d9;border-left:5px solid #b34949}p.info{display:block;padding:10px 10px 10px 20px;background:#f3eed4;border-left:5px solid #f0d95c}.button,input[type=submit]{border:0;padding:0;margin:0;box-shadow:none;font-weight:700;border-radius:2px;font-size:.9em}.button:hover,input[type=submit]:hover{cursor:pointer}.wrapper{width:100%;margin:25px 0 25px 0;padding:0 50px 0 50px}.wrapper-footer,.wrapper-header,.wrapper-nav{background-color:#fff}.top-bar{width:100%;padding:0 50px 0 50px}.promo-bar{background:#ddd;text-align:center}.promo-bar p{padding:20px}.promo-bar a{padding:7px 10px;margin-left:1em}.login-bar.sticky,.promo-bar.sticky{position:-webkit-sticky;position:sticky;top:0;z-index:2000;border-bottom:1px solid #ccc}.login-bar{background:#f0f0f0;text-align:right}.login-bar p{padding:15px 0 15px 0;font-size:.9em}header{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:35% 22% auto;grid-gap:25px}header .logo,header .search,header .social-links{line-height:45px}header .search,header .social-links{text-align:right}header form,header input{margin:0;padding:0}.social-links a{margin-right:8px}.social-links span{display:none}header .search input.searchbox{padding:9px 10px;width:calc(100% - 80px);max-width:350px}header .search input[type=submit]{width:70px;margin-left:10px;padding:7px 10px}nav{max-width:1300px;margin:0 auto;font-weight:700;text-align:center;width:100%}nav::after{content:"";clear:both;display:table}nav ul{list-style:none;position:relative;margin:0;padding:0;z-index:200;text-align:left;width:100%}nav ul a{display:inline-block;padding:7px 12px;background:#f0f0f0;z-index:200;margin:0;width:100%}nav ul li{position:relative;display:inline-block;padding:0;margin:0;text-align:left}nav ul li a.current{background:#ddd}nav ul li a:hover{background:#ddd}nav ul ul{display:none;position:absolute;top:100%;left:0;background:#fff;padding:0}nav ul ul li{width:200px}nav ul ul a{padding:8px 15px}nav ul ul ul{top:0;left:100%}nav ul li:hover>ul{display:block}.responsive-nav{position:absolute;left:-9999px;z-index:100;margin:25px auto}.responsive-nav ul{float:none}.responsive-nav ul li{width:100%;display:block;text-align:center;float:none}.menu-close,.menu-toggle{margin:0 auto;padding:10px 0 10px 0;display:block;text-align:center}.menu-close{margin:25px auto 0 auto}.menu-close span,.menu-toggle span{display:none}.responsive-nav:target,.responsive-nav[aria-expanded=true]{position:static}.responsive-nav:target ul,.responsive-nav[aria-expanded=true] ul{position:static}@media (min-width:1024px){.menu-close,.menu-toggle{display:none}.responsive-nav{position:relative;left:auto;margin:0 auto}.responsive-nav ul li{text-align:center;display:inline;width:auto;float:left}}.wrapper.hero{width:100%;margin:25px 0 25px 0;padding:120px 50px 120px 50px;background:#f0f0f0}.wrapper.hero h1,.wrapper.hero h2{text-align:center;max-width:700px;margin:0 auto}.wrapper.hero h1{font-size:3em;margin-bottom:25px}.wrapper.hero p{margin:1em 0}.buttons{position:relative;width:100%;text-align:center}.wrapper.hero .button{font-size:1.5em;padding:20px 30px;display:inline-block;margin:25px 25px 0 25px}.wrapper.hero.theme{margin:25px auto 25px auto;padding:50px;background:#f0f0f0;display:grid;grid-template-columns:50% 50%;grid-gap:50px;max-width:1300px}.wrapper.hero.theme h1,.wrapper.hero.theme h2{text-align:left;max-width:1300px}.wrapper.hero.theme .buttons{max-width:500px;margin-top:25px}.wrapper.hero.theme .button{width:calc(50% - 15px);margin:0 0 25px 0}.wrapper.hero.theme .buttons .button:first-of-type{margin-right:25px}.wrapper.hero.theme .button.wide{width:100%}.wrapper.hero.theme .screenshots{position:relative}.page-information{max-width:1300px;margin:0 auto 50px auto;background:#f0f0f0;padding:50px}.page-information h1{font-size:2.8em;margin:0 0 .5em 0}.page-information h2{font-weight:400;max-width:700px}.page-information ol{list-style:none;margin:1.5em;padding:0;float:right;text-transform:uppercase;font-size:.75em}.page-information ol li{display:inline;font-weight:700}.page-information.center{text-align:center}.page-information.center h2{margin:0 auto}article.full blockquote,article.full li,article.full p{font-size:1.2em}article.full p{margin:0 0 1em 0}article.full p:first-of-type{font-weight:700}article.full h1:first-of-type{margin-top:0}article.full blockquote,article.full li,article.full p{line-height:1.4em}article.full h1{font-size:2.8em;margin:0 0 .5em 0}article.full h2,article.full h3,article.full h4,article.full h5{margin:1em 0 1em 0}article.full ol,article.full ul{margin:0 0 1em 0;padding:0}article.full li{margin:0 0 0 2em;padding:0 0 .5em .5em}.crayon-syntax{width:600px!important}article.full figure{max-width:100%;background:#f0f0f0;padding:25px;margin:0 0 2em 0}article.full figcaption{padding:5px 0 0 0}article.full img{width:100%;max-width:100%;margin-bottom:1em;height:auto}article.full aside{width:40%;float:right;margin:0 -140px 25px 25px;background:#f0f0f0;padding:25px;min-width:300px}.article-with-sidebar article.full aside{margin-right:0}article.full aside blockquote,article.full aside p{font-size:1em;margin:0;border:0}article.full aside p:first-of-type{font-weight:400}article.full aside img{padding:0}article.full aside.article-meta{width:40%;float:right;background:#f0f0f0;padding:25px;min-width:300px;text-transform:uppercase;font-size:.75em;color:#888;font-weight:700}article.full aside.article-meta img{width:calc(100% + 50px);margin:-25px 0 25px -25px;max-width:none}article.full blockquote{border-left:5px solid #ccc;margin:0 0 1em 0;padding:0 0 0 1em;font-style:italic}article.full form{font-size:1.2em;width:100%;display:grid;grid-template-columns:200px auto;grid-gap:30px}article.full input,article.full label{line-height:30px}article.full label{padding-top:.5em}article.full input[type=email],article.full input[type=password],article.full input[type=text],article.full textarea{padding:7px 10px;font-size:1em;color:#444}article.full input[type=email],article.full input[type=password],article.full input[type=text]{max-width:350px}article.full textarea{width:100%;height:200px}article.full .button,article.full input[type=submit]{padding:7px 25px;display:inline-block;grid-column:span 2;max-width:250px;text-align:center;margin-bottom:1em}article.full .button{max-width:none}article.full table{width:100%;margin-bottom:1em;}article.full td,article.full th{text-align:left;padding:10px;background:#f0f0f0}article.full th{background:#ddd}article.full ul.team{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:45% 45%;grid-gap:50px}article.full ul.team li{margin:0;padding:0}article.full ul.team p{font-weight:400;font-size:1em}article.full ul.team img{float:right;border-radius:50%;width:35%;max-width:100px;margin:0 0 25px 25px}article .featured-theme{max-width:100%;background:#f0f0f0;padding:1px 35px 20px 35px;margin:0 0 2em 0}article .featured-theme p:first-of-type{font-weight:400}article .featured-theme a.button{font-size:1em;margin-right:10px;padding:10px 30px}article.full-width{max-width:700px;margin:0 auto}article.full-width section.social-share{position:-webkit-sticky;position:sticky;top:50px;margin:100px 0 0 -100px;margin-left:-110px;width:50px;text-align:center;float:left;font-size:1.5em}article.full-width section.social-share .social-links a{margin-bottom:1em;display:block;color:#ccc}article.full-width section.social-share .social-links a:hover{color:#444}.article-with-sidebar{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:auto 350px;grid-gap:100px}.article-with-sidebar aside section{background:#f0f0f0;padding:25px;margin-bottom:25px}.article-with-sidebar aside section p{line-height:1.4em;margin:0 0 1em 0}.article-with-sidebar aside section h2,.article-with-sidebar aside section h3{margin:0 0 .5em 0}.theme-screenshot{border-radius:3px;border-style:solid;border-width:3px;border-color:#fff;box-sizing:border-box;outline-color:#585652;outline-width:0;max-width:90%}.theme-screenshot.tablet{width:250px;position:absolute;right:150px;top:200px}.theme-screenshot.phone{width:150px;position:absolute;right:50px;bottom:0}.theme-features{display:grid;grid-template-columns:50% auto;grid-gap:80px;max-width:1300px;margin:0 auto;padding:50px}article.full.theme-features p:first-of-type{font-weight:400}article.full.theme-features img{max-width:100%}.pricing-table{display:grid;grid-template-columns:30% 30% 30%;grid-gap:5%;max-width:1300px;margin:0 auto;padding:50px;font-size:1em}.pricing-table .package{background:#f0f0f0;padding:50px;text-align:center}.pricing-table .package ul{list-style:none;padding:0;margin:25px 0 25px 0}.pricing-table .package ul li{margin:0 0 10px 0;padding:4px 10px}.pricing-table .package ul li.highlighted{background:#fff}.pricing-table .package a.button{font-size:1.2em;padding:15px 30px;display:inline-block}.pricing-table .package h3{border-bottom:1px solid #ccc;padding:0 0 10px 0;margin:0 0 10px 0;font-size:1.4em}.pricing-table .package del,.pricing-table .package span{display:block;font-size:2em}.pricing-table .package del{color:#ccc}.pricing-table .package span{font-size:3.5em}.pricing-table .package span.nodiscount{margin-top:45px}.pricing-table .package.info{background:0 0;text-align:left;padding:50px 25px 50px 0}.pricing-table .package.info h3{border:none}.pricing-table .package.info p{margin-bottom:1em}.pricing-table .package.info img{float:right;width:70px;margin:0 0 20px 20px}.article-with-sidebar aside section.membership form input.email{display:block;width:100%;max-width:350px;font-size:1em;color:#444;padding:7px 10px;margin-bottom:10px}.article-with-sidebar aside section.membership form input[type=submit]{padding:7px 10px;display:block}.article-with-sidebar aside section.membership form input.newsletter{margin-bottom:2em}.article-with-sidebar aside section.membership .membership-privacy{display:none;margin-top:1em;padding-top:1em;font-style:italic;border-top:1px solid #ccc}.article-with-sidebar aside section.membership form input.email:focus+input+input+.membership-privacy{display:block}.article-with-sidebar aside section.author img{border-radius:50%;float:right;margin:0 0 25px 25px;width:100px}.ad-300-250 img,.ad-300-600 img{width:100%;max-width:300px}article.full .in-post-300-250{background-color:#f0f0f0;padding:0;margin-bottom:25px;text-align:center;background-image:url(/images/ad-bg-line.png);background-repeat:repeat-x;background-position:center}article.full .in-post-300-250 img{max-width:350px;margin:0;border:25px solid #f0f0f0}article.full .in-post-728-90{background-color:#f0f0f0;padding:25px;margin:25px 0 25px 0;text-align:center}article.full .in-post-728-90 img{width:100%;max-width:728px;margin:0}.article-with-sidebar aside section.recommended-posts{padding-bottom:0}.article-with-sidebar aside section.recommended-posts ul{list-style:none;margin:25px -25px 0 -25px;padding:0;display:table}.article-with-sidebar aside section.recommended-posts ul li{display:table-row;margin-bottom:1em;width:100%}.article-with-sidebar aside section.recommended-posts ul img{width:50%;max-width:200px;float:right;padding:25px;border-top:1px solid #ddd}.article-with-sidebar aside section.recommended-posts h3{font-weight:700;font-size:1em;padding:35px 15px 15px 25px;border-top:1px solid #ddd}.article-with-sidebar aside section.social-share{font-size:1.5em}.article-with-sidebar aside section.sticky-social{position:-webkit-sticky;position:sticky;top:50px}.article-with-sidebar aside section.sticky{position:-webkit-sticky;position:sticky;top:155px}.masonry{display:grid;max-width:1300px;margin:0 auto;grid-gap:25px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));grid-auto-rows:0}.masonry .item .content{background:#f0f0f0;padding:25px}.masonry .item .content img{width:100%;margin:0 0 1em 0}.masonry .item .content img{width:100%;margin:0 0 1em 0}.masonry .item .content h3{margin:0 0 .5em 0}.masonry .item .content h4{margin:.5em 0 1.5em 0;text-transform:uppercase;font-size:.75em;color:#888}.masonry .item .content p{line-height:1.4em;margin-bottom:1em}.masonry .item .content.image-full img{width:calc(100% + 50px);margin:-25px 0 1em -25px}.masonry .item.large{grid-column:span 2}.masonry .item.large h3{font-size:2em}.masonry .item.large .content.image-full img{width:52%;float:right;margin:-25px -25px 25px 25px}.masonry.gallery{grid-template-columns:repeat(auto-fill,minmax(350px,1fr))}.masonry.gallery .item .content.image-full{display:grid;grid-gap:0;grid-template-columns:60% 40%}.masonry.gallery .item .content.image-full a:first-of-type{grid-column:span 2}ul.swatch{list-style:none;margin:0;padding:0;width:100%;margin-top:5px}.masonry.gallery .item .content.image-full h3{font-size:1em;margin:0;padding:0}ul.swatch li a{list-style:none;margin:0 3px 0 3px;width:calc(33% - 6px);float:left;text-indent:-9999px;height:10px;display:block;border:1px solid rgba(0,0,0,.1);border-radius:2px}.gallery-nav{display:grid;grid-gap:50px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin:0 0 25px 0;padding:0 0 25px 0}.gallery-nav h3{display:grid;grid-gap:50px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin:0 0 25px 0}.gallery-nav .search input.searchbox{padding:9px 10px;width:calc(100% - 120px);max-width:350px}.gallery-nav .search input[type=submit]{width:70px;margin-left:10px;padding:7px 10px}.gallery-nav .color a{border-radius:50%;width:18px;height:18px;display:inline-block;text-indent:-9999px;margin:0 5px 5px 0;line-height:18px;border:1px solid #ccc}.gallery-nav .color a:hover{opacity:.7}.gallery-nav select{height:32px;background-color:#fff;background-image:url(/images/dropdownarrow.png);background-position:right center;background-repeat:no-repeat;background-size:39px;border:1px solid #ccc;color:#ccc;font-weight:400;cursor:pointer;width:100%;padding:0 0 0 10px;font-size:1em;-webkit-appearance:none;border-radius:0;margin-top:2px}.button.previous{float:left}.button.next{float:right}.design-nav{padding:15px 0 25px 0;display:block}.design-nav::after{content:"";clear:both;display:table}article.full figure.design{max-width:750px}figure.design a:first-of-type img{width:100%;margin:0;padding:0}li.colors a{border-radius:50%;width:18px;height:18px;display:inline-block;text-indent:-9999px;margin:0 5px 0 0;line-height:18px}li.colors a:hover{opacity:.7}ul.feature-list{max-width:1300px;list-style:none;margin:25px auto;padding:0;display:grid;grid-template-columns:26.666666667% 26.666666667% 26.666666667%;grid-gap:20px 10%;padding:50px}ul.feature-list li{margin:0 0 50px 0;padding:0;text-align:center}ul.feature-list li p{font-weight:400;font-size:1em}ul.feature-list li img{max-width:70px}.page-navigation{max-width:1300px;margin:25px auto}.page-navigation ul{list-style:none;margin:0;padding:0}.page-navigation ul li{display:inline-block;margin:0 5px 10px 0}.page-navigation a,.page-navigation span,.page-navigation ul li a{background:#fff;display:inline-block;padding:8px 12px;border:1px solid #f0f0f0;min-width:40px;text-align:center;margin-right:10px}.page-navigation .current,.page-navigation a:hover,.page-navigation ul li a:hover,.page-navigation ul li.active_page a{background:#f0f0f0}footer{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:32% 32% auto;grid-gap:25px}footer p{padding:20px}a,img{transition-delay:0s;transition-duration:.2s;transition-property:all;transition-timing-function:ease}a:hover img{opacity:.7}.hero .button{transition-duration:.2s;transition-timing-function:ease;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.hero .button:hover{-webkit-transform:scale(1.03);-ms-transform:scale(1.03);transform:scale(1.03)}@font-face{font-family:icomoon;src:url(http://static.tumblr.com/n3p2fdg/G5Lnlaz60/icomoon.eot)}@font-face{font-family:icomoon;src:url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype'),url(data:application/font-woff;charset=utf-8;base64,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) format('woff');font-weight:400;font-style:normal}[class*=" icon-"],[class^=icon-]{font-family:icomoon;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;font-size:1em;color:rgba(0,0,0,.8);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[class*=" icon-"]:hover,[class^=icon-]:hover{color:rgba(0,0,0,.5)}.icon-tag:before{content:"\e617"}.icon-envelope:before{content:"\e60d"}.icon-share:before{content:"\e600"}.icon-search:before{content:"\e613"}.icon-menu:before{content:"\e612"}.icon-heart:before{content:"\e601"}.icon-close:before{content:"\e614"}.icon-arrow-up:before{content:"\e618"}.icon-arrow-right:after{content:"\e615"}.icon-arrow-down:before{content:"\e619"}.icon-arrow-left:before{content:"\e616"}.icon-googleplus:before{content:"\e603"}.icon-facebook:before{content:"\e604"}.icon-linkedin:before{content:"\e60f"}.icon-dribbble:before{content:"\e60a"}.icon-twitter:before{content:"\e606"}.icon-instagram:before{content:"\e605"}.icon-pinterest:before{content:"\e611"}.icon-rss:before{content:"\e607"}@media only screen and (max-width:1130px){article.full aside{margin-right:0}article.full-width section.social-share{display:none}}@media only screen and (max-width:1024px){.article-with-sidebar{grid-template-columns:100%}.article-with-sidebar article.full{max-width:930px;margin:0 auto}.page-information aside.article-meta{display:none}.page-information ol{float:none;margin:0 0 .5em 0}ul.feature-list{grid-template-columns:30% 30% 30%;grid-gap:5%}.ad-300-250,.ad-300-600{display:none}.theme-screenshot.phone,.theme-screenshot.tablet{display:none}.wrapper.hero.theme .button{width:100%}.theme-features{display:block}.pricing-table{grid-template-columns:auto auto;grid-gap:25px}.pricing-table .package.most-important{grid-column:span 2}.crayon-syntax{width:300px!important}}@media only screen and (max-width:780px){header{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:280px 40%}header .social-links{display:none}}@media only screen and (max-width:600px){.top-pick{width:calc(100% + 90px) !important;}article.full .top-pick img{width: calc(100% + 30px) !important; max-width: none !important;}.wrapper,.wrapper.hero,.wrapper.hero.theme{padding-right:25px;padding-left:25px}.grid,.wrapper.hero.theme,footer,header{grid-template-columns:100%;grid-gap:10px}.page-information h1,.wrapper.hero h1,article.full h1{font-size:2.5em;line-height:1.2em}.promo-bar{display:none}.login-bar,header .logo,header .search,header .social-links{text-align:center}nav ul{text-align:center}.page-information,.theme-features{padding:25px}article.full aside,article.full aside.article-meta{width:100%;float:none;margin:1em 0 2em 0;max-width:none}article.full aside.article-meta img{display:none}article.full form,article.full form input,article.full form label{display:block}article.full input[type=email],article.full input[type=password],article.full input[type=text]{width:90%;max-width:none}article.full form input[type=submit]{margin-top:1em}.masonry .item.large{grid-column:span 1}.masonry .item.large .content.image-full img{width:calc(100% + 50px);margin:-25px 0 1em -25px;float:none}.masonry .item.large h3{font-size:1.17em}article.full ul.team{display:block}ul.feature-list{display:block;max-width:400px}.theme-screenshot{max-width:100%}.pricing-table{display:block;padding:0}.pricing-table .package{margin:0 0 25px 0;padding:25px}.masonry.gallery{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}figure.design{text-align:center}figure.design a:first-of-type img,figure.design a:nth-child(2) img,figure.design a:nth-child(3) img{width:100%;margin:0 0 25px 0;padding:0}.design-nav a.button.next,.design-nav a.button.previous{float:none;width:100%}.crayon-syntax{width:300px!important}}

  </style>
<style>

body,input[type=text],textarea{font-family:'Proxima Nova','Helvetica Neue'}.page-information h1,.page-information.secondary h2,.wrapper.hero h1,article.full h1{font-family:'Proxima Nova Black'}article.full h2{font-size:2.1em}article.full h3{font-size:1.7em}article.full h4{font-size:1.5em}aside h2{line-height:1.2em}.masonry .item.large h3{line-height:1.2em}.page-information.secondary h2{font-size:2.8em;margin:0 0 .5em 0}.page-information p{font-size:1.5em;margin:0;line-height:1.4em;font-weight:400;max-width:700px}body{background-color:#f6f6f6}a{color:#749559}a:hover{color:#9ab782}.button,input[type=submit]{background:#89837a;color:#fff}.button:hover,input[type=submit]:hover{background:#6a635a;color:#fff}.button:active,input[type=submit]:active{background:#49433c;color:#fff}.page-information{background-color:#fff}.page-information.feature{background-color:#75bdc1;margin-top:25px}.page-information.feature h1{color:#fff}.page-information.feature p{color:#d8edee}.page-information.feature aside.article-meta{background-color:rgba(255,255,255,.25);color:rgba(255,255,255,.75)}.page-information.feature aside.article-meta tr td:first-child{color:#fff}.page-information.feature a{color:#38868a}.page-information.feature a:hover{color:#4e979b}.page-information.feature ol{color:#c7e5e6;float:none;margin:0 0 1em 0}.masonry .item .content{background-color:#fff;box-shadow:rgba(0,0,0,.05) 0 1px 1px 0}.masonry .item .content h2{margin:0 0 .5em 0;font-size:1.17em;line-height:1.4em}.masonry .item .content h2 a,.masonry .item .content h3 a{color:#333;font-weight:700}.masonry .item .content h2 a:hover,.masonry .item .content h3 a:hover{color:#999}.masonry .item .content img{height:auto}.masonry .item .content p{display:none}.masonry .item .content p:nth-of-type(1),.masonry .item.feature-page .content p,.masonry .item.large .content p{display:inline-block}.item.feature-page .content{background:#70bdc2}.item.feature-page .content a{color:#38868a}.item.feature-page .content a:hover{color:#4e979b}.item.feature-page .content h3 a,.item.feature-page .content p{color:#fff}.item.feature-page .content h3 a:hover{color:rgba(255,255,255,.7)}.masonry .item.large .content p:nth-of-type(1){display:inline}.masonry .item.large .content p:nth-of-type(2){margin-top:1em}.masonry{border-bottom:2px solid #e7e7e7;margin-bottom:20px;padding-bottom:20px}.item-thumbnail{display:block;min-height:204px}.page-navigation a,.page-navigation span,.page-navigation ul li a{background:#9ab782;border:0;border-radius:2px;color:#fff}.page-navigation .current,.page-navigation a:hover,.page-navigation ul li a:hover,.page-navigation ul li.active_page a{background:#bbceab}aside .button{display:inline-block;max-width:250px;text-align:center;margin-bottom:20px;padding:7px 25px}.feature-page .content .button{background:#d6eaeb;color:#0c474a;margin-bottom:0;display:block;width:100%;text-align:center;padding:7px 25px}.feature-page .content .button:hover{background:#fff}p.pagination{text-align:center}p.pagination .button{background:#9ab782;border:0;border-radius:2px;color:#fff;display:inline-block;text-align:center;margin:0 auto 30px 0;padding:15px 40px;font-size:1em}p.pagination .button:hover{background:#bbceab}article.full ul.team{grid-template-columns:45% 45%;grid-gap:0 8%}.page-information img.avatar{float:right;border-radius:50%;float:right}.page-information .social-links{font-size:1.3em;margin-top:1em}ul.category-archive-list{list-style:none;margin:0;padding:0;column-count:5}ul.category-archive-list li{margin:0;padding:0}ul.category-archive-list li a{padding:7px 12px;border-radius:2px;position:relative;display:inline-block}ul.category-archive-list li a:hover{background:#f0f0f0}ul.category-archive-list li.wide{column-span:all;font-weight:700;width:100%;padding:0 12px 0 0;border-bottom:2px solid #f0f0f0;line-height:0;margin:35px 0 20px 0}ul.category-archive-list li.wide span{background:#fff;padding:0 20px 0 12px}@media only screen and (max-width:1024px){ul.category-archive-list{column-count:3}}.article-with-sidebar{max-width:1300px;grid-gap:50px;margin:40px auto}article.full{background:#fff;padding:50px 60px}article.full.full-width{max-width:1300px}.tutorialimage img,.tutorialimage video{margin:0 0 1em 0;padding:20px;background-color:#f5f5f5}.mobilescreenshot img{max-width:500px!important;border:1px solid #ccc;padding:0}.mobilescreenshot{width:100%!important;background:#f5f5f5;text-align:center;padding-top:30px;padding-bottom:30px}.page-information p{margin-bottom:1em}.in-post-bsa{background:#f5f5f5;padding:20px;text-align:center;margin-top:2em;margin-bottom:2em}.in-post-bsa div{margin:0 auto}.article-with-sidebar aside section{border-radius:3px}aside section.social-share h3{display:none}.article-with-sidebar aside section h3{line-height:1.2em;margin:0 0 .5em 0;font-size:1.5em}.article-with-sidebar aside section h4{line-height:1.2em;margin:0 0 .5em 0;font-size:1.2em}.article-with-sidebar aside section.membership{background:#9ab782;color:#e2f2d8;padding-bottom:0}.article-with-sidebar aside section.membership h3{color:#fff}.article-with-sidebar aside section.membership form input[type=text]{background:rgba(255,255,255,.1);color:#d0dec7;width:calc(100% + 50px);margin:0 0 0 -25px;padding:12px 0 12px 25px;border:none;max-width:none}.article-with-sidebar aside section.membership form input[type=text]:focus{background:rgba(255,255,255,.2);color:#fff}.article-with-sidebar aside section.membership form input[type=submit]{background:rgba(0,0,0,.05);width:calc(100% + 50px);margin:0 0 0 -25px;border-top-right-radius:0;border-top-left-radius:0;padding:12px 0 12px 25px;text-align:left;font-size:1em}.article-with-sidebar aside section.membership form input[type=submit]:hover{background:rgba(0,0,0,.1)}.article-with-sidebar aside section.membership .membership-privacy{border:0;width:calc(100% + 50px);margin:0 0 0 -25px;background:#eceae6;padding:25px 25px 10px 25px;border-top:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.article-with-sidebar aside section.membership .membership-privacy p{color:#999388;font-style:normal}.article-with-sidebar aside section.membership .membership-privacy a{color:#615847}.article-with-sidebar aside section.membership .membership-privacy a:hover{color:#393225}.article-with-sidebar aside section.membership form input.email:focus+input+.membership-privacy{display:block}.article-with-sidebar aside section.recommended-posts{background:#70bdc2;color:#fff}.article-with-sidebar aside section.recommended-posts a{color:#d5eeef}.article-with-sidebar aside section.recommended-posts a:hover{color:#fff}.article-with-sidebar aside section.recommended-posts ul img{border-top:1px solid #58a9ae;padding:15px 25px 15px 25px;border-radius:3px;border-top-left-radius:0;border-top-right-radius:0}.article-with-sidebar aside section.recommended-posts h3{border-top:1px solid #58a9ae;padding:15px 25px 10px 25px}.article-with-sidebar aside section.recommended-posts .button{background:#fff;color:#70bdc2}.article-with-sidebar aside section.recommended-posts .button:hover{color:#4c8083;background:rgba(255,255,255,.8)}.article-with-sidebar aside section.recommended-posts.similar-designs{background:#e5e5e5;color:#444}.article-with-sidebar aside section.recommended-posts.similar-designs ul img{width:200%;max-width:100%;float:none;border-top:1px solid #ddd}.article-with-sidebar aside section.recommended-posts.sidebar-feature.sticky{top:30px}.sidebar-feature{font-size:14px}.sidebar-feature-inner{background:#bfdddf;margin-left:-25px;width:calc(100% + 50px);padding:10px 25px 0 25px;border-bottom-left-radius:3px;border-bottom-right-radius:3px}.article-with-sidebar aside section.recommended-posts.sidebar-feature .sidebar-feature-inner a{color:#68a3a8}.article-with-sidebar aside section.recommended-posts.sidebar-feature h2{margin-bottom:1em}.article-with-sidebar aside section.recommended-posts.sidebar-feature h2 a{color:#fff;border-bottom:1px solid rgba(255,255,255,0)}.article-with-sidebar aside section.recommended-posts.sidebar-feature h2 a:hover{border-bottom:1px solid #d5eeef}.article-with-sidebar aside section.recommended-posts.sidebar-feature h3,.article-with-sidebar aside section.recommended-posts.sidebar-feature h4{text-transform:uppercase;font-size:12px;font-weight:700;border:none}.article-with-sidebar aside section.recommended-posts.sidebar-feature h3{padding-left:0}.article-with-sidebar aside section.recommended-posts.sidebar-feature .sidebar-feature-inner h3{color:#3a4545}.article-with-sidebar aside section.recommended-posts.sidebar-feature h4{color:#d5eeef}.article-with-sidebar aside section.recommended-posts.sidebar-feature ul{margin:0;padding:0 0 10px 10px;font-weight:700;list-style:disc;display:block}.article-with-sidebar aside section.recommended-posts.sidebar-feature ul li{margin:0 0 10px 7px;padding-left:3px;display:list-item}.article-with-sidebar aside section.recommended-posts.sidebar-feature table tr td a:hover,.article-with-sidebar aside section.recommended-posts.sidebar-feature ul li a:hover{color:#44828f}.sidebar-feature table tr td{padding:3px 0;font-weight:700}.sidebar-feature .table .row .cell img,.sidebar-feature table tr td img{max-width:100%;border:2px solid #fff}.sidebar-feature .table .row .cell:first-child,.sidebar-feature table tr td:first-child{width:100px;padding-right:15px}.article-with-sidebar aside section.recommended-posts.sidebar-feature a.button{background-color:#44828f;color:#fff;margin-top:15px}.article-with-sidebar aside section.recommended-posts.sidebar-feature a.button:hover{background-color:#235e6a}.article-with-sidebar aside section li{margin-bottom:1em}article.full blockquote{display:block;margin:20px 0 30px 0;width:100%;padding:30px;font-size:1.2em;line-height:1.4em;border-radius:3px;background:#222;color:#eee;border:none;font-weight:400!important;font-style:normal}article.full blockquote p{font-weight:400!important;margin-bottom:0;font-size:1em}.pullquote-r{display:block;float:right;margin:20px 0 20px 20px;width:40%;max-width:350px;padding:30px;font-size:1.2em;line-height:1.4em;border-radius:3px;background:#222;color:#eee}article.full aside.series-box{background:#eceae6;color:#444;margin-left:-60px;width:calc(100% + 120px);padding:20px 60px;border-bottom-left-radius:3px;border-bottom-right-radius:3px;margin-bottom:-50px;margin-top:40px;float:none}article.full aside.series-box h3{margin-bottom:.5em}article.full aside.series-box p{font-weight:400!important}article.full aside.series-box .button{background:#70bdc2;font-size:1em;color:#fff;margin-top:1em}article.full aside.series-box .button:hover{background:#91cacd}.feature article.full h2:first-of-type{margin-top:0}.top-pick{background:#fff8e2;width:calc(100% + 120px);margin:50px 0 30px -60px;padding:0 60px 30px 60px;border-bottom:1px solid #ffe080}article.full .top-pick img{padding:0;border:none}article.full .top-pick h2{margin:20px 0 20px 0;padding:0}article.full .top-pick p:first-of-type{font-weight:400}article.full .top-pick span{background-color:#ffe080;color:#ebb100;text-transform:uppercase;font-weight:700;display:block;margin:-10px 0 0 -60px;width:calc(100% + 120px);padding:10px 0 10px 60px}article.full form{margin-top:2em}.gallery-nav .search form,header .search{position:relative}.gallery-nav .search input.searchbox,header .search input.searchbox{font-size:1em;color:#ccc;width:100%;max-width:none}.gallery-nav .search input.searchbox{width:100%;max-width:none}.gallery-nav .search input.searchbox:hover,header .search input.searchbox:hover{background-color:#f6f6f6}.gallery-nav .search input.searchbox:active,.gallery-nav .search input.searchbox:focus,header .search input.searchbox:active,header .search input.searchbox:focus{background-color:#f6f6f6;color:#444}.gallery-nav .search input[type=submit],header .search input[type=submit]{line-height:22px;color:#999;font-weight:400;position:absolute;top:6px;right:1px;font-size:15px;margin:0;padding:0;border:none;background:0 0;width:35px;height:33px;border-radius:0}.gallery-nav .search input[type=submit]{top:5px}.gallery-nav .search input[type=submit]:hover,header .search button:hover{cursor:pointer}.gallery-nav .search .icon-search,header .search .icon-search{color:#ccc}.gallery-nav .search .icon-search:hover,header .search .icon-search:hover{color:#444}article.full .article-meta td{padding:7px}article.full label[for=newsletter]{line-height:0}article.full .accepted,article.full .pending{background:#98b880;color:#fff;font-size:.8em;padding:3px 10px;font-weight:700;margin-left:5px}article.full .rejected{background:#f0f0f0;color:#555;font-size:.8em;padding:3px 10px;font-weight:700;margin-left:5px}.wrapper-header{margin:0;padding:20px 50px}.logo a{text-indent:-9999px;background-image:url(/images/designshack@2x.png);background-size:258px 39px;background-repeat:no-repeat;display:inline-block;margin-top:6px;line-height:39px;width:258px}.wrapper-nav,.wrapper-subnav{margin:0}.wrapper-nav{background-color:#98b880}nav a{transition-duration:10ms!important}nav ul li a{background:0 0;color:#fff;font-weight:400;padding:9px 12px}nav ul li a:hover{background:rgba(255,255,255,.2);color:#fff}nav ul li a.current{background-repeat:no-repeat;background-position:center bottom;background-image:url(/images/navarrow@2x.png);-webkit-background-size:auto 5px;-moz-background-size:auto 5px;background-size:auto 5px;background-color:#98b880}nav ul li a.current.top-level{background-image:url(/images/navarrow@2x_grey.png)}nav ul li:hover>a{background-color:#8ca86d;background-repeat:no-repeat;background-position:center bottom;background-image:url(/images/navarrow@2x_green.png);-webkit-background-size:auto 5px;-moz-background-size:auto 5px;background-size:auto 5px;background-color:#98b880;transition-duration:0s!important}nav ul li:hover>a.current.top-level{background-image:url(/images/navarrow@2x_green.png)}nav ul ul{background:#8ca86d}nav ul li:hover>ul{width:175px!important}nav ul li ul.features-nav{width:740px!important;padding:0 20px 20px 20px;column-count:4}nav ul ul li{width:175px}nav ul li ul.features-nav li a{padding:7px 12px;border-radius:2px}nav ul ul li.wide{width:calc(100% - 20px);display:block;color:#fff;font-weight:700;border-bottom:2px solid rgba(255,255,255,.1);font-size:1.17em;padding:0 12px 0 0;margin:35px 0 20px 0;background:#8ca86d;column-span:all;line-height:0}ul.features-nav li.wide span{background:#8ca86d;padding:0 20px 0 12px}nav ul ul li a{color:rgba(255,255,255,.8)}nav ul ul li a:hover{background:rgba(0,0,0,.05)}.wrapper-subnav{background-color:#fff}.wrapper-subnav nav ul li a{color:#333;font-weight:400;text-transform:none}.wrapper-subnav nav ul li a:hover{color:#999;background:#f8f8f8}.wrapper-subnav nav ul li.current-cat a{background:#e8f1e2;color:#96b880}.wrapper-subnav ol{list-style:none;margin:0;padding:0;text-align:left}.wrapper-subnav ol li{display:inline-block}.wrapper-subnav ol li a,.wrapper-subnav ol li span.current,.wrapper-subnav ol span.seperator{display:inline-block;padding:9px 12px;color:#888;font-weight:400;background:#fff;margin:0}.wrapper-subnav ol li span.current{color:#ccc}.wrapper-subnav ol li a:hover{color:#444}.wrapper-subnav ol span.seperator{padding:9px 2px;color:#ddd}@media (min-width:1024px){.responsive-nav:target ul li ul{width:200px;position:absolute}nav ul li:hover>ul{width:200px}.responsive-nav ul li ul li{float:none;display:block;text-align:left}}.gallery-nav{margin-bottom:0;padding-bottom:0}.gallery-nav .color a{border:none}.gallery-nav .color a.remove-filter{text-indent:0}.gallery-nav select{color:#444;background-image:url(/images/dropdownarrow.png);height:38px}.gallery-nav .color a{width:25px;height:25px}.gallery-nav .search input.searchbox{font-size:1em}.masonry.gallery .item .content.image-full h2{font-size:1em;margin-bottom:0}article.design-hero{position:relative;overflow:hidden}article.design-hero::before{content:"";position:absolute;top:0;left:0;filter:blur(30px);background-size:cover;background-position:center;margin:-20px}article.design-hero.full{padding:0}article.design-hero.full .article{padding:50px 60px}article.design-hero .article{position:relative}article.design-hero .article p:first-of-type,article.design-meta p:first-of-type{font-weight:400!important}article.design-hero .article figure.design{max-width:900px;margin-top:2em}article.design-meta h3{margin-top:1.5em}article.design-page section .page-information{margin-top:40px}.page-information aside{float:right;margin:0 0 20px 20px;padding:0}.page-information aside img{max-width:306px;height:auto}.article-with-sidebar aside section.percentage.sticky{top:50px}.article-with-sidebar aside section.toc.sticky{top:50px}.toc-percentage-container{position:absolute;top:0;left:0;width:100%;background-color:#96b880;border-top-left-radius:3px;border-top-right-radius:3px}#toc-percentage{background-color:rgba(0,0,0,.1);width:5%;height:8px;max-width:100%}.toc ol li a.passed{opacity:.5}.article-with-sidebar aside section.toc{background:#96b880;color:#fff;border-radius:3px}.article-with-sidebar aside section.toc a{color:#fff}.article-with-sidebar aside section.toc a:hover{opacity:.5}.article-with-sidebar aside section.toc ol{list-style:none;margin:0;padding:0}.article-with-sidebar aside section.toc ol li{margin:0 0 10px 0}.article-with-sidebar aside section.toc h3{margin:0 0 1em 0;font-size:1.2em;border-bottom:1px solid rgba(255,255,255,.2);padding:0 0 10px 0}aside.article-meta{float:right;background:#f0f0f0;padding:25px;min-width:300px;text-transform:uppercase;font-size:.75em;color:#888;font-weight:700;max-width:306px}article.full aside.article-meta{background:#f5f5f5}article.full aside.article-meta td{background:0 0}aside.article-meta img{margin:-25px 0 25px -25px;max-width:none;width:calc(100% + 50px)}aside.article-meta td{padding:7px}.article-meta tr td:first-child{color:#444}.wrapper.feature-related-articles{background:#ececec}.wrapper.feature-related-articles .masonry{border:none;padding-bottom:50px}.wrapper.feature-related-articles h2{display:block;width:100%;text-align:center;padding:2em 0;color:#ccc;text-transform:uppercase;font-family:'Proxima Nova Black'}.wrapper.feature-related-articles.last-block{margin-bottom:0}.wrapper.feature-related-articles.last-block .masonry{margin-bottom:0}footer{grid-template-columns:28% 36% auto}.wrapper-footer{margin-bottom:0;margin-top:0;padding:20px 50px 20px 50px}footer a{color:#666}footer a:hover{color:#333}footer p{padding:10px}.kinsta-link{float:left;background:url(/images/kinsta-logo@2x.png) right center no-repeat;-webkit-background-size:auto 16px;-moz-background-size:auto 16px;background-size:auto 16px;width:212px;display:block}.wrapper-footer.footer-features{padding:50px 50px 50px 50px;background:#70bdc2;margin:0 0 70px 0}.wrapper-footer.footer-features h3{margin:0!important;color:rgba(255,255,255,.5)}.footer-features .page-information{background-color:rgba(255,255,255,.2)}.footer-features .page-information h2{color:#fff}.footer-features .page-information p{color:rgba(255,255,255,.9)}.footer-features .masonry{border-bottom:2px solid rgba(0,0,0,.1)}.footer-features .item-thumbnail{min-height:none}.footer-features p.pagination .button{background:rgba(0,0,0,.3)}.footer-features p.pagination .button:hover{background:rgba(0,0,0,.2)}.colorscheme{width:100%}.colorscheme span{padding:10px 20px;color:rgba(0,0,0,.5);width:100px;display:block;float:left;font-size:.8em;text-transform:uppercase;margin-bottom:20px;text-align:center;font-weight:700}.colorscheme span.dark{color:rgba(255,255,255,.8)}@media only screen and (max-width:780px){header{grid-template-columns:270px auto}footer{grid-template-columns:100%;grid-gap:10px}.content-ad-728{display:none}nav ul li ul.features-nav{width:500px!important;padding:0 20px 20px 20px;column-count:2}ul.category-archive-list{column-count:2}}@media only screen and (max-width:600px){header{grid-template-columns:100%;grid-gap:10px}header .search input.searchbox{width:100%;max-width:none}nav ul li ul.features-nav{width:290px!important;padding:0 20px 20px 20px;column-count:1}nav ul ul li{width:100%}.wrapper.single-wrapper{margin:0;padding:0}.wrapper.single-wrapper aside{margin:0;padding:10px 30px}.pullquote-r{width:100%;float:none;margin:1em 0;max-width:none}article.full{padding:50px 30px}article.full .tutorialimage{margin-left:-30px;width:calc(100% + 60px)}article.full aside.series-box{margin:0;width:100%;padding:5px 30px;border-radius:3px}ul.category-archive-list{display:none}}@font-face{font-family:'Proxima Nova Black';font-display:fallback;src:url(/framework/fonts/Black-webfont.woff2) format('woff2');font-weight:400;font-style:normal}@font-face{font-family:'Proxima Nova';font-display:fallback;src:url(/framework/fonts/Bold-webfont.woff2) format('woff2');font-weight:700;font-style:normal}@font-face{font-family:'Proxima Nova';font-display:fallback;src:url(/framework/fonts/Regular-webfont.woff) format('woff');font-weight:400;font-style:normal}.jcrop-dragbar.ord-s,.jcrop-handle.ord-s,.jcrop-handle.ord-se,.jcrop-handle.ord-sw{bottom:0;margin-bottom:-4px}.jcrop-dragbar.ord-e,.jcrop-handle.ord-e,.jcrop-handle.ord-ne,.jcrop-handle.ord-se{margin-right:-4px;right:0}.jcrop-holder{direction:ltr;text-align:left}.jcrop-hline,.jcrop-vline{background:url(Jcrop.gif) top left #fff;font-size:0;position:absolute}.jcrop-vline{height:100%;width:1px!important}.jcrop-hline{height:1px!important;width:100%}.jcrop-vline.right{right:0}.jcrop-hline.bottom{bottom:0}.jcrop-handle{background-color:#333;border:1px solid #eee;font-size:1px}.jcrop-tracker{height:100%;width:100%;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none}.jcrop-handle.ord-n{left:50%;margin-left:-4px;margin-top:-4px;top:0}.jcrop-handle.ord-e,.jcrop-handle.ord-w{margin-top:-4px;top:50%}.jcrop-handle.ord-s{left:50%;margin-left:-4px}.jcrop-handle.ord-nw,.jcrop-handle.ord-sw,.jcrop-handle.ord-w{left:0;margin-left:-4px}.jcrop-handle.ord-ne,.jcrop-handle.ord-nw{top:0;margin-top:-4px}.jcrop-dragbar.ord-n,.jcrop-dragbar.ord-s{height:7px;width:100%}.jcrop-dragbar.ord-e,.jcrop-dragbar.ord-w{height:100%;width:7px}.jcrop-dragbar.ord-n{margin-top:-4px}.jcrop-dragbar.ord-w{margin-left:-4px}.jcrop-light .jcrop-hline,.jcrop-light .jcrop-vline{background:#fff;filter:Alpha(opacity=70)!important;opacity:.7!important}.jcrop-light .jcrop-handle{-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#000;border-color:#fff;border-radius:3px}.jcrop-dark .jcrop-hline,.jcrop-dark .jcrop-vline{background:#000;filter:Alpha(opacity=70)!important;opacity:.7!important}.jcrop-dark .jcrop-handle{-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#fff;border-color:#000;border-radius:3px}.jcrop-holder img,img.jcrop-preview{max-width:none}.tutorialimage a{position:relative}article.content-marketing .tutorialimage a::after{content:"Free";background:#9ab78b;color:#fff;font-weight:700;display:block;padding:6px 10px;text-align:center;position:absolute;width:60px;bottom:40px;right:20px;text-transform:uppercase;font-size:.8em}article.content-marketing .tutorialimage a.cm-link::after,article.content-marketing .tutorialimage a.elements-link::after,article.content-marketing .tutorialimage a.market-link::after{content:"";background:0 0;width:0}article.content-marketing .top-pick .tutorialimage a::after,article.content-marketing .tutorialimage a.nolabel::after{display:none}@media only screen and (max-width:600px){.elements-block{display:none}}.elements-block .button{background-color:#749559}article.full .elements-block h4{font-size:1em;font-weight:700;margin-bottom:0}article.full .elements-block h5{text-transform:uppercase;font-size:12px;color:#ccc;font-weight:700;margin:.5em 0}.elements-block .button:hover{background-color:#9ab782}.elements-block .elements-items{margin-bottom:20px}.elements-block .elements-items a{width:32%;float:left;margin-right:2%;margin-bottom:15px;padding:15px;border-radius:2px;background:#f5f5f5;color:#444}.elements-block .elements-items a img{margin-bottom:0}.elements-block .elements-items a:hover{background-color:#ececec}.elements-block .elements-items a:hover img{opacity:1}.elements-block .elements-items a:nth-child(3n){margin-right:0}.elements-items:after{content:"";display:table;clear:both}article.full .elements-block p:first-of-type{font-weight:400}section.carbon{padding-bottom:20px}#carbonads{display:flex;max-width:330px}#carbonads a{color:inherit;text-decoration:none}#carbonads a:hover{color:inherit}#carbonads span{position:relative;display:block;overflow:hidden}#carbonads .carbon-wrap{display:flex}.carbon-img{display:block;margin:0;line-height:1}.carbon-img img{display:block}.carbon-text{font-size:13px;padding:15px 0 15px 15px;line-height:1.5;text-align:left}.carbon-poweredby{display:block;padding:20px 0 0 0;text-align:center;text-transform:uppercase;letter-spacing:.5px;font-weight:600;font-size:9px;line-height:1;color:#ccc!important}.carbon-poweredby:hover{color:#aaa!important}

  </style>
<style>
    .masonry { grid-auto-rows: auto; }
    .masonry .item .content { height:100%; }
    </style>
<link href="/framework/crayon.min.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div class="top-bar login-bar">
<p>Are you a member? <a href="https://designshack.net/membership/" title="Register">Register</a> or <a href="https://designshack.net/signin/" title="Login to Design Shack">Login</a></p>
</div>
<div class="wrapper wrapper-header">
<header>
<div class="logo"> <a href="https://designshack.net">Design Shack</a>
</div> <div class="social-links" itemscope itemtype="http://schema.org/Organization">
<link itemprop="url" href="https://designshack.net" />
<a itemprop="sameAs" href="https://twitter.com/designshack" class="icon-twitter" title="@designshack on Twitter"><span>Twitter</span></a>
<a itemprop="sameAs" href="https://facebook.com/designshack" class="icon-facebook" title="Facebook"><span>Facebook</span></a>
<a itemprop="sameAs" href="https://www.pinterest.com/designshack/" title="Pinterest" class="icon-pinterest"><span>Pinterest</span></a>
<a href="http://feedpress.me/designshack" title="RSS Feed" class="icon-rss"><span>RSS Feed</span></a>
</div>
<div class="search"><form action="/query/"><input name="s" onfocus="this.value=''" value="Search Design Shack" type="text" class="searchbox" aria-label="Search" /><input type="submit" class="icon-search" value="&#xe613" /></form></div>
</header>
</div>
<div class="wrapper wrapper-nav">
<nav>
<ul>
<li>
<a href="https://designshack.net/articles/" title="Articles" class="current">Articles</a>
<ul class="features-nav">
<li class="wide"><span>Applications</span></li>
<li><a href="https://designshack.net/indesign-templates/" title="InDesign Templates">Adobe InDesign</a></li>
<li><a href="https://designshack.net/lightroom-presets/" title="Lightroom Presets">Adobe Lightroom</a></li>
<li><a href="https://designshack.net/premiere-pro-templates/" title="Premiere Pro Templates">Adobe Premiere Pro</a></li>
<li><a href="https://designshack.net/adobe-xd-templates/" title="Adobe XD Templates">Adobe XD</a></li>
<li><a href="https://designshack.net/affinity-designer-templates/" title="Affinity Designer">Affinity Designer</a></li>
<li><a href="https://designshack.net/affinity-publisher-templates/" title="Affinity Publisher">Affinity Publisher</a></li>
<li><a href="https://designshack.net/after-effects-templates/" title="After Effects Templates">After Effects</a></li>
<li><a href="https://designshack.net/bootstrap/" title="Bootstrap">Bootstrap</a></li>
<li><a href="https://designshack.net/davinci-resolve-templates/" title="DaVinci Resolve Templates">DaVinci Resolve</a></li>
<li><a href="https://designshack.net/figma/" title="Figma Templates">Figma</a></li>
<li><a href="https://designshack.net/final-cut-pro-templates/" title="Final Cut Pro Templates">Final Cut Pro</a></li>
<li><a href="https://designshack.net/google-fonts/" title="Google Fonts">Google Fonts</a></li>
<li><a href="https://designshack.net/google-slides-themes/" title="Google Slides Themes">Google Slides</a></li>
<li><a href="https://designshack.net/instagram-templates/" title="Instagram Templates">Instagram</a></li>
<li><a href="https://designshack.net/keynote-templates/" title="Keynote Templates">Keynote</a></li>
<li><a href="https://designshack.net/photoshop-actions/" title="Photoshop Actions">Photoshop Actions</a></li>
<li><a href="https://designshack.net/photoshop-brushes/" title="Photoshop Brushes">Photoshop Brushes</a></li>
<li><a href="https://designshack.net/powerpoint-templates/" title="PowerPoint Templates">PowerPoint</a></li>
<li><a href="https://designshack.net/procreate/" title="Procreate Brushes">Procreate</a></li>
<li><a href="https://designshack.net/word-templates/" title="Microsoft Word Templates">Microsoft Word</a></li>
<li><a href="https://designshack.net/sketch-templates/" title="Sketch Templates">Sketch</a></li>
<li><a href="https://designshack.net/tumblr-themes/" title="Tumblr Themes">Tumblr</a></li>
<li class="wide"><span>Design Projects</span></li>
<li><a href="https://designshack.net/app-templates/" title="App Templates">App Templates</a></li>
<li><a href="https://designshack.net/background-textures/" title="Background Textures">Background Textures</a></li>
<li><a href="https://designshack.net/brochure-templates/" title="Brochure Templates">Brochures</a></li>
<li><a href="https://designshack.net/business-card-templates/" title="Business Card Templates">Business Cards</a></li>
<li><a href="https://designshack.net/christmas-templates/" title="Christmas Templates">Christmas</a></li>
<li><a href="https://designshack.net/cv-resume/" title="CV &amp; Resume Templates">CV &amp; Resumes</a></li>
<li><a href="https://designshack.net/email-templates/" title="Email Templates">Email Templates</a></li>
<li><a href="https://designshack.net/flyer-templates/" title="Flyer Templates">Flyers</a></li>
<li><a href="https://designshack.net/font-collections/" title="Font Collections">Fonts</a></li>
<li><a href="https://designshack.net/free-ios-icons/" title="iOS Icons">Free iOS Icons</a></li>
<li><a href="https://designshack.net/iphone-mockups/" title="iPhone Mockups">iPhone Mockups</a></li>
<li><a href="https://designshack.net/logo-templates/" title="Logo Templates">Logo Templates</a></li>
<li><a href="https://designshack.net/mockup-templates/" title="Mockup Templates">Mockup Templates</a></li>
<li><a href="https://designshack.net/poster-design/" title="Poster Design">Posters</a></li>
<li><a href="https://designshack.net/wedding-design/" title="Wedding Design">Weddings</a></li>
<li class="wide"><span>Categories</span></li>
<li class="cat-item cat-item-264"><a href="https://designshack.net/category/articles/business-articles/" title="Learn how to run your design business, work with clients, manage expectations, and handle your finances.">Business</a>
</li>
<li class="cat-item cat-item-913"><a href="https://designshack.net/category/articles/css/" title="Learn the latest tips, techniques, and approaches for laying out your websites with CSS and stylesheets.">CSS</a>
</li>
<li class="cat-item cat-item-10"><a href="https://designshack.net/category/articles/graphics/" title="Inspiring advice, tips, and suggestions for improving your graphic design skills, logo design, working with templates, and more.">Graphics</a>
</li>
<li class="cat-item cat-item-911"><a href="https://designshack.net/category/articles/inspiration/" title="Beautiful, inspiring examples of graphic design, mockups, presentation templates, websites, fonts, icons, and more.">Inspiration</a>
</li>
<li class="cat-item cat-item-11"><a href="https://designshack.net/category/articles/layouts/" title="Advice for crafting layouts and structure that can create a clear, original web design. Break the mould, and build a unique layout!">Layouts</a>
</li>
<li class="cat-item cat-item-904"><a href="https://designshack.net/category/articles/mobile/" title="Learn how to put mobile first in your designs, for phones, tablets, and wearable devices. Create responsive designs, and tap-friendly layouts!">Mobile</a>
</li>
<li class="cat-item cat-item-909"><a href="https://designshack.net/category/articles/navigation/" title="Learn how to craft effective navigation for your website — on desktop or mobile. Design navigation that helps users easily find what they&#039;re looking for.">Navigation</a>
</li>
<li class="cat-item cat-item-908"><a href="https://designshack.net/category/articles/software/" title="Reviews, tutorials, and news about apps and software for designers. Learn about the latest and greatest Mac, web, and mobile apps for creatives.">Software</a>
</li>
<li class="cat-item cat-item-1059"><a href="https://designshack.net/category/articles/trends/" title="Stay on top of the latest design trends, see what&#039;s popular, and learn how to create design work that feels modern, current, and up-to-date.">Trends</a>
</li>
<li class="cat-item cat-item-905"><a href="https://designshack.net/category/articles/typography/" title="Learn how to work with fonts, lay out typography, pair different typefaces, and find collections of inspiring fonts to use in your next project.">Typography</a>
</li>
<li class="cat-item cat-item-903"><a href="https://designshack.net/category/articles/ux-design/" title="Tips for creating designs that give the user a delightful, clear, and well-planned experience with a high-quality UX (user experience).">UX Design</a>
</li>
<li><a href="https://designshack.net/categories/" class="more">More →</a></li>
</ul>
</li>
<li>
<a href="https://designshack.net/gallery/" title="Design Gallery" class="">Gallery</a>
<ul>
<li><a href="/gallery/">All</a></li>
<li><a href="/gallery/category/web/">Web Design</a></li>
<li><a href="/gallery/category/logo/">Logo</a></li>
<li><a href="/gallery/category/interface/">Interface</a></li>
<li><a href="/gallery/category/print/">Print</a></li>
</ul>
</li>
<li>
<a href="https://designshack.net/about/" title="About Design Shack">About</a>
<ul>
<li><a href="https://designshack.net/membership/">Membership</a></li>
<li><a href="https://designshack.net/advertising/">Advertising</a></li>
<li><a href="https://designshack.net/write-for-us/">Write for Us</a></li>
<li><a href="https://designshack.net/contact/">Contact</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="wrapper wrapper-subnav">
<nav id="responsive-nav" class="responsive-nav">
<ol vocab="https://schema.org/" typeof="BreadcrumbList">
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" href="https://designshack.net/"><span property="name">Home</span></a><meta property="position" content="1"> <span class="seperator">›</span></li>
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" href="https://designshack.net/category/articles/"><span property="name">Articles</span></a><meta property="position" content="2"> <span class="seperator">›</span></li>
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" href="https://designshack.net/category/articles/css/"><span property="name">CSS</span></a><meta property="position" content="3"> <span class="seperator">›</span></li>
<li property="itemListElement" typeof="ListItem">
<span property="name" class="current">Use Pseudo Elements to Create an Image Stack Illusion</span><meta property="position" content="4"></li>
</ol>
</nav>
</div>
<main class="container main">
<div class="row">
<div class="wrapper single-wrapper">
<div class="article-with-sidebar">
<article class="full ">
<h1>Use Pseudo Elements to Create an Image Stack Illusion</h1>
<aside class="article-meta">
<img width="300" height="200" src="https://designshack.net/wp-content/uploads/stackscss-f.jpg" class="home_feature_thumbnail wp-post-image" alt="Use Pseudo Elements to Create an Image Stack Illusion" srcset="https://designshack.net/wp-content/uploads/stackscss-f.jpg 300w, https://designshack.net/wp-content/uploads/stackscss-f-150x100.jpg 150w" sizes="(max-width: 300px) 100vw, 300px" /> <table>
<tbody>
<tr>
<td>On:</td>
<td>12 Mar 2012</td>
</tr>
<tr>
<td>By:</td>
<td>
<a href="https://designshack.net/author/joshuajohnson/">Joshua Johnson</a>
</td>
</tr>
<tr>
<td>Category:</td>
<td><a href="https://designshack.net/category/articles/css/">CSS</a></td>
</tr>
<tr>
<td>Length:</td>
<td>10 min read</td>
</tr>
</tbody>
</table>
</aside>
<p>Today we&#8217;re going to see if we can take a single image inserted via HTML and make it look like a messy stack of images using only CSS. The key: pseudo elements.</p>
<p>Along the way we&#8217;ll see how embarking on a project like this can quickly lead to some messy code and how we can combat that with some awesome DRY coding practices. </p>
<div class="elements-block">
<h3><a href="/out/ca/use-pseudo-elements-to-create-an-image-stack-illusion/7/0/0/title/">2 Million+ Digital Assets, With Unlimited Downloads</a></h3>
<p>Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.</p>
<div class="elements-items">
<a href="/out/ca/use-pseudo-elements-to-create-an-image-stack-illusion/7/33/0/item/web-templates/">
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" media="(max-width: 600px)">
<img src="/images/content-ads/web-templates-titan.jpg" alt="Web Templates" width="219" height="146">
</picture>
<h4>Web Templates</h4>
<h5>Landing Pages & Email</h5>
</a>
<a href="/out/ca/use-pseudo-elements-to-create-an-image-stack-illusion/7/29/0/item/fonts/">
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" media="(max-width: 600px)">
<img src="/images/content-ads/fonts-letter-crafts.jpg" alt="Fonts" width="219" height="146">
</picture>
<h4>Fonts</h4>
<h5>Sans Serif, Script & More</h5>
</a>
<a href="/out/ca/use-pseudo-elements-to-create-an-image-stack-illusion/7/26/0/item/graphic-templates/">
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" media="(max-width: 600px)">
<img src="/images/content-ads/graphic-templates-stationery.jpg" alt="Graphic Templates" width="219" height="146">
</picture>
<h4>Graphic Templates</h4>
<h5>Logos, Print & Mockups</h5>
</a>
<a href="/out/ca/use-pseudo-elements-to-create-an-image-stack-illusion/7/34/0/item/cms-templates/">
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" media="(max-width: 600px)">
<img src="/images/content-ads/cms-template-gradient.jpg" alt="CMS Templates" width="219" height="146">
</picture>
<h4>CMS Templates</h4>
<h5>Shopify, Tumblr & More</h5>
</a>
<a href="/out/ca/use-pseudo-elements-to-create-an-image-stack-illusion/7/31/0/item/presentation-templates/">
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" media="(max-width: 600px)">
<img src="/images/content-ads/presentation-clean.jpg" alt=" Presentation Templates" width="219" height="146">
</picture>
<h4> Presentation Templates</h4>
<h5>PowerPoint & Keynote</h5>
</a>
<a href="/out/ca/use-pseudo-elements-to-create-an-image-stack-illusion/7/30/0/item/graphics/">
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" media="(max-width: 600px)">
<img src="/images/content-ads/graphics-line-icons.jpg" alt="Graphics" width="219" height="146">
</picture>
<h4>Graphics</h4>
<h5>Icons, Vectors & More</h5>
</a>
</div>
<p><a class="button" href="/out/ca/use-pseudo-elements-to-create-an-image-stack-illusion/7/0/7/button/">Explore Design Resources</a></p></div>
<h2>The Challenge</h2>
<p>I was checking out some of the amazing content on our new downloads site, <a href="http://pixelsdaily.com/">Pixels Daily</a>, and I found a great little free PSD called <a href="http://pixelsdaily.com/resources/photoshop/psds/stacks/">Stacks</a> that helps you quickly and easily build a stack of Polaroid-esque images in Photoshop.</p>
<div class="tutorialimage"><img class="alignNone size-full wp-image-1611" src="https://designshack.net/wp-content/uploads/stackscss-1.jpg" alt="screenshot" width="510" /></div>
<p>As you can see, it&#8217;s a pretty attractive effect. As soon as I saw it, I immediately wanted to try to pull it off with CSS. It&#8217;s a tricky situation though because there are multiple layers stacked on top of each other and we don&#8217;t want to clutter up our markup with three images for every gallery item. So how can we perform this illusion while minimizing our HTML markup? </p>
<p>It turns out, the answer that I was looking for lies in pseudo elements. This is a perfect use case to display the magic of :before and :after. Let&#8217;s get started.</p>
<h2>The HTML</h2>
<p>To create our first stack, the only HTML we&#8217;ll need is a div with an image inside of it. That&#8217;s all! The rest of the fancy footwork will all be performed via CSS. Make sure you add the &#8220;stackone&#8221; class to the div.</p>
<div>

<div id="crayon-620d078557a91835229108" class="crayon-syntax crayon-theme-solarized-light crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 20px !important;">
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="">
<table class="crayon-table">
<tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-620d078557a91835229108-1">1</div><div class="crayon-num" data-line="crayon-620d078557a91835229108-2">2</div><div class="crayon-num" data-line="crayon-620d078557a91835229108-3">3</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-620d078557a91835229108-1"><span class="crayon-h">&lt;</span><span class="crayon-e">div </span><span class="crayon-t">class</span>=<span class="crayon-s">'stackone'</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-620d078557a91835229108-2"><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-h">&lt;</span><span class="crayon-e">img </span><span class="crayon-i">src</span>=<span class="crayon-s">"http://lorempixum.com/200/200/city/7"</span><span class="crayon-h"> </span>/<span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-620d078557a91835229108-3"><span class="crayon-h">&lt;</span>/<span class="crayon-i">div</span><span class="crayon-h">&gt;</span></div></div></td>
</tr>
</table>
</div>
</div>

</div>
<p></p>
<h2>Basic Styles</h2>
<p>Nothing complicated here, just a basic margin/padding reset so our browsers get on the same page. Also, the borders on our images will be white so you&#8217;ll want to give the background a tint of some kind. </p>
<div>

<div id="crayon-620d078557a96191467120" class="crayon-syntax crayon-theme-solarized-light crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 20px !important;">
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="">
<table class="crayon-table">
<tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-620d078557a96191467120-1">1</div><div class="crayon-num" data-line="crayon-620d078557a96191467120-2">2</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-620d078557a96191467120-1">*<span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-i">margin</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-i">padding</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-620d078557a96191467120-2"><span class="crayon-e">body</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-i">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-p">#ccd3d7;}</span></div></div></td>
</tr>
</table>
</div>
</div>

</div>
<p></p>
<h2>Top Image Styles</h2>
<p>Now it&#8217;s time to turn our boring image into something a little more interesting. Here&#8217;s a chunk of code to get you started:</p>
<div>

<div id="crayon-620d078557a97566131469" class="crayon-syntax crayon-theme-solarized-light crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 20px !important;">
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="">
<table class="crayon-table">
<tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-620d078557a97566131469-1">1</div><div class="crayon-num" data-line="crayon-620d078557a97566131469-2">2</div><div class="crayon-num" data-line="crayon-620d078557a97566131469-3">3</div><div class="crayon-num" data-line="crayon-620d078557a97566131469-4">4</div><div class="crayon-num" data-line="crayon-620d078557a97566131469-5">5</div><div class="crayon-num" data-line="crayon-620d078557a97566131469-6">6</div><div class="crayon-num" data-line="crayon-620d078557a97566131469-7">7</div><div class="crayon-num" data-line="crayon-620d078557a97566131469-8">8</div><div class="crayon-num" data-line="crayon-620d078557a97566131469-9">9</div><div class="crayon-num" data-line="crayon-620d078557a97566131469-10">10</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-620d078557a97566131469-1"><span class="crayon-sy">.</span><span class="crayon-i">stackone</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-620d078557a97566131469-2"><span class="crayon-h"> </span><span class="crayon-i">border</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">6px</span><span class="crayon-h"> </span><span class="crayon-i">solid</span><span class="crayon-h"> </span><span class="crayon-p">#fff;</span></div><div class="crayon-line" id="crayon-620d078557a97566131469-3"><span class="crayon-h"> </span><span class="crayon-t">float</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">left</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a97566131469-4"><span class="crayon-h"> </span><span class="crayon-i">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">200px</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-i">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">200px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a97566131469-5"><span class="crayon-h"> </span><span class="crayon-i">margin</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">50px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a97566131469-6"><span class="crayon-h"> </span><span class="crayon-i">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">relative</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a97566131469-7"><span class="crayon-h"> </span>-<span class="crayon-i">webkit</span>-<span class="crayon-i">box</span>-<span class="crayon-i">shadow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">5px</span><span class="crayon-h"> </span><span class="crayon-e">rgba</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0.3</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a97566131469-8"><span class="crayon-h"> </span>-<span class="crayon-i">moz</span>-<span class="crayon-i">box</span>-<span class="crayon-i">shadow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">5px</span><span class="crayon-h"> </span><span class="crayon-e">rgba</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0.3</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a97566131469-9"><span class="crayon-h"> </span><span class="crayon-i">box</span>-<span class="crayon-i">shadow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">5px</span><span class="crayon-h"> </span><span class="crayon-e">rgba</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0.3</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a97566131469-10"><span class="crayon-sy">}</span></div></div></td>
</tr>
</table>
</div>
</div>

</div>
<p></p>
<p>There&#8217;s a lot going on here so let&#8217;s tear it up piece by piece. These four lines determine our size and positioning: </p>
<div>

<div id="crayon-620d078557a98569333403" class="crayon-syntax crayon-theme-solarized-light crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 20px !important;">
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="">
<table class="crayon-table">
<tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-620d078557a98569333403-1">1</div><div class="crayon-num" data-line="crayon-620d078557a98569333403-2">2</div><div class="crayon-num" data-line="crayon-620d078557a98569333403-3">3</div><div class="crayon-num" data-line="crayon-620d078557a98569333403-4">4</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-620d078557a98569333403-1"><span class="crayon-t">float</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">left</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a98569333403-2"><span class="crayon-i">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">200px</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-i">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">200px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a98569333403-3"><span class="crayon-i">margin</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">50px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a98569333403-4"><span class="crayon-i">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">relative</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</table>
</div>
</div>

</div>
<p></p>
<p>Because we&#8217;re going for a gallery effect, we&#8217;ve floated the images to the left and set a fairly arbitrary margin of 50px to space them out nicely. The height and width are set to the dimensions of the image that we used in our HTML (200px by 200px).</p>
<p>The most interesting part of this chunk of code is the positioning context, which is set to relative. As of right now, this isn&#8217;t doing anything. I&#8217;ve only included it because I know that we&#8217;ll be using absolute positioning on the pseudo elements later and I want the position for those to be &#8220;relative&#8221; to this item rather than the page as a whole. </p>
<h3>Icing</h3>
<p>The rest of the code is purely for aesthetic appeal. I added a fairly thick white border along with a box-shadow, being sure to utilize all of the vendor prefixes for maximum compatibility. </p>
<div>

<div id="crayon-620d078557a99959437511" class="crayon-syntax crayon-theme-solarized-light crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 20px !important;">
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="">
<table class="crayon-table">
<tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-620d078557a99959437511-1">1</div><div class="crayon-num" data-line="crayon-620d078557a99959437511-2">2</div><div class="crayon-num" data-line="crayon-620d078557a99959437511-3">3</div><div class="crayon-num" data-line="crayon-620d078557a99959437511-4">4</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-620d078557a99959437511-1"><span class="crayon-i">border</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">6px</span><span class="crayon-h"> </span><span class="crayon-i">solid</span><span class="crayon-h"> </span><span class="crayon-p">#fff;</span></div><div class="crayon-line" id="crayon-620d078557a99959437511-2">-<span class="crayon-i">webkit</span>-<span class="crayon-i">box</span>-<span class="crayon-i">shadow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">5px</span><span class="crayon-h"> </span><span class="crayon-e">rgba</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0.3</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a99959437511-3">-<span class="crayon-i">moz</span>-<span class="crayon-i">box</span>-<span class="crayon-i">shadow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">5px</span><span class="crayon-h"> </span><span class="crayon-e">rgba</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0.3</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a99959437511-4"><span class="crayon-i">box</span>-<span class="crayon-i">shadow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">5px</span><span class="crayon-h"> </span><span class="crayon-e">rgba</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0.3</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</table>
</div>
</div>

</div>
<p></p>
<h3>Progress Check</h3>
<p>At this point the top of our image stack is looking great. With just a few lines of code we&#8217;ve pulled off a decent looking instant camera style effect. </p>
<div class="tutorialimage"><img class="alignNone size-full wp-image-1611" src="https://designshack.net/wp-content/uploads/stackscss-2.jpg" alt="screenshot" width="510" /></div>
<h2>The First Pseudo Element</h2>
<p>Now it&#8217;s time to add in our first piece of the stack. Basically what we want to do is make it look like there&#8217;s another image under our current one. We can do this with the :before pseudo element and much of the same code that we used above.</p>
<p>To being, we use the following syntax:</p>
<div>

<div id="crayon-620d078557a9a823699926" class="crayon-syntax crayon-theme-solarized-light crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 20px !important;">
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="">
<table class="crayon-table">
<tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-620d078557a9a823699926-1">1</div><div class="crayon-num" data-line="crayon-620d078557a9a823699926-2">2</div><div class="crayon-num" data-line="crayon-620d078557a9a823699926-3">3</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-620d078557a9a823699926-1"><span class="crayon-sy">.</span><span class="crayon-i">stackone</span><span class="crayon-sy">:</span><span class="crayon-e">before</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-620d078557a9a823699926-2"><span class="crayon-h"> </span><span class="crayon-i">content</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">""</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9a823699926-3"><span class="crayon-sy">}</span></div></div></td>
</tr>
</table>
</div>
</div>

</div>
<p></p>
<p>Here we&#8217;ve targeted the class that contains our top image, then implemented the :before pseudo element with no content. This effectively adds another item to the document flow for us to work with. Now let&#8217;s style it like we did our previous image:</p>
<div>

<div id="crayon-620d078557a9b404721807" class="crayon-syntax crayon-theme-solarized-light crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 20px !important;">
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="">
<table class="crayon-table">
<tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-620d078557a9b404721807-1">1</div><div class="crayon-num" data-line="crayon-620d078557a9b404721807-2">2</div><div class="crayon-num" data-line="crayon-620d078557a9b404721807-3">3</div><div class="crayon-num" data-line="crayon-620d078557a9b404721807-4">4</div><div class="crayon-num" data-line="crayon-620d078557a9b404721807-5">5</div><div class="crayon-num" data-line="crayon-620d078557a9b404721807-6">6</div><div class="crayon-num" data-line="crayon-620d078557a9b404721807-7">7</div><div class="crayon-num" data-line="crayon-620d078557a9b404721807-8">8</div><div class="crayon-num" data-line="crayon-620d078557a9b404721807-9">9</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-620d078557a9b404721807-1"><span class="crayon-sy">.</span><span class="crayon-i">stackone</span><span class="crayon-sy">:</span><span class="crayon-e">before</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-620d078557a9b404721807-2"><span class="crayon-h"> </span><span class="crayon-i">content</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">""</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9b404721807-3"><span class="crayon-h"> </span><span class="crayon-i">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">200px</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-i">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">200px</span><span class="crayon-sy">;</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-620d078557a9b404721807-4"><span class="crayon-h"> </span><span class="crayon-i">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-p">#eff4de;</span></div><div class="crayon-line" id="crayon-620d078557a9b404721807-5"><span class="crayon-h"> </span><span class="crayon-i">border</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">6px</span><span class="crayon-h"> </span><span class="crayon-i">solid</span><span class="crayon-h"> </span><span class="crayon-p">#fff;</span></div><div class="crayon-line" id="crayon-620d078557a9b404721807-6"><span class="crayon-h"> </span>-<span class="crayon-i">webkit</span>-<span class="crayon-i">box</span>-<span class="crayon-i">shadow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">5px</span><span class="crayon-h"> </span><span class="crayon-e">rgba</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0.3</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9b404721807-7"><span class="crayon-h"> </span>-<span class="crayon-i">moz</span>-<span class="crayon-i">box</span>-<span class="crayon-i">shadow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">5px</span><span class="crayon-h"> </span><span class="crayon-e">rgba</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0.3</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9b404721807-8"><span class="crayon-h"> </span><span class="crayon-i">box</span>-<span class="crayon-i">shadow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">5px</span><span class="crayon-h"> </span><span class="crayon-e">rgba</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0.3</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9b404721807-9"><span class="crayon-sy">}</span></div></div></td>
</tr>
</table>
</div>
</div>

</div>
<p></p>
<p>The key thing to notice here is that we&#8217;re not really working with an image. I could load in another image, but it would be a bad idea considering there we are making stacks of three. For every one image in the gallery, we don&#8217;t want to load in three! Fortunately, since most of the surface area of the pseudo elements will be hidden, we can simply use a solid color and still pull off the effect we&#8217;re looking for. </p>
<h3>Positioning</h3>
<p>At this point, things aren&#8217;t looking so good. In fact, we&#8217;ve really messed up our image!</p>
<div class="tutorialimage"><img class="alignNone size-full wp-image-1611" src="https://designshack.net/wp-content/uploads/stackscss-3.jpg" alt="screenshot" width="510" /></div>
<p>As you can see, our pseudo element is interfering with the image. To fix this, we need to add some positioning context, then push it to the back with z-index. I&#8217;ve split up the different chunks of styles here so you can clearly see what&#8217;s going on with each block. </p>
<div>

<div id="crayon-620d078557a9c034978612" class="crayon-syntax crayon-theme-solarized-light crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 20px !important;">
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="">
<table class="crayon-table">
<tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-620d078557a9c034978612-1">1</div><div class="crayon-num" data-line="crayon-620d078557a9c034978612-2">2</div><div class="crayon-num" data-line="crayon-620d078557a9c034978612-3">3</div><div class="crayon-num" data-line="crayon-620d078557a9c034978612-4">4</div><div class="crayon-num" data-line="crayon-620d078557a9c034978612-5">5</div><div class="crayon-num" data-line="crayon-620d078557a9c034978612-6">6</div><div class="crayon-num" data-line="crayon-620d078557a9c034978612-7">7</div><div class="crayon-num" data-line="crayon-620d078557a9c034978612-8">8</div><div class="crayon-num" data-line="crayon-620d078557a9c034978612-9">9</div><div class="crayon-num" data-line="crayon-620d078557a9c034978612-10">10</div><div class="crayon-num" data-line="crayon-620d078557a9c034978612-11">11</div><div class="crayon-num" data-line="crayon-620d078557a9c034978612-12">12</div><div class="crayon-num" data-line="crayon-620d078557a9c034978612-13">13</div><div class="crayon-num" data-line="crayon-620d078557a9c034978612-14">14</div><div class="crayon-num" data-line="crayon-620d078557a9c034978612-15">15</div><div class="crayon-num" data-line="crayon-620d078557a9c034978612-16">16</div><div class="crayon-num" data-line="crayon-620d078557a9c034978612-17">17</div><div class="crayon-num" data-line="crayon-620d078557a9c034978612-18">18</div><div class="crayon-num" data-line="crayon-620d078557a9c034978612-19">19</div><div class="crayon-num" data-line="crayon-620d078557a9c034978612-20">20</div><div class="crayon-num" data-line="crayon-620d078557a9c034978612-21">21</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-620d078557a9c034978612-1"><span class="crayon-sy">.</span><span class="crayon-i">stackone</span><span class="crayon-sy">:</span><span class="crayon-e">before</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-620d078557a9c034978612-2"><span class="crayon-h"> </span><span class="crayon-i">content</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">""</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9c034978612-3"><span class="crayon-h"> </span><span class="crayon-i">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">200px</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-i">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">200px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9c034978612-4"><span class="crayon-h"> </span><span class="crayon-i">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-p">#eff4de;</span></div><div class="crayon-line" id="crayon-620d078557a9c034978612-5"><span class="crayon-h"> </span><span class="crayon-i">border</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">6px</span><span class="crayon-h"> </span><span class="crayon-i">solid</span><span class="crayon-h"> </span><span class="crayon-p">#fff;</span></div><div class="crayon-line" id="crayon-620d078557a9c034978612-6"><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-620d078557a9c034978612-7"><span class="crayon-h"> </span><span class="crayon-i">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">absolute</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9c034978612-8"><span class="crayon-h"> </span><span class="crayon-i">z</span>-<span class="crayon-i">index</span><span class="crayon-sy">:</span><span class="crayon-h"> </span>-<span class="crayon-cn">1</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9c034978612-9"><span class="crayon-h"> </span><span class="crayon-i">top</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">0px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9c034978612-10"><span class="crayon-h"> </span><span class="crayon-i">left</span><span class="crayon-sy">:</span><span class="crayon-h"> </span>-<span class="crayon-cn">10px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9c034978612-11"><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-620d078557a9c034978612-12"><span class="crayon-h"> </span>-<span class="crayon-i">webkit</span>-<span class="crayon-i">box</span>-<span class="crayon-i">shadow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">5px</span><span class="crayon-h"> </span><span class="crayon-e">rgba</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0.3</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9c034978612-13"><span class="crayon-h"> </span>-<span class="crayon-i">moz</span>-<span class="crayon-i">box</span>-<span class="crayon-i">shadow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">5px</span><span class="crayon-h"> </span><span class="crayon-e">rgba</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0.3</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9c034978612-14"><span class="crayon-h"> </span><span class="crayon-i">box</span>-<span class="crayon-i">shadow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">5px</span><span class="crayon-h"> </span><span class="crayon-e">rgba</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0.3</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9c034978612-15"><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-620d078557a9c034978612-16"><span class="crayon-h"> </span>-<span class="crayon-i">webkit</span>-<span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span>-<span class="crayon-cn">5deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9c034978612-17"><span class="crayon-h"> </span>-<span class="crayon-i">moz</span>-<span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span>-<span class="crayon-cn">5deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9c034978612-18"><span class="crayon-h"> </span>-<span class="crayon-i">o</span>-<span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span>-<span class="crayon-cn">5deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9c034978612-19"><span class="crayon-h"> </span>-<span class="crayon-i">ms</span>-<span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span>-<span class="crayon-cn">5deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9c034978612-20"><span class="crayon-h"> </span><span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span>-<span class="crayon-cn">5deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9c034978612-21"><span class="crayon-sy">}</span></div></div></td>
</tr>
</table>
</div>
</div>

</div>
<p></p>
<p>By using absolute positioning, we can then push our image into place given the starting position of the original image. As we said, z-index then pushes the image to the background, which helps with the interference that we were getting before. Finally, we tossed on a transform effect to pull of the messy rotation that you see in the original Stacks PSD. </p>
<h3>Progress Check</h3>
<p>At this point, everything looks great! Our second photo (well, fake photo) is sitting nicely under our first and has enough rotation to set it apart. One more and we&#8217;re home free.</p>
<div class="tutorialimage"><img class="alignNone size-full wp-image-1611" src="https://designshack.net/wp-content/uploads/stackscss-4.jpg" alt="screenshot" width="510" /></div>
<h2>The Second Pseudo Element</h2>
<p>As you can probably guess, to add a third photo to the stack, we need to utilize the :after pseudo element. This works exactly like what we just did, so there&#8217;s no need to walk through it in detail. The primary differences will be a different background color, position and rotation. </p>
<div>

<div id="crayon-620d078557a9d194551477" class="crayon-syntax crayon-theme-solarized-light crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 20px !important;">
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="">
<table class="crayon-table">
<tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-620d078557a9d194551477-1">1</div><div class="crayon-num" data-line="crayon-620d078557a9d194551477-2">2</div><div class="crayon-num" data-line="crayon-620d078557a9d194551477-3">3</div><div class="crayon-num" data-line="crayon-620d078557a9d194551477-4">4</div><div class="crayon-num" data-line="crayon-620d078557a9d194551477-5">5</div><div class="crayon-num" data-line="crayon-620d078557a9d194551477-6">6</div><div class="crayon-num" data-line="crayon-620d078557a9d194551477-7">7</div><div class="crayon-num" data-line="crayon-620d078557a9d194551477-8">8</div><div class="crayon-num" data-line="crayon-620d078557a9d194551477-9">9</div><div class="crayon-num" data-line="crayon-620d078557a9d194551477-10">10</div><div class="crayon-num" data-line="crayon-620d078557a9d194551477-11">11</div><div class="crayon-num" data-line="crayon-620d078557a9d194551477-12">12</div><div class="crayon-num" data-line="crayon-620d078557a9d194551477-13">13</div><div class="crayon-num" data-line="crayon-620d078557a9d194551477-14">14</div><div class="crayon-num" data-line="crayon-620d078557a9d194551477-15">15</div><div class="crayon-num" data-line="crayon-620d078557a9d194551477-16">16</div><div class="crayon-num" data-line="crayon-620d078557a9d194551477-17">17</div><div class="crayon-num" data-line="crayon-620d078557a9d194551477-18">18</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-620d078557a9d194551477-1"><span class="crayon-sy">.</span><span class="crayon-i">stackone</span><span class="crayon-sy">:</span><span class="crayon-e">after</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-620d078557a9d194551477-2"><span class="crayon-h"> </span><span class="crayon-i">content</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">""</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9d194551477-3"><span class="crayon-h"> </span><span class="crayon-i">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">200px</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-i">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">200px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9d194551477-4"><span class="crayon-h"> </span><span class="crayon-i">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-p">#768590;</span></div><div class="crayon-line" id="crayon-620d078557a9d194551477-5"><span class="crayon-h"> </span><span class="crayon-i">border</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">6px</span><span class="crayon-h"> </span><span class="crayon-i">solid</span><span class="crayon-h"> </span><span class="crayon-p">#fff;</span></div><div class="crayon-line" id="crayon-620d078557a9d194551477-6"><span class="crayon-h"> </span><span class="crayon-i">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">absolute</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9d194551477-7"><span class="crayon-h"> </span><span class="crayon-i">z</span>-<span class="crayon-i">index</span><span class="crayon-sy">:</span><span class="crayon-h"> </span>-<span class="crayon-cn">1</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9d194551477-8"><span class="crayon-h"> </span><span class="crayon-i">top</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">5px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9d194551477-9"><span class="crayon-h"> </span><span class="crayon-i">left</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">0px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9d194551477-10"><span class="crayon-h"> </span>-<span class="crayon-i">webkit</span>-<span class="crayon-i">box</span>-<span class="crayon-i">shadow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">5px</span><span class="crayon-h"> </span><span class="crayon-e">rgba</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0.3</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9d194551477-11"><span class="crayon-h"> </span>-<span class="crayon-i">moz</span>-<span class="crayon-i">box</span>-<span class="crayon-i">shadow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">5px</span><span class="crayon-h"> </span><span class="crayon-e">rgba</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0.3</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9d194551477-12"><span class="crayon-h"> </span><span class="crayon-i">box</span>-<span class="crayon-i">shadow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">5px</span><span class="crayon-h"> </span><span class="crayon-e">rgba</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0.3</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9d194551477-13"><span class="crayon-h"> </span>-<span class="crayon-i">webkit</span>-<span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span><span class="crayon-cn">4deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9d194551477-14"><span class="crayon-h"> </span>-<span class="crayon-i">moz</span>-<span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span><span class="crayon-cn">4deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9d194551477-15"><span class="crayon-h"> </span>-<span class="crayon-i">o</span>-<span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span><span class="crayon-cn">4deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9d194551477-16"><span class="crayon-h"> </span>-<span class="crayon-i">ms</span>-<span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span><span class="crayon-cn">4deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9d194551477-17"><span class="crayon-h"> </span><span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span><span class="crayon-cn">4deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557a9d194551477-18"><span class="crayon-sy">}</span></div></div></td>
</tr>
</table>
</div>
</div>

</div>
<p></p>
<h3>Progress Check</h3>
<p>Would you look at that? We&#8217;ve finished our first image stack! It&#8217;s a pretty snazzy effect considering it really only uses a single image. </p>
<div class="tutorialimage"><img class="alignNone size-full wp-image-1611" src="https://designshack.net/wp-content/uploads/stackscss-5.jpg" alt="screenshot" width="510" /></div>
<h2>A Flawed Workflow</h2>
<p>Given that the original PSD had several different image stacks to choose from, I wanted to do the same thing with CSS classes. To do this, we could easily copy and paste all of the code above into a new &#8220;stacktwo&#8221; class and change the rotation/positioning for the pseudo elements. Bam: you&#8217;ve got yourself a new stack.</p>
<p>Here&#8217;s the problem though: I did this with a whopping eight different stacks and the result was a horrendous blob of code. Seriously, it was uglier than a 1997 table-based layout. The problem of course is that I&#8217;m repeating myself over and over. More than half my code is comprised of pure redundancy. I can&#8217;t in good conscious pass on such horrid practices to you.</p>
<h3>DRY CSS</h3>
<p>Andy Hunt and Dave Thomas coined the term &#8220;DRY&#8221; in relation to programming, which stands for &#8220;Don&#8217;t Repeat Yourself.&#8221; To make an inane semantic point, CSS isn&#8217;t technically a programming language, it&#8217;s a style sheet language. However, if we treat it like a programming language and apply the concepts of DRY coding, we end up with a much better result.</p>
<p>Let&#8217;s see if we can apply these practices to make our code a little briefer and more extendable.</p>
<h2>Let&#8217;s Try That Again</h2>
<p>If we create a bunch of classes and follow on our current path, our CSS is going to get unwieldy. Right off the bat, we&#8217;ll have to declare each class individually and then pass in a big chunk of code to each. And this is before we even approach the pseudo elements, which will literally triple our code!</p>
<div>

<div id="crayon-620d078557a9f769680842" class="crayon-syntax crayon-theme-solarized-light crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 20px !important;">
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="">
<table class="crayon-table">
<tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-620d078557a9f769680842-1">1</div><div class="crayon-num" data-line="crayon-620d078557a9f769680842-2">2</div><div class="crayon-num" data-line="crayon-620d078557a9f769680842-3">3</div><div class="crayon-num" data-line="crayon-620d078557a9f769680842-4">4</div><div class="crayon-num" data-line="crayon-620d078557a9f769680842-5">5</div><div class="crayon-num" data-line="crayon-620d078557a9f769680842-6">6</div><div class="crayon-num" data-line="crayon-620d078557a9f769680842-7">7</div><div class="crayon-num" data-line="crayon-620d078557a9f769680842-8">8</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-620d078557a9f769680842-1"><span class="crayon-sy">.</span><span class="crayon-i">stackone</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-620d078557a9f769680842-2"><span class="crayon-sy">.</span><span class="crayon-i">stacktwo</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-620d078557a9f769680842-3"><span class="crayon-sy">.</span><span class="crayon-i">stackthree</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-620d078557a9f769680842-4"><span class="crayon-sy">.</span><span class="crayon-i">stackfour</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-620d078557a9f769680842-5"><span class="crayon-sy">.</span><span class="crayon-i">stackfive</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-620d078557a9f769680842-6"><span class="crayon-sy">.</span><span class="crayon-i">stacksix</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-620d078557a9f769680842-7"><span class="crayon-sy">.</span><span class="crayon-i">stackseven</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-620d078557a9f769680842-8"><span class="crayon-sy">.</span><span class="crayon-i">stackeight</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">}</span></div></div></td>
</tr>
</table>
</div>
</div>

</div>
<p></p>
<p>Given that a great deal of the styles will be shared, let&#8217;s cut back on our code and place some of these styles all in one declaration block.</p>
<div>

<div id="crayon-620d078557aa0896894894" class="crayon-syntax crayon-theme-solarized-light crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 20px !important;">
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="">
<table class="crayon-table">
<tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-620d078557aa0896894894-1">1</div><div class="crayon-num" data-line="crayon-620d078557aa0896894894-2">2</div><div class="crayon-num" data-line="crayon-620d078557aa0896894894-3">3</div><div class="crayon-num" data-line="crayon-620d078557aa0896894894-4">4</div><div class="crayon-num" data-line="crayon-620d078557aa0896894894-5">5</div><div class="crayon-num" data-line="crayon-620d078557aa0896894894-6">6</div><div class="crayon-num" data-line="crayon-620d078557aa0896894894-7">7</div><div class="crayon-num" data-line="crayon-620d078557aa0896894894-8">8</div><div class="crayon-num" data-line="crayon-620d078557aa0896894894-9">9</div><div class="crayon-num" data-line="crayon-620d078557aa0896894894-10">10</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-620d078557aa0896894894-1"><span class="crayon-sy">.</span><span class="crayon-i">stackone</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i">stacktwo</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i">stackthree</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i">stackfour</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i">stackfive</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i">stacksix</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i">stackseven</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i">stackeight</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-620d078557aa0896894894-2"><span class="crayon-h"> </span><span class="crayon-i">border</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">6px</span><span class="crayon-h"> </span><span class="crayon-i">solid</span><span class="crayon-h"> </span><span class="crayon-p">#fff;</span></div><div class="crayon-line" id="crayon-620d078557aa0896894894-3"><span class="crayon-h"> </span><span class="crayon-t">float</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">left</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa0896894894-4"><span class="crayon-h"> </span><span class="crayon-i">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">200px</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-i">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">200px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa0896894894-5"><span class="crayon-h"> </span><span class="crayon-i">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">relative</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa0896894894-6"><span class="crayon-h"> </span><span class="crayon-i">margin</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">50px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa0896894894-7"><span class="crayon-h"> </span>-<span class="crayon-i">webkit</span>-<span class="crayon-i">box</span>-<span class="crayon-i">shadow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">5px</span><span class="crayon-h"> </span><span class="crayon-e">rgba</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0.3</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa0896894894-8"><span class="crayon-h"> </span>-<span class="crayon-i">moz</span>-<span class="crayon-i">box</span>-<span class="crayon-i">shadow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">5px</span><span class="crayon-h"> </span><span class="crayon-e">rgba</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0.3</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa0896894894-9"><span class="crayon-h"> </span><span class="crayon-i">box</span>-<span class="crayon-i">shadow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">5px</span><span class="crayon-h"> </span><span class="crayon-e">rgba</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0.3</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa0896894894-10"><span class="crayon-sy">}</span></div></div></td>
</tr>
</table>
</div>
</div>

</div>
<p></p>
<p>This takes our core styles and applies them to all of the starter classes in one go, which is <strong>much</strong> better than repeating ourselves over and over. As an optional next step, you could get even fancier with your selectors.</p>
<p>Notice how all of our classes start with the same five letters: &#8220;stack&#8221;. Given this information, we can pull out the <em>arbitrary substring attribute value selector</em> and target any classes that begin with this string of five letters. </p>
<div>

<div id="crayon-620d078557aa1515482788" class="crayon-syntax crayon-theme-solarized-light crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 20px !important;">
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="">
<table class="crayon-table">
<tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-620d078557aa1515482788-1">1</div><div class="crayon-num" data-line="crayon-620d078557aa1515482788-2">2</div><div class="crayon-num" data-line="crayon-620d078557aa1515482788-3">3</div><div class="crayon-num" data-line="crayon-620d078557aa1515482788-4">4</div><div class="crayon-num" data-line="crayon-620d078557aa1515482788-5">5</div><div class="crayon-num" data-line="crayon-620d078557aa1515482788-6">6</div><div class="crayon-num" data-line="crayon-620d078557aa1515482788-7">7</div><div class="crayon-num" data-line="crayon-620d078557aa1515482788-8">8</div><div class="crayon-num" data-line="crayon-620d078557aa1515482788-9">9</div><div class="crayon-num" data-line="crayon-620d078557aa1515482788-10">10</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-620d078557aa1515482788-1"><span class="crayon-i">div</span><span class="crayon-sy">[</span><span class="crayon-t">class</span>*=<span class="crayon-s">'stack'</span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-620d078557aa1515482788-2"><span class="crayon-h"> </span><span class="crayon-i">border</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">6px</span><span class="crayon-h"> </span><span class="crayon-i">solid</span><span class="crayon-h"> </span><span class="crayon-p">#fff;</span></div><div class="crayon-line" id="crayon-620d078557aa1515482788-3"><span class="crayon-h"> </span><span class="crayon-t">float</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">left</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa1515482788-4"><span class="crayon-h"> </span><span class="crayon-i">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">200px</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-i">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">200px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa1515482788-5"><span class="crayon-h"> </span><span class="crayon-i">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">relative</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa1515482788-6"><span class="crayon-h"> </span><span class="crayon-i">margin</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">50px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa1515482788-7"><span class="crayon-h"> </span>-<span class="crayon-i">webkit</span>-<span class="crayon-i">box</span>-<span class="crayon-i">shadow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">5px</span><span class="crayon-h"> </span><span class="crayon-e">rgba</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0.3</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa1515482788-8"><span class="crayon-h"> </span>-<span class="crayon-i">moz</span>-<span class="crayon-i">box</span>-<span class="crayon-i">shadow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">5px</span><span class="crayon-h"> </span><span class="crayon-e">rgba</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0.3</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa1515482788-9"><span class="crayon-h"> </span><span class="crayon-i">box</span>-<span class="crayon-i">shadow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">5px</span><span class="crayon-h"> </span><span class="crayon-e">rgba</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0.3</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa1515482788-10"><span class="crayon-sy">}</span></div></div></td>
</tr>
</table>
</div>
</div>

</div>
<p></p>
<p>How fancy is that? This one selector targets all of those classes for us! Even better, if we choose to add eight more stack classes to the mix, this selector will still function perfectly.</p>
<p>Let&#8217;s take this to the extreme and see how brief we can make our code. The key here is to find everything that&#8217;s repeated and instead attempt to use it only once. As you can see, I started with the declarations that can be applied to only the &#8220;stack&#8221; classes. Then I moved onto styles that could be applied to the stack classes along with the :before and :after elements. Narrowing it down yet again I set up a declaration block for only the :before and :after styles. Finally, I ended with the different color that we&#8217;re using for the :before classes. </p>
<div>

<div id="crayon-620d078557aa2462099148" class="crayon-syntax crayon-theme-solarized-light crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 20px !important;">
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="">
<table class="crayon-table">
<tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-620d078557aa2462099148-1">1</div><div class="crayon-num" data-line="crayon-620d078557aa2462099148-2">2</div><div class="crayon-num" data-line="crayon-620d078557aa2462099148-3">3</div><div class="crayon-num" data-line="crayon-620d078557aa2462099148-4">4</div><div class="crayon-num" data-line="crayon-620d078557aa2462099148-5">5</div><div class="crayon-num" data-line="crayon-620d078557aa2462099148-6">6</div><div class="crayon-num" data-line="crayon-620d078557aa2462099148-7">7</div><div class="crayon-num" data-line="crayon-620d078557aa2462099148-8">8</div><div class="crayon-num" data-line="crayon-620d078557aa2462099148-9">9</div><div class="crayon-num" data-line="crayon-620d078557aa2462099148-10">10</div><div class="crayon-num" data-line="crayon-620d078557aa2462099148-11">11</div><div class="crayon-num" data-line="crayon-620d078557aa2462099148-12">12</div><div class="crayon-num" data-line="crayon-620d078557aa2462099148-13">13</div><div class="crayon-num" data-line="crayon-620d078557aa2462099148-14">14</div><div class="crayon-num" data-line="crayon-620d078557aa2462099148-15">15</div><div class="crayon-num" data-line="crayon-620d078557aa2462099148-16">16</div><div class="crayon-num" data-line="crayon-620d078557aa2462099148-17">17</div><div class="crayon-num" data-line="crayon-620d078557aa2462099148-18">18</div><div class="crayon-num" data-line="crayon-620d078557aa2462099148-19">19</div><div class="crayon-num" data-line="crayon-620d078557aa2462099148-20">20</div><div class="crayon-num" data-line="crayon-620d078557aa2462099148-21">21</div><div class="crayon-num" data-line="crayon-620d078557aa2462099148-22">22</div><div class="crayon-num" data-line="crayon-620d078557aa2462099148-23">23</div><div class="crayon-num" data-line="crayon-620d078557aa2462099148-24">24</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-620d078557aa2462099148-1"><span class="crayon-i">div</span><span class="crayon-sy">[</span><span class="crayon-t">class</span>*=<span class="crayon-s">'stack'</span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-620d078557aa2462099148-2"><span class="crayon-h"> </span><span class="crayon-t">float</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">left</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa2462099148-3"><span class="crayon-h"> </span><span class="crayon-i">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">relative</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa2462099148-4"><span class="crayon-h"> </span><span class="crayon-i">margin</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">50px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa2462099148-5"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-620d078557aa2462099148-6">&nbsp;</div><div class="crayon-line" id="crayon-620d078557aa2462099148-7"><span class="crayon-i">div</span><span class="crayon-sy">[</span><span class="crayon-t">class</span>*=<span class="crayon-s">'stack'</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">div</span><span class="crayon-sy">[</span><span class="crayon-t">class</span>*=<span class="crayon-s">'stack'</span><span class="crayon-sy">]</span><span class="crayon-sy">:</span><span class="crayon-i">before</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">div</span><span class="crayon-sy">[</span><span class="crayon-t">class</span>*=<span class="crayon-s">'stack'</span><span class="crayon-sy">]</span><span class="crayon-sy">:</span><span class="crayon-e">after</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-620d078557aa2462099148-8"><span class="crayon-h"> </span><span class="crayon-i">border</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">6px</span><span class="crayon-h"> </span><span class="crayon-i">solid</span><span class="crayon-h"> </span><span class="crayon-p">#fff;</span></div><div class="crayon-line" id="crayon-620d078557aa2462099148-9"><span class="crayon-h"> </span><span class="crayon-i">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">200px</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-i">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">200px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa2462099148-10"><span class="crayon-h"> </span>-<span class="crayon-i">webkit</span>-<span class="crayon-i">box</span>-<span class="crayon-i">shadow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">5px</span><span class="crayon-h"> </span><span class="crayon-e">rgba</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0.3</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa2462099148-11"><span class="crayon-h"> </span>-<span class="crayon-i">moz</span>-<span class="crayon-i">box</span>-<span class="crayon-i">shadow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">5px</span><span class="crayon-h"> </span><span class="crayon-e">rgba</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0.3</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa2462099148-12"><span class="crayon-h"> </span><span class="crayon-i">box</span>-<span class="crayon-i">shadow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">2px</span><span class="crayon-h"> </span><span class="crayon-cn">5px</span><span class="crayon-h"> </span><span class="crayon-e">rgba</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0.3</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa2462099148-13"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-620d078557aa2462099148-14">&nbsp;</div><div class="crayon-line" id="crayon-620d078557aa2462099148-15"><span class="crayon-i">div</span><span class="crayon-sy">[</span><span class="crayon-t">class</span>*=<span class="crayon-s">'stack'</span><span class="crayon-sy">]</span><span class="crayon-sy">:</span><span class="crayon-i">before</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">div</span><span class="crayon-sy">[</span><span class="crayon-t">class</span>*=<span class="crayon-s">'stack'</span><span class="crayon-sy">]</span><span class="crayon-sy">:</span><span class="crayon-e">after</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-620d078557aa2462099148-16"><span class="crayon-h"> </span><span class="crayon-i">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-p">#768590;</span></div><div class="crayon-line" id="crayon-620d078557aa2462099148-17"><span class="crayon-h"> </span><span class="crayon-i">content</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">""</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa2462099148-18"><span class="crayon-h"> </span><span class="crayon-i">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">absolute</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa2462099148-19"><span class="crayon-h"> </span><span class="crayon-i">z</span>-<span class="crayon-i">index</span><span class="crayon-sy">:</span><span class="crayon-h"> </span>-<span class="crayon-cn">1</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa2462099148-20"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-620d078557aa2462099148-21">&nbsp;</div><div class="crayon-line" id="crayon-620d078557aa2462099148-22"><span class="crayon-i">div</span><span class="crayon-sy">[</span><span class="crayon-t">class</span>*=<span class="crayon-s">'stack'</span><span class="crayon-sy">]</span><span class="crayon-sy">:</span><span class="crayon-e">before</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-620d078557aa2462099148-23"><span class="crayon-h"> </span><span class="crayon-i">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-p">#eff4de;</span></div><div class="crayon-line" id="crayon-620d078557aa2462099148-24"><span class="crayon-sy">}</span></div></div></td>
</tr>
</table>
</div>
</div>

</div>
<p></p>
<p>What we&#8217;ve done here is literally taken hundreds of lines of code and compressed them into a small space. This is fantastic for maintenance, loading times, and your general sanity! It&#8217;s a little bit tricky to wrap your mind around DRY principles at first, but once you do you&#8217;ll never look back.</p>
<h3>Other Stacks</h3>
<div class="tutorialimage"><img class="alignNone size-full wp-image-1611" src="https://designshack.net/wp-content/uploads/stackscss-6.jpg" alt="screenshot" width="510" /></div>
<p>From here out, each stack will be fairly unique so we will have to code the rest one at a time. A little Sass or Less would go a <strong>long</strong> way towards helping out this portion but you guys are sick of me ranting about the wonder of preprocessors so I did it the long way. </p>
<div>

<div id="crayon-620d078557aa3757651692" class="crayon-syntax crayon-theme-solarized-light crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 20px !important;">
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="">
<table class="crayon-table">
<tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-620d078557aa3757651692-1">1</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-2">2</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-3">3</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-4">4</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-5">5</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-6">6</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-7">7</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-8">8</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-9">9</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-10">10</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-11">11</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-12">12</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-13">13</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-14">14</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-15">15</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-16">16</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-17">17</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-18">18</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-19">19</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-20">20</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-21">21</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-22">22</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-23">23</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-24">24</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-25">25</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-26">26</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-27">27</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-28">28</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-29">29</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-30">30</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-31">31</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-32">32</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-33">33</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-34">34</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-35">35</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-36">36</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-37">37</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-38">38</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-39">39</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-40">40</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-41">41</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-42">42</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-43">43</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-44">44</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-45">45</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-46">46</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-47">47</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-48">48</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-49">49</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-50">50</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-51">51</div><div class="crayon-num" data-line="crayon-620d078557aa3757651692-52">52</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-620d078557aa3757651692-1"><span class="crayon-c">/*STACK ONE*/</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-2"><span class="crayon-sy">.</span><span class="crayon-i">stackone</span><span class="crayon-sy">:</span><span class="crayon-e">before</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-3"><span class="crayon-h"> </span><span class="crayon-i">top</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">4px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-4"><span class="crayon-h"> </span><span class="crayon-i">left</span><span class="crayon-sy">:</span><span class="crayon-h"> </span>-<span class="crayon-cn">6px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-5"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-6">&nbsp;</div><div class="crayon-line" id="crayon-620d078557aa3757651692-7"><span class="crayon-sy">.</span><span class="crayon-i">stackone</span><span class="crayon-sy">:</span><span class="crayon-e">after</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-8"><span class="crayon-h"> </span><span class="crayon-i">top</span><span class="crayon-sy">:</span><span class="crayon-h"> </span>-<span class="crayon-cn">2px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-9"><span class="crayon-h"> </span><span class="crayon-i">left</span><span class="crayon-sy">:</span><span class="crayon-h"> </span>-<span class="crayon-cn">6px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-10"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-11">&nbsp;</div><div class="crayon-line" id="crayon-620d078557aa3757651692-12"><span class="crayon-c">/*STACK TWO*/</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-13"><span class="crayon-sy">.</span><span class="crayon-i">stacktwo</span><span class="crayon-sy">:</span><span class="crayon-e">before</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-14"><span class="crayon-h"> </span><span class="crayon-i">top</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">0px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-15"><span class="crayon-h"> </span><span class="crayon-i">left</span><span class="crayon-sy">:</span><span class="crayon-h"> </span>-<span class="crayon-cn">10px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-16"><span class="crayon-h"> </span>-<span class="crayon-i">webkit</span>-<span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span>-<span class="crayon-cn">5deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-17"><span class="crayon-h"> </span>-<span class="crayon-i">moz</span>-<span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span>-<span class="crayon-cn">5deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-18"><span class="crayon-h"> </span>-<span class="crayon-i">o</span>-<span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span>-<span class="crayon-cn">5deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-19"><span class="crayon-h"> </span>-<span class="crayon-i">ms</span>-<span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span>-<span class="crayon-cn">5deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-20"><span class="crayon-h"> </span><span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span>-<span class="crayon-cn">5deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-21"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-22">&nbsp;</div><div class="crayon-line" id="crayon-620d078557aa3757651692-23"><span class="crayon-sy">.</span><span class="crayon-i">stacktwo</span><span class="crayon-sy">:</span><span class="crayon-e">after</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-24"><span class="crayon-h"> </span><span class="crayon-i">top</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">5px</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-i">left</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">0px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-25"><span class="crayon-h"> </span>-<span class="crayon-i">webkit</span>-<span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span><span class="crayon-cn">4deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-26"><span class="crayon-h"> </span>-<span class="crayon-i">moz</span>-<span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span><span class="crayon-cn">4deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-27"><span class="crayon-h"> </span>-<span class="crayon-i">o</span>-<span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span><span class="crayon-cn">4deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-28"><span class="crayon-h"> </span>-<span class="crayon-i">ms</span>-<span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span><span class="crayon-cn">4deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-29"><span class="crayon-h"> </span><span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span><span class="crayon-cn">4deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-30"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-31">&nbsp;</div><div class="crayon-line" id="crayon-620d078557aa3757651692-32"><span class="crayon-c">/*STACK THREE*/</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-33"><span class="crayon-sy">.</span><span class="crayon-i">stackthree</span><span class="crayon-sy">:</span><span class="crayon-e">before</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-34"><span class="crayon-h"> </span><span class="crayon-i">top</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">5px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-35"><span class="crayon-h"> </span><span class="crayon-i">left</span><span class="crayon-sy">:</span><span class="crayon-h"> </span>-<span class="crayon-cn">15px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-36"><span class="crayon-h"> </span><span class="crayon-i">z</span>-<span class="crayon-i">index</span><span class="crayon-sy">:</span><span class="crayon-h"> </span>-<span class="crayon-cn">1</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-37"><span class="crayon-h"> </span>-<span class="crayon-i">webkit</span>-<span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span>-<span class="crayon-cn">10deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-38"><span class="crayon-h"> </span>-<span class="crayon-i">moz</span>-<span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span>-<span class="crayon-cn">10deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-39"><span class="crayon-h"> </span>-<span class="crayon-i">o</span>-<span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span>-<span class="crayon-cn">10deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-40"><span class="crayon-h"> </span>-<span class="crayon-i">ms</span>-<span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span>-<span class="crayon-cn">10deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-41"><span class="crayon-h"> </span><span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span>-<span class="crayon-cn">10deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-42"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-43">&nbsp;</div><div class="crayon-line" id="crayon-620d078557aa3757651692-44"><span class="crayon-sy">.</span><span class="crayon-i">stackthree</span><span class="crayon-sy">:</span><span class="crayon-e">after</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-45"><span class="crayon-h"> </span><span class="crayon-i">top</span><span class="crayon-sy">:</span><span class="crayon-h"> </span>-<span class="crayon-cn">2px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-46"><span class="crayon-h"> </span><span class="crayon-i">left</span><span class="crayon-sy">:</span><span class="crayon-h"> </span>-<span class="crayon-cn">10px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-47"><span class="crayon-h"> </span>-<span class="crayon-i">webkit</span>-<span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span>-<span class="crayon-cn">5deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-48"><span class="crayon-h"> </span>-<span class="crayon-i">moz</span>-<span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span>-<span class="crayon-cn">5deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-49"><span class="crayon-h"> </span>-<span class="crayon-i">o</span>-<span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span>-<span class="crayon-cn">5deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-50"><span class="crayon-h"> </span>-<span class="crayon-i">ms</span>-<span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span>-<span class="crayon-cn">5deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-51"><span class="crayon-h"> </span><span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">rotate</span><span class="crayon-sy">(</span>-<span class="crayon-cn">5deg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa3757651692-52"><span class="crayon-sy">}</span></div></div></td>
</tr>
</table>
</div>
</div>

</div>
<p></p>
<h2>Browser Compatibility</h2>
<p>In my testing, the browser compatibility here was actually pretty impressive. Everything should work fine in Safari, Firefox, Chrome, Opera and IE9+. For IE7, you get a simple image gallery without the fancy stack effect, which I consider to be completely acceptable as this is a purely aesthetic touch similar to rounded corners. </p>
<p>IE8 is the tricky one because it partially supports enough stuff to really screw everything up. You can decide how to approach this issue however you like, but the solution I came up with was to use a horrible, dirty hack to target only IE8, which is to append \9 to any IE8 only styles. Utilizing this technique, I simply hid the :before and :after elements so that IE8 gets a simple image gallery like IE7. </p>
<div>

<div id="crayon-620d078557aa4167630222" class="crayon-syntax crayon-theme-solarized-light crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" no-popup minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 20px !important;">
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="">
<table class="crayon-table">
<tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-620d078557aa4167630222-1">1</div><div class="crayon-num" data-line="crayon-620d078557aa4167630222-2">2</div><div class="crayon-num" data-line="crayon-620d078557aa4167630222-3">3</div><div class="crayon-num" data-line="crayon-620d078557aa4167630222-4">4</div><div class="crayon-num" data-line="crayon-620d078557aa4167630222-5">5</div><div class="crayon-num" data-line="crayon-620d078557aa4167630222-6">6</div><div class="crayon-num" data-line="crayon-620d078557aa4167630222-7">7</div><div class="crayon-num" data-line="crayon-620d078557aa4167630222-8">8</div><div class="crayon-num" data-line="crayon-620d078557aa4167630222-9">9</div><div class="crayon-num" data-line="crayon-620d078557aa4167630222-10">10</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-620d078557aa4167630222-1"><span class="crayon-i">div</span><span class="crayon-sy">[</span><span class="crayon-t">class</span>*=<span class="crayon-s">'stack'</span><span class="crayon-sy">]</span><span class="crayon-sy">:</span><span class="crayon-i">before</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">div</span><span class="crayon-sy">[</span><span class="crayon-t">class</span>*=<span class="crayon-s">'stack'</span><span class="crayon-sy">]</span><span class="crayon-sy">:</span><span class="crayon-e">after</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-620d078557aa4167630222-2"><span class="crayon-h"> </span><span class="crayon-i">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-p">#768590;</span></div><div class="crayon-line" id="crayon-620d078557aa4167630222-3"><span class="crayon-h"> </span><span class="crayon-i">content</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">""</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa4167630222-4"><span class="crayon-h"> </span><span class="crayon-i">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">absolute</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa4167630222-5"><span class="crayon-h"> </span><span class="crayon-i">z</span>-<span class="crayon-i">index</span><span class="crayon-sy">:</span><span class="crayon-h"> </span>-<span class="crayon-cn">1</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa4167630222-6"><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-620d078557aa4167630222-7"><span class="crayon-h"> </span><span class="crayon-c">/*Dirty IE8 hack*/</span></div><div class="crayon-line" id="crayon-620d078557aa4167630222-8"><span class="crayon-h"> </span><span class="crayon-i">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">0px</span><span class="crayon-sy">\</span><span class="crayon-cn">9</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-i">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">0px</span><span class="crayon-sy">\</span><span class="crayon-cn">9</span><span class="crayon-sy">;</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-620d078557aa4167630222-9"><span class="crayon-h"> </span><span class="crayon-i">border</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">none</span><span class="crayon-sy">\</span><span class="crayon-cn">9</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-620d078557aa4167630222-10"><span class="crayon-sy">}</span></div></div></td>
</tr>
</table>
</div>
</div>

</div>
<p></p>
<p>The fancy selectors are where IE8 tends to get tripped up, it actually supports before and after as long as you stick to the single colon syntax. If you list out the classes with commas rather than using the attribute value selector, you should be able to get IE8 to perform the stack effect. </p>
<h2>Conclusion</h2>
<p>We packed a lot in today. We built a cool image stack illusion, learned how to implement :before and :after, and then discussed best practices for coding while utilizing a DRY mentality. I hope you learned something and had as much fun as I did!</p>
<p>Keep an eye out on <a href="http://pixelsdaily.com/">PixelsDaily</a> in the days ahead for an awesome free download containing all of the source code for this tutorial along with eight awesome image stacks that you can use in your projects. </p>
</article>
<aside>
<section class="membership">
<h3>Become a Member</h3>
<p>Join our 30,000+ members to receive our newsletter and submit your design work.</p>
<form action="/membership/join/" method="post">
<input type="hidden" value="" name="email" />
<input type="text" class="email" onfocus="this.value=''" value="Email Address" name="l2ADb2kaDB22" id="l2ADb2kaDB22" aria-label="Email Address">
<input type="submit" value="Subscribe →" />
<div class="membership-privacy">
<p>We'll use your email address to send one newsletter every week, and occasional promotions from us and our partners. See our <a href="/privacy/">privacy policy</a>.</p>
</div>
</form>
</section>
<section class="social-share  sticky-social">
<h3>Share This Post</h3>
<div class="social-links">
<a href="https://twitter.com/intent/tweet?text=Use+Pseudo+Elements+to+Create+an+Image+Stack+Illusion&url=https://designshack.net/articles/css/use-pseudo-elements-to-create-an-image-stack-illusion/&via=designshack" class="icon-twitter" title="Share on Twitter"><span>Share on Twitter</span></a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https://designshack.net/articles/css/use-pseudo-elements-to-create-an-image-stack-illusion/" class="icon-facebook" title="Share on Facebook"><span>Share on Facebook</span></a>
<a href="http://pinterest.com/pin/create/button/?url=https://designshack.net/articles/css/use-pseudo-elements-to-create-an-image-stack-illusion/&description=Use+Pseudo+Elements+to+Create+an+Image+Stack+Illusion&media=https://designshack.net/wp-content/uploads/stackscss-f.jpg" class="icon-pinterest" title="Share on Pinterest"><span>Share on Pinterest</span></a>
</div>
</section>
<section class="recommended-posts sidebar-feature sticky">
<h4>Related</h4>
<h2>Like This? We'd Recommend:</h2>
<div class="sidebar-feature-inner">
<table>
<tr>
<td><a href="https://designshack.net/articles/css/new-css-techniques/"><img src="https://designshack.net/wp-content/uploads/new-css-techniques-150x100.jpg" alt="5 New CSS Techniques to Master in 2022" width="81" height="54" /></a></td>
<td><a href="https://designshack.net/articles/css/new-css-techniques/">5 New CSS Techniques to Master in 2022</a></td>
</a>
</tr>
<tr>
<td><a href="https://designshack.net/articles/css/best-ways-to-learn-css-grid/"><img src="https://designshack.net/wp-content/uploads/css-grid-150x100.png" alt="13 Best Ways to Learn CSS Grid" width="81" height="54" /></a></td>
<td><a href="https://designshack.net/articles/css/best-ways-to-learn-css-grid/">13 Best Ways to Learn CSS Grid</a></td>
</a>
</tr>
<tr>
<td><a href="https://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/"><img src="https://designshack.net/wp-content/uploads/css-text-shadow-effects-150x100.png" alt="12 Fun CSS Text Shadows You Can Copy and Paste" width="81" height="54" /></a></td>
<td><a href="https://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/">12 Fun CSS Text Shadows You Can Copy and Paste</a></td>
</a>
</tr>
</table><br /><br />
</div>
</section>
</aside>
</div>
</div>
</div>
</main>
<div class="wrapper wrapper-footer">
<footer>
<div class="copyright-social">
<p><a href="https://compactcreative.com">Made by Compact Creative &copy; 2022</a></p>
<p class="social-links">
<a href="https://twitter.com/designshack" class="icon-twitter" title="@designshack on Twitter"><span>Twitter</span></a>
<a href="https://facebook.com/designshack" class="icon-facebook" title="Facebook"><span>Facebook</span></a>
<a href="https://www.pinterest.com/designshack/" title="Pinterest" class="icon-pinterest"><span>Pinterest</span></a>
<a href="http://feedpress.me/designshack" title="RSS Feed" class="icon-rss"><span>RSS Feed</span></a>
</p>
</div>
<div class="footer-links">
<p><strong><a href="https://designshack.net" title="Design Shack">Home</a></strong> / <strong><a href="https://designshack.net/category/articles/" title="Design Articles &amp; Tutorials">Articles</a></strong> / <strong><a href="https://designshack.net/features/" title="Design Features">Features</a></strong> / <strong><a href="https://designshack.net/gallery/" title="Design Gallery">Gallery</a></strong></p>
<p><a href="https://designshack.net/about/" title="About Design Shack">About</a> / <a href="https://designshack.net/membership/" title="Design Shack Advertising">Membership</a> / <a href="https://designshack.net/advertising/" title="Design Shack Advertising">Advertising &amp; Sponsorship</a> / <a href="https://designshack.net/privacy/" title="Privacy Policy">Privacy</a></div>
<div class="kinsta-partnership">
<p><a class="kinsta-link" rel='nofollow' href="https://kinsta.com?kaid=YJUDYYWVXAPN"><span>In Partnership with</span></a></p>
</div>
</footer>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;"><defs><filter id="wp-duotone-dark-grayscale"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="table" tableValues="0 0.49803921568627" /><feFuncG type="table" tableValues="0 0.49803921568627" /><feFuncB type="table" tableValues="0 0.49803921568627" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;"><defs><filter id="wp-duotone-grayscale"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="table" tableValues="0 1" /><feFuncG type="table" tableValues="0 1" /><feFuncB type="table" tableValues="0 1" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;"><defs><filter id="wp-duotone-purple-yellow"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="table" tableValues="0.54901960784314 0.98823529411765" /><feFuncG type="table" tableValues="0 1" /><feFuncB type="table" tableValues="0.71764705882353 0.25490196078431" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;"><defs><filter id="wp-duotone-blue-red"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="table" tableValues="0 1" /><feFuncG type="table" tableValues="0 0.27843137254902" /><feFuncB type="table" tableValues="0.5921568627451 0.27843137254902" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;"><defs><filter id="wp-duotone-midnight"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="table" tableValues="0 0" /><feFuncG type="table" tableValues="0 0.64705882352941" /><feFuncB type="table" tableValues="0 1" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;"><defs><filter id="wp-duotone-magenta-yellow"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="table" tableValues="0.78039215686275 1" /><feFuncG type="table" tableValues="0 0.94901960784314" /><feFuncB type="table" tableValues="0.35294117647059 0.47058823529412" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;"><defs><filter id="wp-duotone-purple-green"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="table" tableValues="0.65098039215686 0.40392156862745" /><feFuncG type="table" tableValues="0 1" /><feFuncB type="table" tableValues="0.44705882352941 0.4" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;"><defs><filter id="wp-duotone-blue-orange"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="table" tableValues="0.098039215686275 1" /><feFuncG type="table" tableValues="0 0.66274509803922" /><feFuncB type="table" tableValues="0.84705882352941 0.41960784313725" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg>
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/v652eace1692a40cfa3763df669d7439c1639079717194" integrity="sha512-Gi7xpJR8tSkrpF7aordPZQlW2DLtzUlZcumS8dMQjwDHEnw9I7ZLyiOj/6tZStRBGtGgN6ceN6cMH8z7etPGlw==" data-cf-beacon='{"rayId":"6de7669f7cb98c6f","token":"87d7a85a8d6b4bb0933c9cb124172d34","version":"2021.12.0","si":100}' crossorigin="anonymous"></script>
</body>
</html>

How to create a stack of photos layout in HTML

--- References
https://jsfiddle.net/mingsai/ybt5pdg4/39/
(original article) https://designshack.net/articles/css/use-pseudo-elements-to-create-an-image-stack-illusion/

--- HTML
<a class='featured-img-box'>
   <img src="https://st2.depositphotos.com/1653909/8228/i/950/depositphotos_82284502-stock-photo-magician-hands-with-magic-wand.jpg" height=100% width=100% />
</a>

--CSS
a[class*='featured-img-box'] {
 float: left;
 position: relative;
 margin: 0px;
}
 
a[class*='featured-img-box'], a[class*='featured-img-box']:before, a[class*='featured-img-box']:after {
 border: 6px solid #fff;
 height: 200px; width: 200px;
 -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3) !important;
 -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3) !important;
 box-shadow: 2px 2px 5px rgba(0,0,0,0.3) !important;
}
 
a[class*='featured-img-box']:before, a[class*='featured-img-box']:after {
 background: #768590;
 content: "";
 position: absolute !important;
 z-index: -1;
}
 
a[class*='featured-img-box']:before {
 background: #eff4de !important;
}

/*STACK ONE*/
.featured-img-box:before {
 top: 4px !important;
 left: -6px !important;
}
 
.featured-img-box:after {
 top: -2px !important;
 left: -6px !important;
}
 
/*STACK TWO*/
.featured-img-box:before {
 top: 0px !important;
 left: -10px !important;
 -webkit-transform: rotate(-5deg) !important;
 -moz-transform: rotate(-5deg) !important;
 -o-transform: rotate(-5deg) !important;
 -ms-transform: rotate(-5deg) !important;
 transform: rotate(-5deg) !important;
}
 
.featured-img-box:after {
 top: 5px; left: 0px;
 -webkit-transform: rotate(4deg) !important;
 -moz-transform: rotate(4deg) !important;
 -o-transform: rotate(4deg) !important;
 -ms-transform: rotate(4deg) !important;
 transform: rotate(4deg) !important;
}
 
--- Expanded Version with div instead of anchor and stack 

/*STACK ONE*/
.stackone:before {
 top: 4px;
 left: -6px;
}
 
.stackone:after {
 top: -2px;
 left: -6px;
}
 
/*STACK TWO*/
.stacktwo:before {
 top: 0px;
 left: -10px;
 -webkit-transform: rotate(-5deg);
 -moz-transform: rotate(-5deg);
 -o-transform: rotate(-5deg);
 -ms-transform: rotate(-5deg);
 transform: rotate(-5deg);
}
 
.stacktwo:after {
 top: 5px; left: 0px;
 -webkit-transform: rotate(4deg);
 -moz-transform: rotate(4deg);
 -o-transform: rotate(4deg);
 -ms-transform: rotate(4deg);
 transform: rotate(4deg);
}
 
/*STACK THREE*/
.stackthree:before {
 top: 5px;
 left: -15px;
 z-index: -1;
 -webkit-transform: rotate(-10deg);
 -moz-transform: rotate(-10deg);
 -o-transform: rotate(-10deg);
 -ms-transform: rotate(-10deg);
 transform: rotate(-10deg);
}
 
.stackthree:after {
 top: -2px;
 left: -10px;
 -webkit-transform: rotate(-5deg);
 -moz-transform: rotate(-5deg);
 -o-transform: rotate(-5deg);
 -ms-transform: rotate(-5deg);
 transform: rotate(-5deg);
}

--- Using a filtered approach
div[class*='stack'] {
 float: left;
 position: relative;
 margin: 50px;
}
 
div[class*='stack'], div[class*='stack']:before, div[class*='stack']:after {
 border: 6px solid #fff;
 height: 200px; width: 200px;
 -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
 -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
 box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
 
div[class*='stack']:before, div[class*='stack']:after {
 background: #768590;
 content: "";
 position: absolute;
 z-index: -1;
}
 
div[class*='stack']:before {
 background: #eff4de;
}