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. Brad says:

    Excellent! Wonderful show of CSS3. Well done!

  2. great, thank you.

  3. Wow! This is fantastic. Btw, I think that it looks better without the transition effect, but thats not important.

    • ximi says:

      Thanks for your comment!

      That is most probably a matter of personal taste, but you can simply leave them away in your code if you don’t like them that much.
      Transition effects are currently only displayed in Chrome and Safari anyway.

  4. Renjith R says:

    Excellent Work But its not working with IE 6, Most of our country using IE 6? How it possible in IE 6

    • ximi says:

      As I mentioned in the article CSS3 doesn’t have any native support in Internet Explorer 6.

      You could install Chrome Frame in order to create CSS3 support, but I don’t know what CSS3 features are supported by Chrome Frame. Chrome Frame is a plugin for IE6 created by Google and enables HTML5/CSS3 support as well as it fixes security holes and other bugs.

      You could also recommend it to your visitors, but in best case you use a different browser (Safari and Google Chrome offer the widest CSS3 support).

    • Derek Herman says:

      What country are you from that still uses IE 6 as the default browser?

  5. Dinesh says:

    Amazing showcase of CSS3 capabilities.

  6. Jesus says:

    CSS3 is using a lot of resources!! Watch out

  7. Ed Lee says:

    As a whole I do not make comments on blogs, but I have to mention that this post really forced me to do so. Really proficient post

  8. Elijah says:

    Great !

  9. Keneth Mixer says:

    Wow You did a really good job on this thing.

  10. Gojeg says:

    Really coool!!!
    Nice work!
    Gojeg´s featured post: Simple jQuery+CSS Toolbar for Your Blog

  11. David Kuhta says:

    Fantastic Job…the tutorial is easy to follow and comprehensive. On the aside, I love the snazzy design of your site too!
    David Kuhta´s featured post: Semantic Web In Action – Faviki

  12. Jireck says:

    Marvelous !!!

    Bravo !!! du grand Art !!!
    Jireck´s featured post: Mon Premier Reader Feedburner, Merci à Toi

  13. 剑心 says:

    不错 留个脚印

  14. Arshad Cini says:

    You did a really good job

    Thanks

  15. Wow, what a great tutorial! I’ve been using CSS3 box shadows (and IE shadow filters in conditional commented stylesheets for IE6, 7 & 8) and gradients for quite some time now. It really saves a lot of CSS code. I’m hoping IE9 will be fully supportive of CSS3. That would be great.

    Do you perhaps know where I can find an extensive list of all the CSS3 features?

  16. Newton Hagee says:

    I feel I should say, I love your blog

  17. Dolido says:

    Thanks for this post, good job.

  18. TheArchitect says:

    I really really don’t understand about CSS3. But, thanks for your post. I will learn more about it. :D
    TheArchitect´s featured post: Landscape Residence Concept by Forward Design Office

  19. Allen Koo says:

    This is certainly a valuable resource you are providing and you give it away at no cost. I like discovering web sites that realize the value of offering a useful resource for free. I truly loved reading your article :-) Thanks

  20. sadhu says:

    this is nice

  21. Thank you very much for an useful article! And not least your comments on the compatibility between various browsers. Every web designer know about that struggle! :-)

  22. Webdesign says:

    You did a really good job, keep on this good work!

    Thanks
    Webdesign´s featured post: 29-06-10 – Cybercrime

  23. Stephan says:

    Hi, when concerning Firefox the “rounded-corners” rule could be applied only on transparency images, doesn’t it?

  24. moufeed says:

    good job!
    thanks for you

  25. jD says:

    Good work. I love the new opportunities with css3 and hope I see it soon implemented in all browsers.

  26. Lucas says:

    the design is incredible
    i added to my web site
    http://www.ajaxshake.com
    thanks
    Lucas´s featured post: Use Sprites to Create an Awesomeness Filled Navigation Menu

  27. frasi says:

    Fantastic Job…the tutorial is easy to follow and comprehensive. On the aside, I love the snazzy design of your site too!

  28. save fuel says:

    You could also recommend it to your visitors, but in best case you use a different browser (Safari and Google Chrome offer the widest CSS3 support).

  29. webdesign says:

    Wow, love the rotation! To be honest I actually didn’t even know that was possible :-) One thing: when hovering a card I see the text on the other cards moving a bit.

  30. Webdesigner says:

    Nice idea and great tutorial! Thank you!
    Webdesigner´s featured post: Warlock Media

  31. e11world says:

    Very amazing stuff! I love this very much and first time I see something like this.

  32. luis says:

    Keep up with the good work!
    luis´s featured post: Pr 3 package

  33. Mike says:

    This is a cool effect. Loving HTML 5 and CSS3.
    Mike´s featured post: Car Insurance Estimates

  34. 微步.清野 says:

    CSS3的特效确实令人佩服,非常不错!

  35. Nice to read. Good work. I love the new opportunities with css3 and hope I see it soon implemented in all browsers.

  36. I really need it because I am about to take a modular course on programming like PSD!!

  37. Yehyaa says:

    Cooool nice css3 examples.
    does anyone know a reference that allows me to start learning it from scratch ?

  38. Excellent CSS3 examples yeah! It’s really a shame that the transform property hasn’t been widely implemented yet. It’s the one property that can REALLY make a page look dynamic, even without the help of Javascript!

  39. Laarzen says:

    What a great job, many thanks

  40. Dukan dieet says:

    Really great effect! Like it!

  41. great work…

  42. Incasso says:

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

    Cheers.
    Tim
    Incassobureau

  43. Very nice. I love CSS3 and HTML5!

  44. Twentec says:

    good story!

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

  46. erd says:

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

  47. 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 Enabled