Cara Menciptakan Banner Cover Laptop/Pc Dengan Css

Cara Membuat Banner Cover PC dengan CSS Hallo sobat, apakah Anda pernah melihat banner Template yang menampilkannya ibarat Cover PC atau Sobat seorang design template dan ingin menampilkan hasil karya template Sobat dengan Cover PC.

Demo   CODE

Pada kesempatan ini aku akan mengembangkan tips cara memasang banner Template dengan style PC, kabar baiknya untuk membuatnya memakai CSS. Dengan demikian Sobat dapat dengan gampang mengaturnya. Bagi Sobat yang tertarik berikut ini langkah-langkanya :

Silahkan Sobat buka Editor Template, kemudian Sobat cari kode ]]></b:skin> kemudian salin instruksi dibawah ini dan pasangkan diatasnya .

.macbook {
  margin: 25px auto 50px auto;
  overflow: hidden;
  width: 416px;
}
.macbook .screen {
  position: relative;
  height: 234px;
  background-color: #EBE3AA;
  border: 20px solid #838689;
  border-radius: 10px;
  padding-top: 10px;
}
.macbook .screen:after {
  position: absolute;
  top: -12px;
  content: "";
  width: 6px;
  height: 6px;
  background: #aaacae;
  border-radius: 50%;
  left: calc(50% - 3px);
}
.macbook .screen .row {
  width: 100%;
  height: 90px;
  position: relative;
  margin-left: 9px;
}
.macbook .screen .row .card-item {
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-animation: show-card 500ms ease 500ms forwards;
          animation: show-card 500ms ease 500ms forwards;
  position: relative;
  width: 95%;
  height: 200%;
  margin-top: -40px;
  display: inline-block;
  background-color: #5D4157;
}
.macbook .screen .row .card-item .photo {
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-animation: show-photo 500ms ease 900ms forwards;
          animation: show-photo 500ms ease 900ms forwards;
  height: 70%;
  margin: 4px;
  background-color: #CAD7B2;
  -webkit-transition: background-color 0.2s ease-in;
          transition: background-color 0.2s ease-in;
}
.macbook .screen .row .card-item .photo:after {
  position: absolute;
  margin: 0 auto 0 auto;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 100px 80px 150px;
  border-color: transparent transparent #A8CABA transparent;
  bottom: 0;
}
.macbook .screen .row .card-item .photo:before {
  position: absolute;
  margin: 0 auto 0 auto;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 100px 65px 200px;
  border-color: transparent transparent #98c0ad transparent;
  bottom: 0;
  left: 25px;
}
.macbook .screen .row .card-item .photo:hover {
  cursor: pointer;
  background-color: #d8e7e0;
  -webkit-transition: background-color 0.2s ease-out;
          transition: background-color 0.2s ease-out;
}
.macbook .screen .row .card-item .text {
  width: 0;
  -webkit-animation: show-text 500ms ease 900ms forwards;
          animation: show-text 500ms ease 900ms forwards;
}
.macbook .screen .row .card-item .text .line {
  margin: 3px 4px 1px 4px;
  height: 4px;
  background-color: #A8CABA;
  margin-bottom: 0px;
}
.macbook .screen .row .card-item .text .line-short {
  width: 25%;
}
.macbook .screen .row .card-item .text .line-medium {
  width: 55%;
}
.macbook .base {
  position: relative;
  height: 28px;
  background-color: #9d9fa2;
  border-radius: 5px;
  margin-top: 20px;
}
.macbook .base:after {
  position: absolute;
  margin: 0 auto 0 auto;
  content: "";
  width: 66px;
  height: 8px;
  background: #aaacae;
  border-radius: 0 0 5px 5px;
  left: calc(50% - 33px);
}

/* macbook */
@-webkit-keyframes show-card {
  0% {
    -webkit-transform: scale(0) rotate(25deg);
            transform: scale(0) rotate(25deg);
  }
  60% {
    -webkit-transform: scale(1.1) rotate(-10deg);
            transform: scale(1.1) rotate(-10deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(0);
            transform: scale(1) rotate(0);
  }
}
@keyframes show-card {
  0% {
    -webkit-transform: scale(0) rotate(25deg);
            transform: scale(0) rotate(25deg);
  }
  60% {
    -webkit-transform: scale(1.1) rotate(-10deg);
            transform: scale(1.1) rotate(-10deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(0);
            transform: scale(1) rotate(0);
  }
}
@-webkit-keyframes show-photo {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  60% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes show-photo {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  60% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes show-text {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes show-text {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@-webkit-keyframes background-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes background-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

Selanjutnya pemasangan HTML, Sobat menuju Entri gres kemudian copy instruksi dibawah ini dan pasangkan pada Mode HTML .

<div class="macbook">

<div class="screen">
<div class="row">
<div class="card-item">
        <div class="photo">
</div>
<div class="text">
          <div class="line">
</div>
<div class="line">
</div>
</div>
</div>

</div>
</div>
<div class="base">
</div>
</div>

Apabila Anda Ingin Menggunakan image atau gambar, silahkan Anda hapus instruksi yang aku beri jarak. dan ganti dengan instruksi <img border="0" src="URL Gambar" height="200" width="200" />

Semoga bermanfaat!


Sumber http://www.websiteedukasi.com/