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

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:screen-saverDalam 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
Loading...
XEyes Saver, Make Your Screen Cool
Eyes saver trik membuat layar monitor menjadi redup, adem di lihat dengan kode CSS
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