large shade tree

Navigation

Information

Recent Posts

Shade Tree Sites |Building Better Websites

CSS3 Tilted Sticky Note Effect

Sticky Note Final

Final Result

HTML Basic Markup

<ul>
<li>
<a href="#">
<h2>Title #1</h2>
<p>Text Content #1</p>
</a>
</li>
<li>
<a href="#">
<h2>Title #2</h2>
<p>Text Content #2</p>
</a>
</li>
[…]
</ul>

CSS to make yellow squares:

{  margin:0;  padding:0;  }
body{  font-family:arial,sans-serif;  font-size:100%;   margin:3em;   background:#666;  color:#fff;  }
h2,p{  font-size:100%;   font-weight:normal;  }
ul,li{   list-style:none;  }
ul{  overflow:hidden;  padding:3em;  }
ul li a{  text-decoration:none;  color:#000;  background:#ffc;  display:block;  height:10em;   width:10em;  padding:1em;  }
ul li{ margin:1em; float:left;  }

 

step1

Font

Google Font Reenie Beanie

<link  href=”http://fonts.googleapis.com/css?
family=Reenie+Beanie:regular”   rel=”stylesheet”   type=”text/css”>

CSS:

ul li h2{  font-size:140%;  font-weight:bold;  padding-bottom:10px;  }

ul li p{  font-family:”Reenie Beanie”,arial,sans-serif;  font-size:180%;  }

CSS Drop Shadow

ul li a{  text-decoration:none;  color:#000;   background:#ffc;  display:block;  height:10em;   width:10em;  padding:1em;
/* Firefox */  -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
/* Safari+Chrome */   -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
/* Opera */   box-shadow: 5px 5px 7px rgba(33,33,33,.7);  }

Note Tilting

ul li a{  -webkit-transform:rotate(-6deg);  -o-transform:rotate(-6deg);  -moz-transform:rotate(-6deg);  }

Randon Note Tilting

ul li:nth-child(even) a{  -o-transform:rotate(4deg);  -webkit-transform:rotate(4deg);  -moz-transform:rotate(4deg);  position:relative;  top:5px;  }

ul li:nth-child(3n) a{  -o-transform:rotate(-3deg);  -webkit-transform:rotate(-3deg);   -moz-transform:rotate(-3deg);  position:relative;  top:-5px;  }

ul li:nth-child(5n) a{  -o-transform:rotate(5deg);   -webkit-transform:rotate(5deg);  -moz-transform:rotate(5deg);  position:relative;  top:-10px;  }

step3
Zoom on Hover & Focus

ul li a:hover,ul li a:focus{ -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7); -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);box-shadow:10px 10px 7px rgba(0,0,0,.7);-webkit-transform: scale(1.25);-moz-transform: scale(1.25);-o-transform: scale(1.25); position:relative; z-index:5;}

step4

 

Smooth Zoom Transition

ul li a{text-decoration:none;color:#000;background:#ffc;display:block;
height:10em;width:10em;padding:1em;
-moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
-webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
box-shadow: 5px 5px 7px rgba(33,33,33,.7);
-moz-transition:-moz-transform .15s linear;
-o-transition:-o-transform .15s linear;
-webkit-transition:-webkit-transform .15s linear;}

 

Additional Note Colors

ul li:nth-child(even) a{-o-transform:rotate(4deg);
-webkit-transform:rotate(4deg);
-moz-transform:rotate(4deg);
position:relative;
top:5px;background:#cfc;}

ul li:nth-child(3n) a{-o-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
position:relative;
top:-5px;
background:#ccf;}

 

Source: net.tutplus.com