CSS3/jQuery Stacked Cards

Prototype for a Stacked Contact Cards "virtual filing system" layout.

by secretgspot

HTML

<div id="wrapper">
                  
    <h1>STACKED CARDS demo</h1>

        <ul id="index_cards">
            <li id="card-1" class="card">
                <h3>James Andrews</h3>
                <a href="#edit"><img src="images/profile.png" height="130" width="130" alt="Edit Photo" /></a>
                <label>Phone: <input type="tel" class="phone" value="1-234-567-8900" size="12" maxlength="17" /></label>
                <label>Email: <input type="email" class="email" value="[email protected]" size="15" maxlength="50" /></label>                        
                <label>Address: <input type="text" class="address" value="55 Southland Ave., Buenavista CA" size="10" maxlength="100" /></label>                        
                <label>Company: <input type="text" class="company" value="Andrews Advocates" size="12" maxlength="50" /></label>
                <label>Title: <input type="text" class="name" value="Lawyer" size="15" maxlength="50" /></label>
            </li>
            <li id="card-2" class="card">
                <h3>Harold Bainbridge</h3>
                <a href="#edit"><img src="images/profile.png" height="130" width="130" alt="Edit Photo" /></a>
                <label>Phone: <input type="tel" class="phone" value="1-234-567-8901" size="12" maxlength="17" /></label>
                <label>Email: <input type="email" class="email" value="[email protected]" size="15" maxlength="50" /></label>                        
                <label>Address: <input type="text" class="address" value="123 Smithwick Cres., Sunnyview CA" size="10" maxlength="100" /></label>                        
                <label>Company: <input type="text" class="company" value="Telco" size="12" maxlength="50" /></label>
                <label>Title: <input type="text" class="name" value="Developer" size="15" maxlength="50" /></label>                        
            </li>
            <li id="card-3" class="card">
                <h3>Anthony Carmela</h3>
       ...

CSS

/* CSS Reset */    
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse;    border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,label,th,var,small { font-style:normal; font-size:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }

/* General styling */    
body {
    width:100%;
    height:100%;                
    position:relative;
    font-family:"Arial Narrow", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Arial Black", Gadget, sans-serif;
}

h3 {
    margin-top:-25px;
}

label {
    padding-left:135px;
    display:block;
    line-height:28px;
    text-align:left;
    font-weight:bold;
}

input {
    border:0px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;                
}
            
/* Index Card Styling */
ul#index_cards {
    width:300px;
    margin:0px auto;
    text-align:center;                
}

ul#index_cards li {
    background:url(images/card_bg.jpg) #fff repeat;
    width:300px;
    height:150px;                
    display:block;                
    float:left;
    position:relative;
    border:1px solid #666;
    padding:25px 10px;
    -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;
    -webkit-box-shadow: 5px -4px 7px rgba(53, 50, 50, 0.56);
    -moz-box-shadow:    5px -4px 7px rgba(53, 50, 50, 0.56);
    box-shadow:         5px -4px 7px rgba(53, 50, 50, 0.56);                
}

/* Hover States */
ul#index_cards li:hover {
    z-index:4;
}

.card:hover {
    -moz-transform: scale(1.1) rotate(-18deg);
    -webkit-transform: scale(1.1) rotate(-18deg);                
}

/* Content...

JavaScript

$(function() {
    $(".card:not(:first)").each(function(index){
        var OFFSET = 175; // rough amount of offset needed to properly overlay cards
        $(this).css({
            "top" : $("#card-1").position().top - $("#card-1").outerHeight() - (index*OFFSET)
        });
    });
});