Animated Book Covers

Memasang Kode Animated Book Covers
Login ke akun blog klik tombol blog baru, buat satubuah link baru
kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber berikut ini :
Get Blank Template
edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="Mys2010-styles"> 
.animated-promos, .animated-promos li {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}
.animated-promos li {
  float: left;
}
.animated-promos a {
  display: block;
}
.animated-promos li {
  position: relative;
  margin-right: 60px;
}
.animated-promos .book-cover {
  position: relative;
  z-index: 10;
  transition: all 0.5s ease-in-out 0s;
}
.animated-promos .promo-disc {
  position: absolute;
  z-index: 1;
  bottom: 70px;
  left: 93px;
  transition: all 0.5s ease-in-out 0s;
}
.animated-promos a:hover .promo-disc, .animated-promos a:focus .promo-disc {
  transform: translate(20px, 0px) rotate(320deg);
}
.animated-promos a:hover .book-cover, .animated-promos a:focus .book-cover {
  transform: rotate(-2deg);
  transform-origin: 50% 100%;
}
.book-cover {
  border: 10px solid #fff;
}
body {
  background-color: #cecece;
  padding: 20px;
}
a {
  color: #a20000;
}
/* clearfix */
.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  font-size: 0;
  height: 0;
  visibility: hidden;
}
.clearfix {
  display: block;
}
/* extra for Safari */
.clearfix {
  *height: 1%;
}
/* trigger hasLayout for IE6 + 7*/
</style>

<ul class="animated-promos clearfix">
 <li>
  <a href="">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/cover3-klein.png" alt="First book cover" class="book-cover">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/promo-disc-klein.png" alt="promotion disc, a DVD" class="promo-disc">
   <h3>Book #1</h3>
  </a>
 </li>
 <li>
  <a href="">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/cover2-klein.png" alt="Second book cover" class="book-cover">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/promo-disc-klein.png" alt="promotion disc, a DVD" class="promo-disc">
   <h3>Another hillarious book</h3>
  </a>
 </li></ul>

<link rel='stylesheet prefetch' href='https://sites.google.com/site/code6916/file/box-sizing-mys2010.css'>

Penjelasan :
Untuk memodifikasi kode tersebut tambahkan kode Outer di bawah ini :

.outer
{
 width:150px;
 height:220px;
 float:left;
 background-size:contain;
 overflow:hidden;
 box-sizing:border-box;
 margin:10px 18px 10px 18px;
 box-shadow:1px 1px 5px #111;}
/*end Outer*/
#topbar .Mys2010 {  
  code-modification: Mys #2010;
}

Terapkan di atas kode </style> kemudian tambahkan kode teks 3D

h1 {
  text-align: center;
  font: bold 80px Sans-Serif;
  padding: 0px 0;
}

.otto {
  background: #fff;
  color: #F0FFF0;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);}

Terapkan di bawah Kode

#topbar .Mys2010 {  
  code-modification: Mys #2010;
}

Selanjutnya hapus semua Kode yang berwarna putih
ganti dengan kode di bawah ini, terapkan di bawah kode </style>

