Eyes Saver, Make Your Screen Cool

Pada dasarnya trik ini memiliki fungsi hampir sama dengan tutorial membuat screensaver untuk blog. Jika pada trick screensaver mempunyai tujuan yakni menyembunyikan konten dan digantikan dengan tampilan lain, kesempatan sekarang AA Beben akan mencoba bagaimana cara membuat Eyes Saver! Eyes-saver adalah secuil deretan kode CSS untuk menampilkan efek redup-redup (rgba) supaya ketika menemukan web/blog dengan tampilan warna yang kontras mata kita akan terbantu terlindungi dengan mengaktifkan fitur eyes saver :D
Ilustrasi on sekrin siut:

Dalam kasus ini, penanaman kode rgba(0,0,0,0.3); sebagai warna background akan membantu berfungsi sebagai filter kontras cahaya yg berlebihan (mencolok)! Singkat cerita, gue mau kasih tau bagaimana cara membuat layar monitor anda sekalian menjadi rgba(0,0,0,0.3) :))

.container_ {
transition: transform 0.5s;
backface-visibility: hidden;
}
.eyesSaver-Overlay {
display: none;
background: rgba(0,0,0,0.3);
}
.eyesSaver-Overlay,.eyesSaver-Overlay a {
position: fixed;
z-index: 99;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.button {
display: block;
float: right;
background: #fff;
padding: 5px 10px;
border-radius: 50%;
font-size: 1.3em;
transition: all 0.3s linear;
}
.button:before {
content: '\2600';
}
.button:hover {
box-shadow: 0 13px 25px 0 rgba(0,0,0,0.3);
}
nav:target ~ .container_ .eyesSaver-Overlay {
display: block;
}
.nav1 {
bottom: 5%;
right: 4%;
position: fixed;
}

Tempatkan syntax HTML di dalam tag <body> sebelum tag </body> template.

<nav id="slideLeft"></nav>

<div class="container_">     

  <div class="eyesSaver-Overlay"><a href="#"></a></div>

  <div class="nav1">

    <a href="#slideLeft" class="button"></a>

  </div>

</div>

DEMO
Bye :-h

Eyes Saver, Make Your Screen Cool

Eyes saver trik membuat layar monitor menjadi redup, adem di lihat dengan kode CSS

Eyes Saver, Make Your Screen Cool

KATEGORI