11th June 2012 Marvin@Blogfreakz · CSS3, Design, Tutorials · 1 Comment

How to Create Dynamic Stack of Index Cards with CSS3

Here’s a cool CSS3 tutorial from Designlovr and it shows how you can create a dynamic stack of index cards.

HTML markup

 <body>
<div id="wrapper">
<ul id="index_cards">
<li id="card-1">
<h3>Card 1</h3>
<img src="images/t9tuqui_trans.png" height="130" width="130" alt="Toucan" />
<p>Name: Toucan<br />
Age: 5<br />
Size: 50 cm<br />
Weight: 600 g<br />
Food: Fruit<br />
Toucan lives in southern and central America and loves to fly around</p>
</li>
<li id="card-2">
<h3>Card 2</h3>
<img src="images/t9foxy_trans.png" height="130" width="130" alt="Fox" />
<p>Name: Fox<br />
Age: 3<br />
Size: 70 cm<br />
Weight: 5.5 kg<br />
Food: Meat<br />
Fox lives in the northern hemisphere and loves to play seek and hide</p>
</li>
<li id="card-3">
<h3>Card 3</h3>
<img src="images/t9dog2_trans.png" height="130" width="130" alt="Dog" />
<p>Name: Dog<br />
Age: 8<br />
Size: 120 cm<br />
Weight: 10 kg<br />
Food: Bones<br />
Dog lives in a dog hut and loves to chew shoes, bark and go for walks</p>
</li>
<li id="card-4">
<h3>Card 4</h3>
<img src="images/t9penguino_trans.png" height="130" width="130" alt="Penguin" />
<p>Name: Penguin<br />
Age: 20<br />
Size: 110 cm<br />
Weight: 35 kg<br />
Food: Fish<br />
Penguin lives where it's cold and icy and loves to swim and dive</p>
</li>
<li id="card-5">
<h3>Card 5</h3>
<img src="images/t9lion_trans.png" height="130" width="130" alt="Lion" />
<p>Name: Lion<br />
Age: 12<br />
Size: 190 cm<br />
Weight: 180 kg<br />
Food: Meat<br />
Lions lives in Africa and loves to sleep most of the day and hunt sometimes</p>
</li>
</ul>
</div>
</body

CSS

/* @font-face definitions */
 
@font-face {
  font-family: 'KulminoituvaRegular';
  src: url('../fonts/kulminoituva.eot');
  src: local('Kulminoituva Regular'), local('Kulminoituva'), url('../fonts/kulminoituva.woff') format('woff'), url('../fonts/kulminoituva.ttf') format('truetype'), url('../fonts/kulminoituva.svg#Kulminoituva') format('svg');
}
 
@font-face {
  font-family: 'NotethisRegular';
  src: url('../fonts/Note_this.eot');
  src: local('Note this Regular'), local('Notethis'), url('../fonts/Note_this.woff') format('woff'), url('../fonts/Note_this.ttf') format('truetype'), url('../fonts/Note_this.svg#Notethis') format('svg');
}
 
/* General styling */
 
body {
  background:#202020;
  font-family: NotethisRegular, Verdana, Arial, sans-serif;
  font-size:125%;
  color:#202020;
}
 
h1, h2, h3, h4, h5, h6 {
  font-family: KulminoituvaRegular, "Arial Black", Gadget, sans-serif;
  font-size:1.5em;
}
 
#wrapper {
  width:760px;
  margin:0 auto;
  text-align:center;
  padding-top:50px;
}

Index card styling

/* Index Card Styling */
  
ul#index_cards {
  margin-top:50px;
  text-align:center;
}
  
ul#index_cards li {
  background:url(../images/card_bg.jpg) repeat;
  height:450px;
  width:130px;
  display:block;
  float:left;
  border:1px solid #666;
  padding:25px 10px;
  position:relative;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-box-shadow: 2px 2px 10px #000;
  -webkit-box-shadow: 2px 2px 10px #000;
  -moz-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
}

Adding individual styling for each card

#card-1 {
  -webkit-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  z-index:1;
  left:150px;
  top:40px;
}
  
#card-2 {
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  z-index:2;
  left:70px;
  top:10px;
}
  
#card-3 {
  background-color:#69732B;
  z-index:3;
}
  
#card-4 {
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  z-index:2;
  right:70px;
  top:10px;
}
  
#card-5 {
  -webkit-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  z-index:1;
  right:150px;
  top:40px;
}

Hover state

 
/* Hover States */
  
ul#index_cards li:hover {
  z-index:4;
}
  
#card-1:hover {
  -moz-transform: scale(1.1) rotate(-18deg);
     -webkit-transform: scale(1.1) rotate(-18deg); 
}
    
#card-2:hover {
  -moz-transform: scale(1.1) rotate(-8deg);
   -webkit-transform: scale(1.1) rotate(-8deg); 
}
  
#card-3:hover {
  -moz-transform: scale(1.1) rotate(2deg);
   -webkit-transform: scale(1.1) rotate(2deg); 
}
  
#card-4:hover {
  -moz-transform: scale(1.1) rotate(12deg);
   -webkit-transform: scale(1.1) rotate(12deg); 
}
  
#card-5:hover {
  -moz-transform: scale(1.1) rotate(22deg);
   -webkit-transform: scale(1.1) rotate(22deg); 
}

Content styling

/* Content Styling */
  
ul#index_cards li img {
  margin-top:7px;
  background:#eee;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-box-shadow: 0px 0px 5px #aaa;
  -webkit-box-shadow: 0px 0px 5px #aaa;
}
      
ul#index_cards li p {
  margin-top:4px;
  text-align:left;
  line-height:28px;  
}

Click on the image to view more on this in-depth tutorial.

Check the DEMO and DOWNLOAD.

Incoming search terms for the article:

About the author

Marvin@Blogfreakz

Marvin@Blogfreakz

Marvin Bea is a blogger, webmaster and musician from the Philippines. His interests include arts, photography, travel, fitness and health.

Related Posts

Creating a Psychedelic Art Effect in Your Portraits

0 Comments

Inspirational Photo Retouches By Cristian Girotto

0 Comments

Create Your Own Sticker Design Via Photoshop

0 Comments

Creating The Great Gasby Art Deco Style

0 Comments

1 Comment

  1. Daniel Davis

    06.11.2012

    Hi. This looks good but unfortunately doesn’t support Opera. Please could you add the -o- prefixes?
    Also, to make it future-proof, the non-prefixed properties (e.g. transition, transform) should also be added as they are now out of experimental status (as of last week).