<h1 class="otto">
BOOK COVERS
</h1>
<center>
<div id="topbar">
<table  border"2px solid">
<tr><td>
<ul class="animated-promos clearfix">
<li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmihdAZkFDa7NOkPosk4CFZyHDl6p0YRyp_Gc7a9V-IVCJ-JtPWiCQ_A5IReGYNv78nYv_cvvFYfwdy-Za7YqQTihJ2tXMU2goMTc7VZVRMWAR1FgEh3JWLDzMQ1hXpMj2yxbz8GAMa5KA/s1600-r/aa.jpg">
<section>
<div class="outer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7xMZiEnxLCcgf_aAzGlv2Z42OXwWVgLk7ysG9faEMQ9UdlFuojkcD5O7v87CS6n-QbJJTY-RxPIsEunbXEOlab_G_efUy89n9q0S47y0xtmlFnxVwo8jmDex6PuarxvkDTh0fPtIzpggf/s1600-r/buku-mys2010.jpg" alt="First book cover" class="book-cover">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt6tM3Uxc09SKLf4S5AwSRnd4wutJKirBzkUziBP1ZvZ45Zw2o07kxh4DNz3kKXou8CP8pTWuH9y4NW0xsrXKvA81xIw4YYXfa5Dl3doCYxYkQIG4MRwNh5I1vylEZew_y37Kr6r3y7eSI/s1600-r/dvd-mys2010.png" alt="promotion disc, a DVD" class="promo-disc">
</a>
</li>
<li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmihdAZkFDa7NOkPosk4CFZyHDl6p0YRyp_Gc7a9V-IVCJ-JtPWiCQ_A5IReGYNv78nYv_cvvFYfwdy-Za7YqQTihJ2tXMU2goMTc7VZVRMWAR1FgEh3JWLDzMQ1hXpMj2yxbz8GAMa5KA/s1600-r/aa.jpg">
<section>
<div class="outer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7xMZiEnxLCcgf_aAzGlv2Z42OXwWVgLk7ysG9faEMQ9UdlFuojkcD5O7v87CS6n-QbJJTY-RxPIsEunbXEOlab_G_efUy89n9q0S47y0xtmlFnxVwo8jmDex6PuarxvkDTh0fPtIzpggf/s1600-r/buku-mys2010.jpg" alt="First book cover" class="book-cover">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt6tM3Uxc09SKLf4S5AwSRnd4wutJKirBzkUziBP1ZvZ45Zw2o07kxh4DNz3kKXou8CP8pTWuH9y4NW0xsrXKvA81xIw4YYXfa5Dl3doCYxYkQIG4MRwNh5I1vylEZew_y37Kr6r3y7eSI/s1600-r/dvd-mys2010.png" alt="promotion disc, a DVD" class="promo-disc">
</a>
</li>
</ul>
</td><td> 
<ul class="animated-promos clearfix">
<li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmihdAZkFDa7NOkPosk4CFZyHDl6p0YRyp_Gc7a9V-IVCJ-JtPWiCQ_A5IReGYNv78nYv_cvvFYfwdy-Za7YqQTihJ2tXMU2goMTc7VZVRMWAR1FgEh3JWLDzMQ1hXpMj2yxbz8GAMa5KA/s1600-r/aa.jpg">
<section>
<div class="outer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7xMZiEnxLCcgf_aAzGlv2Z42OXwWVgLk7ysG9faEMQ9UdlFuojkcD5O7v87CS6n-QbJJTY-RxPIsEunbXEOlab_G_efUy89n9q0S47y0xtmlFnxVwo8jmDex6PuarxvkDTh0fPtIzpggf/s1600-r/buku-mys2010.jpg" alt="First book cover" class="book-cover">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt6tM3Uxc09SKLf4S5AwSRnd4wutJKirBzkUziBP1ZvZ45Zw2o07kxh4DNz3kKXou8CP8pTWuH9y4NW0xsrXKvA81xIw4YYXfa5Dl3doCYxYkQIG4MRwNh5I1vylEZew_y37Kr6r3y7eSI/s1600-r/dvd-mys2010.png" alt="promotion disc, a DVD" class="promo-disc">
</a>
</li>
<li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmihdAZkFDa7NOkPosk4CFZyHDl6p0YRyp_Gc7a9V-IVCJ-JtPWiCQ_A5IReGYNv78nYv_cvvFYfwdy-Za7YqQTihJ2tXMU2goMTc7VZVRMWAR1FgEh3JWLDzMQ1hXpMj2yxbz8GAMa5KA/s1600-r/aa.jpg">
<section>
<div class="outer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7xMZiEnxLCcgf_aAzGlv2Z42OXwWVgLk7ysG9faEMQ9UdlFuojkcD5O7v87CS6n-QbJJTY-RxPIsEunbXEOlab_G_efUy89n9q0S47y0xtmlFnxVwo8jmDex6PuarxvkDTh0fPtIzpggf/s1600-r/buku-mys2010.jpg" alt="First book cover" class="book-cover">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt6tM3Uxc09SKLf4S5AwSRnd4wutJKirBzkUziBP1ZvZ45Zw2o07kxh4DNz3kKXou8CP8pTWuH9y4NW0xsrXKvA81xIw4YYXfa5Dl3doCYxYkQIG4MRwNh5I1vylEZew_y37Kr6r3y7eSI/s1600-r/dvd-mys2010.png" alt="promotion disc, a DVD" class="promo-disc">
</a>
</li>
</ul>
</table>
<link rel='stylesheet prefetch' href='https://sites.google.com/site/code6916/file/box-sizing-mys2010.css'>

Untuk melihat hasil klik pratinjau dan untuk penyimpanan klik perbarui selesai

Source Code by. Jens Grochtdreis 
Design code is edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy and paste you canDownload Here Animated Book Covers

Category: Animated Book Covers

Mys2010 on Codepen

POPULAR

Blog Archive