Amazing Dynamic Stack Effect For Blogger

Posted by Pradeep | | ,


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 designlovr.com & 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.

<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>
<style>
/* bloggertrickshut.blogspot.com*/

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

/* bloggertrickshut.blogspot.com*/

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

#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;
}
/* bloggertrickshut.blogspot.com*/

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

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

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
Powered by Blogger.