screensavermempunyai 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;
}
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
Tidak ada komentar:
Posting Komentar