Amazing Dynamic Stack Effect For Blogger

| |

After my previous tutorial on CSS menu without JQUERY scripts. Now I am going to present an amazing dynamic stack effect with CSS3 for blogger. This was created by & by working on it Blogger Tricks Hut made it for blogger. You can view a demo of this effect here. Here we will use a very simple code to add this to blogger. Okay now lets start.

1. Go to layout and 'add a gadget'.
2. Select HTML/JAVASCRIPT widget.
3. Paste the following code in it.

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

@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');


body {
  font-family: NotethisRegular, Verdana, Arial, sans-serif;

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

#wrapper {
  margin:0 auto;
/* Index Card Styling */

ul#index_cards {

ul#index_cards li {
  background:url(../images/card_bg.jpg) repeat;
  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;

#card-1 {
  -webkit-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);

#card-2 {
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);

#card-3 {

#card-4 {
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);

#card-5 {
  -webkit-transform: rotate(20deg);
  -moz-transform: rotate(20deg);

ul#index_cards li:hover {

#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);
/* Blogger Tricks Hut*/

ul#index_cards li img {
  -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 {
Hope you can make changes in it. If not please leave a comment & I will post another tutorial on customizing this.
Credits : BloggerTricksHut.Blogspot.In


Post a Comment

Powered by Blogger.