Posted by Aak
Aak-share.com Updated at: 12:09:00 PM

Cara Membuat Banner Cover Laptop/PC dengan CSS

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



Pada kesempatan ini saya akan berbagi tips cara memasang banner Template dengan style PC, kabar baiknya untuk membuatnya menggunakan CSS. Dengan demikian Sobat bisa dengan mudah mengaturnya. Bagi Sobat yang tertarik berikut ini langkah-langkanya :

Silahkan Sobat buka Editor Template, kemudian Sobat cari kode ]]></b:skin> lalu salin kode 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 baru lalu copy kode 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 kode yang saya beri jarak. dan ganti dengan kode <img border="0" src="URL Gambar" height="200" width="200" />

Semoga bermanfaat!

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments