Title : Eyes Saver, Make Your Screen Cool
link : Eyes Saver, Make Your Screen Cool
Eyes Saver, Make Your Screen Cool
Pada dasarnya trik ini memiliki fungsi hampir sama dengan tutorial membuat screensaver untuk blog. Jika pada trickscreensavermempunyai 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:

.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;
}
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.
Bye :-h
<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>
DEMOBye :-h
Thus articles Eyes Saver, Make Your Screen Cool
that is all articles Eyes Saver, Make Your Screen Cool This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.
You now read the article Eyes Saver, Make Your Screen Cool with the link address https://autopostingblogspot.blogspot.com/2015/04/eyes-saver-make-your-screen-cool.html
0 Response to "Eyes Saver, Make Your Screen Cool"
Posting Komentar