Make Left Corner with Hover Bray Effect

Kembali pada daya kreatifitas masing-masing dalam mengembangkan sebuah hasil jadi. Ada penambahan ini-itu, pengurangan agar tampil minimalis, yang semua itu tinggal diatur sesuai dengan kebutuhan. Kembali mengupdate artikel trik pojok! Menambahkan gaya tampilan pada trick pojok agar tidak hanya monoton menampilkan konten si pojok itu sendiri. Paling banter mensisipkan link di pojokan :d Koben akan berbagi membuat konten pojokan (corner), ketika cursor diarahkan ke pojokan akan menutup (menyembunyikan) semua bagian blog. Blog akan kembali terlihat jika cursor diarahkan keluar jendela browser.
Memang bingung menjelaskan dengan kata-kata perihal bahasa HTML ;)) Perhatikan pojokan kiri atas, arahkan kesana!

LEFT CORNER

#ribbon {
  position: fixed;
  width: 200px;
  height: 30px;
  background: rgba(0,0,0,.7);
  color: #fff;
  line-height: 30px;
  font-weight: bold;
  left: -40px;
  top: 40px;
  -webkit-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
  text-align: center;
  box-shadow: 0 0 6px #999;
  z-index: 1999;
}
#ribarea {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  z-index: 1999;
  font-size: 25px;
  background: rgba(0,0,0,.89);
}
#ribbon:hover {
  opacity: 0;
}
#ribbon:hover ~ #ribarea, #ribarea:hover {
  display: block;
}
#ribcont {
  position: fixed;
  right: -100px;
  bottom: 0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  box-shadow: 0 0 25px #fff;
}

Planing HTML<div id="ribbon">LEFT CORNER</div>
<div id="ribarea">

----------- ADD YOUR CONTENT HERE -----------

</div>Tinggi warna atau yang lainnya tinggal diatur-atur saja. Demikian artikel corner left bray hover, semoga berkenan di hati pembacaku :x :p
Resource: jsdo.it/platism/hentairibbon
Happy coding \m/