◄ Min  Size Fonts: + | - | ± Color: Max ►

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
img
#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/
Loading...
XMake Left Corner with Hover Bray Effect
Left Corner with Hover Bray Effect adalah membuat sesuatu berada di pojok, ketika di sorot akan terlihatlah konten yang tersembunyi
Subscribe my posts Register For Free!
[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE