Konten Light Box Dengan Tombol On Off

Konten Light Box Dengan Tombol On Off - Apa kabar sahabat semua.? yang pasti semoga sehat selalu dan terus semangat menulis konten artikel untuk menambah jumlah posting di blog Anda masing-masing. Bukan seperti saya yang sudah sekian lama terdiam tanpa ada kabar berita terbaru menghias blog sederhana ini seperti layaknya Konten Light Box Dengan Tombol On Off (Terkadang menyala, terkadang redup) tetapi lebih sering redup, hehe..!!.

Karena sebelumnya Box Tulisan Versi Google Chrome sudah pernah kita bahas, untuk mengawali bulan baru ditahun yang baru ini, admin SAHABAT BLOGGER 77 akan memberikan sedikit trik cara membuat konten informasi box yang bisa Anda nyalakan dan padamkan dengan tombol ON/OFF seperti ini:





DEMO SHOW

Next - Membuat Album Gambar Klik Zoom


Biasanya untuk membuat sebuah box pada tulisan cukup menambahkan border, maka konten sudah berbentuk box. Untuk Konten Light Box kali ini, semua rangka border saya rangkai dengan penggunaan box-shadow, lalu saya hubungkan dengan perintah power-light tombol on off agar konten box dapat Anda nyalakan dan padamkan jika tombol tersebut di KLIK. Untuk membuatnya, Anda cukup salin kode CSS dibawah ini, lalu tempatkan dimana Anda ingin menampilkannya. Kode lengkapnya seperti ini:

#power (display:none}
.lightbox {
  position: absolute;left: 50%;
  margin-left: -16rem;top: 5rem;
  transform-style: preserve-3d}

.ebook:hover .power-button {-webkit-animation: power 1s infinite}
.ebook *:before, .ebook *:after {position: absolute;content: ""}
.rotation {transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg)}
.sprite {position: absolute;}
.scrollbar {
  top: 0.5rem;left: 1rem;width: 1rem;height: 16.8rem;
  background: #63e6db;box-shadow: 0 0 1rem #63e6db;
  border-radius:15px}

