Periksa Selidiki Analisis

search
Night Mode

Read mode or Save mode with CSS

Mode baca pada saat membaca di malam hari atau saat lelah sangat membantu sekali. Keuntungan jika kita memanfaatkan mode ini adalah membuat mata tidak cepat lelah karena cahaya yang terang dapat membuat mata cepat lelah.

Mode ini cocok sekali dipasang diblog / website yang menampilkan artikel-artikel. Sehingga pembaca tidak cepat lelah. Selain memiliki fungsi yang mbah jelaskan diatas. Fungsi lain adalah untuk menghemat energi.

Kok bisa ?

Yah ! cahaya terang mengkonsumsi energi lebih banyak daripada cahaya gelap atau redup. Untuk itu fungsi ini bisa disebut juga save mode atau mode hemat energi.

Tapi mbah lebih suka menyebutnya Night mode atau mode malam, Hehehe... jauh dari judulnya ya ! harusnya Night mode with CSS. Mode malam sering digunakan pada malam hari, saat kondisi mau istirahat (hampir lelah) tapi tetap ingin menyempatkan untuk membaca. Nah mode ini cocok karena jadi lebih nyaman saat membaca. Untuk itu mbah mau bagikan cara pasang di blog / website cucu.

Caranya hampir sama dengan posting sebelumnya Membuat efek Blur dengan CSS

Copy paste CSS dibawah ini :


/* Night mode by.MBahas.com */

#nigmod {
position: relative;
top: 0px;
z-index: 9999;
}

input[type=checkbox] + .nig {
-moz-filter: invert(.0);
-webkit-filter: invert(.0);
-o-filter: invert(.0);
filter: invert(.0);
background:transparent;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
} 

input[type=checkbox]:checked + .nig {
-moz-filter: invert(.8);
-webkit-filter: invert(.8);
-o-filter: invert(.8);
filter: invert(.8);
background:rgba(0, 0, 0, 0) linear-gradient(to top, #999 0%, #999 100%) repeat scroll 0 0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}


Selanjutnya tempatkan kode HTML dibawah ini sesuai keinginan. Karena mode ini ditujukan hanya untuk membaca, menempatkan diarea konten posting mungkin lebih tepat.


<input id='nigmod' name='nigmod' title='night mode' type='checkbox'/>
<div class='nig'>

- Konten -

</div>


Demo ada dibagian atas sebelah menu MBahas.com (jika belum diubah)

Sebenarnya cara diatas hanya memanfaatkan filter pada CSS dan mungkin masih ada kekurangannya yaitu gambar jadi ikut terfilter & background awal harus terang. Maka dari itu mbah menggunakan checkbox untuk mengaktifkan atau sebaliknya.

Selamat mencoba & berinovasi

UPDATE

Update ini sesuai yang dijelaskan dihalaman berikut

Baca sekarang

Ganti kode CSS diatas dengan kode CSS dibawah ini. Dengan ketajaman gambar di filter, agar tetap nyaman untuk night mode.


/* Night mode by.MBahas.com */

#nigmod {
position: relative;
top: 0px;
z-index: 9999;
}

input[type=checkbox] + .nig {
-moz-filter: invert(.0);
-webkit-filter: invert(.0);
-o-filter: invert(.0);
filter: invert(.0);
background:transparent;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
} 

input[type=checkbox] + .ori .nig .nofil {
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}

input[type=checkbox]:checked + .ori .nig {
-moz-filter: invert(.8);
-webkit-filter: invert(.8);
-o-filter: invert(.8);
filter: invert(.8);
background:rgba(0, 0, 0, 0) linear-gradient(to top, #999 0%, #999 100%) repeat scroll 0 0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}

input[type=checkbox]:checked + .ori .nig .nofil {
-moz-filter: invert(1);
-webkit-filter: invert(1);
-o-filter: invert(1);
filter: invert(1);
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}


Atau ganti dengan kode CSS di bawah ini dengan warna original.


/* Night mode by.MBahas.com */

#nigmod {
position: relative;
top: 0px;
z-index: 9999;
}

input[type=checkbox] + .nig {
-moz-filter: invert(.0);
-webkit-filter: invert(.0);
-o-filter: invert(.0);
filter: invert(.0);
background:transparent;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
} 

input[type=checkbox] + .ori .nig .nofil {
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}

input[type=checkbox]:checked + .ori {
-moz-filter: contrast(170%);
-webkit-filter: contrast(170%);
-o-filter: contrast(170%);
filter: contrast(170%);
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}

input[type=checkbox]:checked + .ori .nig {
-moz-filter: invert(.8);
-webkit-filter: invert(.8);
-o-filter: invert(.8);
filter: invert(.8);
background:rgba(0, 0, 0, 0) linear-gradient(to top, #999 0%, #999 100%) repeat scroll 0 0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}

input[type=checkbox]:checked + .ori .nig .nofil {
-moz-filter: invert(1);
-webkit-filter: invert(1);
-o-filter: invert(1);
filter: invert(1);
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}


Setelah Pilih salah satu kode CSS diatas, kemudian ganti juga kode HTML diatas seperti dibawah ini


<input id='nigmod' name='nigmod' title='night mode' type='checkbox'/>

<div class='ori'>
<div class='nig'>

- Konten -
<div class='nofil'>
- Konten Yang tidak di filter (gambar atau Video) -
</div>

</div>
</div>


Semoga Berhasil...

- Update 27 Februari 2017 -
+ kode CSS & HTML baru +