Efek Selotip dengan CSS

Mempercantik tampilan blog pasti sering dilakukan para blogger. Kali ini mbah mau berbagi cara mempercantik tampilan blog dengan membuat efek selotip hanya dengan CSS.

Seperti tampilan Homepage blog ini dalam Mode mobile atau tampilan saat menggunakan smartphone (efek di blog ini tidak akan tampil dalam mode PC/Desktop). Mbah mempercantik dengan menambahkan Solasi atau Selotip disetiap posting.

Keren ga ? Ikuti langkah dibawah ini jika ingin memasangnya.

Letakkan kode CSS berikut ditempatnya

/* effect stape by.MBahas.com */

.tape {
position: relative;
text-align: center;
display: inline-block; *display: inline; zoom: 1;
margin: 20px auto 10px;
}
.satu:before,
.dua:before, .dua:after,
.tiga:before, .tiga:after,
.empat:before, .empat:after {
content: "";
display: block;
width: 100px;
height: 30px;
position: relative;
top: 20px;
margin: auto;
background: rgba(255,255,200,0.6);
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}
.tape img {
display: inline-block; *display: inline; zoom: 1;
border: 1px solid #ddd;
margin: 0 20px;
padding: 8px;
background: #fff;
text-align:center;
vertical-align:top;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}
.dua:before, .dua:after {
position: absolute;
top: 10px;
}
.dua:before {
left: 0;
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
transform: rotate(-35deg);
}
.dua:after {
right: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.tiga:before, .tiga:after {
position: absolute;
top: 10px;
}
.tiga:before {
left: 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.tiga:after {
top: inherit;
bottom: 10px;
right: 0;
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
transform: rotate(-35deg);
}
.empat:before, .empat:after {
width: 30px;
height: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
}
.empat:before {
left: 10px;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
transform: rotate(3deg);
}
.empat:after {
margin-top: -60px;
right: 10px;
}
.tape img {
display: inline-block; *display: inline; zoom: 1;
border: 1px solid #ddd;
margin: 0 20px;
padding: 8px;
background: #fff;
  text-align:center;
  vertical-align:top;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
  max-width:100%;
  height: auto;
}

Setelah itu letakkan kode HTML berikut sesuai konten yang akan di selotip

<div class="tape satu">
  Konten
</div>
<div class="tape dua">
  Konten
</div>
<div class="tape tiga">
  Konten
</div>
<div class="tape empat">
  Konten
</div>
<div class="tape tiga">
  Konten
</div>
<div class="tape empat dua">
  Konten
</div>
<div class="tape satu">
  Konten
</div>

Konten diatas Mbah isi dengan gambar jadi akan menampilkan gambar-gambar yang seolah-olah ditempelkan dengan selotip. Silahkan cucu berkreasi dengan memodifikasi kode diatas & sesuaikan syntax AMP HTML sesuai konten. Berikut hasilnya

DEMO

Selamat mencoba