.frame > .sprite {height: 1.2rem;width: 30rem;background: #4d4837;}
.frame .sprite:nth-child(1) {
  z-index: 9;left: 1.2rem;height: 2.5rem;width: 6.8rem;
  border-radius: 0 0.4rem 0.4rem 0;background: #3f3a2d;
  box-shadow: inset -0.1rem 0.1rem 0.1rem 0 #b9a68e,
              0 0.1rem 0.1rem 0 #111111}

.frame .sprite:nth-child(1):before {
  width: 2.4rem;height: 1.6rem;left: 3.8rem;top: 0.5rem;
  border-radius: 0.3rem;
  box-shadow: inset -0.1rem -0.1rem 0.1rem 0 #b9a68e,
              inset 0.1rem 0.1rem 0.1rem 0 #111111}

.frame .sprite:nth-child(1):after {
  width: 2rem;height: 1.2rem;left: 4rem;top: 0.7rem;
  border-radius: 0.3rem;
  box-shadow: inset -0.1rem -0.1rem 0.1rem 0 #111111,
              inset 0.1rem 0.1rem 0.1rem 0 #b9a68e}

.frame .sprite:nth-child(2) {
  z-index: 1;left: 7.4rem;top: 1.2rem;height: 1rem;
  width: 27.9rem;border-radius: 0 1rem 0 0;
  box-shadow: inset 0 0.1rem 0.1rem 0 #b9a68e,
              0 0.1rem 0.1rem 0 #4d4837}

.frame .sprite:nth-child(2):after {
  content: "";position: absolute;top: 0.8rem;width: 1rem;
  height: 0.3rem;background: #4d4837}

.frame .sprite:nth-child(3) {
  z-index: 2;left: 34.7rem;top: 2rem;
  height: 18.4rem;width: 0.6rem;
  box-shadow: -0.5rem 0 0 0 #4d4837, 0.1rem 0 0 0 #111111}

.frame .sprite:nth-child(4) {
  z-index: 1;left: 7.4rem;top: 20.3rem;height: 1rem;
  width: 27.9rem;border-radius: 0 0 1rem 0;
  box-shadow: inset 0 0 0.1rem 0 #4d4837,
              0.2rem 0.2rem 0.2rem 0 #111111}

.frame .sprite:nth-child(4):after {
  content: "";position: absolute;bottom: 0.8rem;
  width: 1rem;height: 0.3rem;background: #4d4837}

.frame .sprite:nth-child(5) {
  z-index: 9;left: 1.2rem;top: 20rem;
  height: 2.5rem;width: 6.8rem;
  border-radius: 0 0.4rem 0.4rem 0;
  box-shadow: inset -0.1rem 0 0.1rem 0 #b9a68e,
              0 0.2rem 0.1rem 0 #111111,
              0 -0.1rem 0.1rem 0 #111111}

.frame .sprite:nth-child(5):before {
  width: 2.4rem;height: 1.6rem;left: 3.8rem;
  top: 0.5rem;border-radius: 0.3rem;
  box-shadow: inset -0.1rem -0.1rem 0.1rem 0 #b9a68e,
              inset 0.1rem 0.1rem 0.1rem 0 #111111}

.frame .sprite:nth-child(5):after {
  width: 2rem;height: 1.2rem;left: 4rem;
  top: 0.7rem;border-radius: 0.3rem;
  box-shadow: inset -0.1rem -0.1rem 0.1rem 0 #111111,
              inset 0.1rem 0.1rem 0.1rem 0 #b9a68e}

.frame .sprite:nth-child(6) {
  z-index: 9;left: 1.2rem;top: 2.3rem;
  height: 18rem;width: 3.8rem;
  background: -webkit-linear-gradient(45deg, #4d4837 0%, #3f3a2d 100%);
  background: -moz-linear-gradient(45deg, #4d4837 0%, #3f3a2d 100%);
  background: linear-gradient(45deg, #4d4837 0%, #3f3a2d 100%)}

.frame .sprite:nth-child(7) {
  z-index: 9;left: 0;height: 22.5rem;
  width: 1.2rem;border-radius: 0.4rem 0 0 0.4rem;
  background: -webkit-linear-gradient(45deg, #4d4837 0%, #3f3a2d 50%);
  background: -moz-linear-gradient(45deg, #4d4837 0%, #3f3a2d 50%);
  background: linear-gradient(45deg, #4d4837 0%, #3f3a2d 50%);
  box-shadow: inset 0.1rem 0.1rem 0 0 #b9a68e, inset -0.1rem 0 0.6rem 0 #695e4f}

.decoration .power-button {
  z-index: 10;left: 0.2rem;top: 10rem;
  height: 1.4rem;width: 1.4rem;cursor: pointer;
  border-radius:50%;box-shadow:1px 2px 3px #111}

.decoration #power + .power-button {background: #bdbdbd}
.decoration #power:checked + .power-button {background: #7FFF00}
.decoration .screen {
  z-index: 0;top: 2.3rem;left: 4.5rem;width: 29.6rem;
  height: 18rem;padding: 1.4rem 1.4rem 1.4rem 4rem;
  box-sizing: border-box;border-radius: 0.5rem;
  color: #63e6db;text-shadow: 0 0 1rem #63e6db;
  background: linear-gradient(45deg, rgba(183, 173, 112, 0.04) 0%, rgba(34, 34, 34, 0.04) 35%, rgba(183, 173, 112, 0.05) 54%, rgba(34, 34, 34, 0.04) 79%, rgba(183, 173, 112, 0.07) 100%);
  box-shadow: 0 0 0 0.5rem #4d4837}

.decoration .screen * {opacity: 0;}
.decoration .screen p {
  position: relative;margin-bottom: 1.5em;
  line-height: 1.5em;font-size: 1.2rem}

.decoration .screen:after {
  top:0 !important;left: 0.5rem;width: 0.1rem;
  height: 18rem;background: #ddd}

.decoration #power:checked ~ .screen {
  box-shadow: inset 0 0 2rem 0.1rem #63e6db, 0 0 0 0.5rem #4d4837;}

.decoration #power:checked ~ .screen:after {background: #8ba18f}
.decoration #power:checked ~ .screen * {opacity: 1;transition: all 0.8s ease}
.decoration .handle {
  z-index: 9;top:4px;left: 2.4rem;
  height: 18rem;width: 1.8rem;
  background: -webkit-linear-gradient(left, #b9a68e 0%, #665c4e 50%, #665c4e 74%, #b9a68e 100%);
  background: -moz-linear-gradient(left, #b9a68e 0%, #665c4e 50%, #665c4e 74%, #b9a68e 100%);
  background: linear-gradient(left, #b9a68e 0%, #665c4e 50%, #665c4e 74%, #b9a68e 100%);
  border-radius: 0.3rem;
  box-shadow: 0.2rem 0.2rem 1rem 0 rgba(0, 0, 0, 0.4);
  border-bottom:2px solid red}

.decoration .logo {
  z-index: 9;top: 18.8rem;left: 1.4rem;height: 3.3rem;
  width: 3.3rem;border-radius:50%;
  background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcR7_bMaNB3HrL8rD35KV0zUiMhUU-WaXtgjiYbyWGGB2hZX5_YnFlfpDZ80r7uFEHeYMLtzgdKLnnLiZ2Ax0eURN9ERza5w3-fAbmf_zH4Zx_ogOwmHtmo52bvCgLVtnFEMP2ugIfN0U/s600/sb-77+logo.png');background-size: 100% auto}

Anda bisa berinovasi disana, dimana sepantasnya konten light box seperti ini akan Anda tempatkan, apakah untuk ditampilkan saat Anda akan membahas beberapa informasi penting dalam postingan atau sebagai smartlink info author box di blog. Anda cukup tuliskan konten apa yang akan Anda informasikan dengan HTML berikut:

<div class="lightbox">
   <div class="ebook rotation">
        <div class="frame">
             <div class="sprite"></div>
             <div class="sprite"></div>
             <div class="sprite"></div>
             <div class="sprite"></div>
             <div class="sprite"></div>
             <div class="sprite"></div>
             <div class="sprite"></div>
        </div>
                  <div class="decoration">
<input checked="true" id="power" type="checkbox" />
<label class="power-button sprite" for="power"></label>
<div class="handle sprite"></div>
<div class="logo sprite"></div>
                     <div class="screen sprite">
                           <div class="scrollbar sprite"></div>

              <div class="content">
                 <p>Tulis Konten Anda Disini...</p>
              </div>
                     </div><!..ending screen sprite..!>
                  </div><!..ending decoration..!>
   </div><!..ending ebook rotation..!>
</div><!..ending lightbox..!>