CSS

Mengatur Kecerahan Gambar Dengan CSS

Bagaimana Cara Mengatur Kecerahan Gambar Dengan CSS

Semakin berkembangnya teknologi informasi, membuat teknologi pada bidang pemrograman berkembang pesat. Kini CSS memiliki banyak pembaharuan dan turunannya yang mempermudah para developer lebih mudah menggunakannya. Apalagi sudah tersedianya berbagai CSS Framework seperti Bootstrap dan Tailwind CSS. Dalam pembuatan layout sebuah website, gambar atau foto adalah salah satu bagian penting dari desain suatu halaman website.

Pada kondisi tertentu Anda ingin meletakkan atau menimpa teks diatas sebuah gambar, misal pada sebuah gambar Anda ingin menimpa nya dengan sebuah teks keterangan. Ada kalanya saat Anda ingin menggunakan teks berwarna cerah seperti putih, namun gambar yang Anda ingin timpa juga berwarna cerah. Misalnya, gambar background awan atau langit Anda timpa dengan teks berwarna putih. Jelas saja teks yang Anda timpa pada gambar tidak terlihat jelas. Sebagai contoh lihatlah gambar berikut ini.

a5b42493 79d6 4de5 8015 3398891e106a
Gambar yang Di Timpa Teks

Bisakah Anda membaca teks pada gambar diatas dengan jelas? cukup sulit bukan?. Pada saat ini Anda memerlukan cara untuk membuat teks dapat terlihat tanpa terpengaruh warna pada gambar. Anda dapat memainkan gelap terang dari sebuah gambar dengan CSS.

Mengatur Gelap Terang Pada Gambar Dengan CSS

Anda dapat menggunakan beberapa cara untuk mengubah gambar menjadi gelap, sebagai contoh kita menggunakan gambar berikut dan kita ubah menjadi sedikit lebih gelap.

original sakura
Gambar Original

Anda dapat menggunakan properti filter seperti brightness() dan contrast() pada CSS untuk membuat gambar sedikit lebih gelap.

Menggunakan Brightness

Menerapkan filter brightness pada sebuah gambar, membuatnya tampak lebih terang atau gelap. Jika Nilai yang dimasukkan 0%, hal itu akan membuat gambar benar benar hitam atau gelap. Sedangkan jika nilai 100%, hal itu tidak akan mengubah apa-apa. Anda dapat memasukkan nilai 50% agar gambar dapat berubah sedikit gelap. Anda juga dapat memasukkan nilai lebih dari 100%, dengan hasil gambar yang akan lebih cerah. Jika nilai dikosongkan atau tidak diberi nilai, maka nilai 100% yang akan otomatis digunakan.

CSS :

Hasil :

9e5862d4 0d48 4fa7 9f53 d242b0143415
Brightness 50%

Menggunakan Contrast

Dengan filter contrast, Anda dapat menyesuaikan nilai kontras. Sama halnya dengan brightness, Jika Nilai yang dimasukkan 0%, hal itu akan membuat gambar benar benar hitam atau gelap dan nilai 100% tidak akan mengubah apa-apa . Anda juga dapat memasukkan nilai lebih dari 100%, hal ini memberikan hasil dengan kontras yang lebih sedikit pada gambar.

CSS :

Hasil :

9b3d4862 1c75 4656 bd81 026da8728bde
Contrast 40%

Other Articles

TechnologyTips & TutorialWeb
jingling
CyberNewsInternetTechnologyTips & TutorialTOP NEWS
Kebocoran Data
0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x