DesignLovr

Use CSS3 to Create a Dynamic Stack of Index Cards

Recently we hear a lot about CSS3 and its features and even though there are already some web sites out there that take advantage of some of the CSS3 features (including DesignLovr) we hardly ever see the full potential of what can be achieved with CSS3.
Today we’re going to take a step into that direction and discover some of the possibilities CSS3 gives us.

We will create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling).

Let’s start with the simple HTML-markup, which consists of simple, unordered list, filled with random content. If you want you can download the icons I used at Tutorial 9.


<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>

Now the CSS. I’m using the Yahoo User Interface(YUI) 2 CSS Reset to achieve similar results in all browsers, then we’ll need to define the fonts we want to use with @font-face (for more information on @font-face have a look at our recent post 30 Beautiful and Free Fonts You Can Use with @font-face) and add some general CSS rules.

The fonts Note This and Kulminoituva, both of which are available in @font-face kits (with all necessary font-formats and preformatted CSS-file) on Font Squirrel, are the ones used in my example design.


/* @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;
}

Then we’ll need to style the index cards.
First we add some general CSS2.1 rules like the height, width, padding and border (You can choose whatever values you see fit). The background image is optional, but also makes the index cards look so much better (you can download it here). Make sure to set position:relative, display:block and float:left.

Additionally we’ll use some CSS3 stylings to kick our cards a notch up.

With the help of border-radius we achieve rounded corners, the px-value you assign will result in smaller or bigger rounded edges.

The box-shadow property allows us to add a drop shadow to the index cards; the first value determines the horizontal (x) offset, the second value the vertical (y) offset and the third value the size of the blur. The last value defines the color of the shadow. With the help of this property you are able to imitate nearly every drop shadow you can create in Photoshop.

The transition property allows us to define how and how long changes into different states (:hover, :active, etc.) will occur. The first value indicates the property your targeting (like this you can as an example have different animation effects for the growth and rotation of an element) , the second the time the transition will take and third defines the rendering of the animation (how the animation will transform over time).
Possible values for the third value are: linear, ease(default), ease-in, ease-out, ease-in-out and cubic-bezier, which allows you to define your own behavior. The transition property is currently only recognized by Safari and Chrome, but is planned for Firefox 3.6. For more information on CSS3 Animations visit the official Safari Blog.


/* 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;
}

Remark

You might have noticed that all three properties exists twice and are preceded once by “-webkit-“ (for Safari and Chrome) and once by “-moz-“ (for Firefox). Because CSS3 is not officially released and supported yet you have to address specific browsers this way.

Now we have to add some individual styling to each card.
Arrange the cards with the help of top, right, bottom and left and then, with the help of transform:rotate add a rotation to the cards. Make sure that the values of the two outmost cards (1 and 5) and two inner cards (2 and 4) are opposing (e.g -20deg for Card 1 and 20 deg for Card 5).
You also need to assign different values to the z-index of the cards – use the values form the code below.

Quicktip

The transform property allows you more than just to rotate an element, with its help you can also translate (move), skew and scale. For more information visit the official w3.org page on this property.


#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;
}

Now we only have to add the different hover states to the cards.
First we’ll assign a general hover state to all cards in which we assign a high z-index to the currently hovered card. Like this the appropriate card is always in front.

Then you have to add individual transform values to each card. This time we need to use the transform property’s scale function besides the rotate function.
In the code below each card is scaled up 110% (x1.1) and rotate 2 degrees (you have to consider the card’s original rotation though, e.g. from 10 degree to 12).


/* 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); 
}

Finally you just have to add some styling to the content of the cards.
Despite the CSS-Reset we used there might be differences in the margin and padding of the custom @font-face fonts, there seem still to be some issues regarding cross-browser compatibility.

In my specific example I added rounded corners, a drop shadow and background to the featured images and some minor adjustments to the text.


/* 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;  
}

As you see you can achieve great results with the help of CSS3.
I could imagine an interesting authors page or extensive navigation that use effects similar to this.

Unfortunately CSS3 effects aren’t supported in all current web browsers yet. Our specific example will look best in the latest versions of Safari and Chrome, followed by Firefox, which is missing the transition effect. Internet Explorer 8 and Opera have appropriate fallbacks (even though they’re not even close to the original effect), whereas it doesn’t work at all in Internet Explorer 7 and earlier versions.

If you want to find out more about CSS3 and discover some of the other advantages it offers you should check out css3.info.

Share on Facebook Stumble this post Bookmark on Delicious

Similar Posts

117

Comments so far

  1. Incasso says:

    Wow, great info! I’m using css3 much more in my layout these days.

    Cheers.
    Tim
    Incassobureau

  2. Very nice. I love CSS3 and HTML5!

  3. Fun to play with the effects!
    .-= Cambridge dieet´s featured post: Voordelen Cambridge dieet =-.

  4. erd says:

    A very nice example, pitty that a lot of the css3 isn’t compatible with the terrible internet explorer browsers.

  5. webdesign says:

    Thanx for tha article. I really need it because I am about to take a modular course on programming like PSD!!
    .-= webdesign´s featured post: 13/07/11 – Opgeleverd werk juni en juli 2011 =-.

Leave a Reply

CommentLuv badge