Properti Filter Style DOM HTML dan Fungsinya
Pada artikel ini akan dijelaskan cara menggunakan properti filter style DOM pada HTML beserta penjelasan fungsi-fungsinya.
Sebelum memahami lebih dalam materi tentang Properti Filter Style DOM HTML dan Fungsinya, terlebih dahulu pelajari materi tentang: Mengatur Sel Kosong HTML Menggunakan emptyCells Style DOM, Properti Display Style DOM HTML dan Fungsinya, dan Mengatur Arah HTML Menggunakan Direction Style DOM.
Sintak:
- Mengembalikan nilai properti filter: object.style.filter
- Mengatur nilai properti filter: object.style.filter = "none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()"
- none: Mengatur nilai efek ke none.
- blur: Mengatur nilai efek ke blur.
- brightness(%): Mengatur nilai kecerahan.
- contrast(%): Mengatur nilai kontras gambar.
- drop-shadow: Mengatur nilai efek bayangan yang jatuh ke gambar.
- h-shadow: Mengatur nilai horizontal bayangan.
- v-shadow: Mengatur nilai vertikal bayangan.
- blur: Mengatur nilai efek blur dalam satuan piksel.
- spread: Mengatur gambar untuk membesar atau meluas.
- color: Menambahkan nilai warna ke bayangan.
- grayscale(%): Mengatur gambar ke grayscale.
- hue-rotate(deg): Mengatur nilai rotasi hue pada gambar.
- invert(%): Melakukan invert pada gambar.
- opacity(%): Mengatur nilai level opacity pada gambar.
- saturate(%): Mengatur nilai saturasi gambar.
- sepia(%): Mengatur gambar untuk memiliki efek sepia.
Return Value: Berfungsi untuk mengembalikan nilai gambar dengan penambahan efek visual.
Contoh: Mengatur nilai properti filter ke Grayscale.
Contoh: Mengatur nilai properti filter ke Opacity.
Contoh: Mengatur nilai properti filter ke invert.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style filter DOM HTML
</title>
<style>
h1
{
color: green;
}
</style>
</head>
<body>
<center>
<h1>
Blog Elfan
</h1>
<button
onclick="img()">
Press
</button>
<h4>
Klik tombol 'Press' untuk
mengatur filter properti ke
grayscale.
</h4>
<img
id="MNN1"
src=
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyizkhCmvzS6vbSN5BKe5vmhs_cFakFxB8u_E3U3_OXNRz-QJy4CemqcTyPrvzfOofiws4FHtSerLDrlYP6ygRUH4rpC3dtrozkB9Dz-_5cQIuYGT3KaiF4YRD8zcz2u92zmlOZRMfNlVBTylRfL-TMTFlvrd5wCxJvm3FXsIulLr40WStkBfdMO3d/s800/blogmapel.webp"
alt="Mountain View"
width="300"
height="250">
<script>
function img()
{
document.getElementById(
"MNN1").style.filter = "grayscale(100%)";
}
</script>
</center>
</body>
</html>
Output:
Blog Elfan
Klik tombol 'Press' untuk mengatur filter properti ke grayscale.
Contoh: Mengatur nilai properti filter ke Opacity.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style filter DOM HTML
</title>
<style>
h1
{
color: green;
}
</style>
</head>
<body>
<center>
<h1>
Blog Elfan
</h1>
<button
onclick="img()">
Press
</button>
<h4>
Klik tombol 'Press' untuk
mengatur filter properti ke
Opacity.
</h4>
<img
id="MKN2"
src=
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyizkhCmvzS6vbSN5BKe5vmhs_cFakFxB8u_E3U3_OXNRz-QJy4CemqcTyPrvzfOofiws4FHtSerLDrlYP6ygRUH4rpC3dtrozkB9Dz-_5cQIuYGT3KaiF4YRD8zcz2u92zmlOZRMfNlVBTylRfL-TMTFlvrd5wCxJvm3FXsIulLr40WStkBfdMO3d/s800/blogmapel.webp"
alt="Mountain View"
width="300"
height="250">
<script>
function img()
{
document.getElementById(
"MKN2").style.filter = "opacity(50%)";
}
</script>
</center>
</body>
</html>
Output:
Blog Elfan
Klik tombol 'Press' untuk mengatur filter properti ke Opacity.
Contoh: Mengatur nilai properti filter ke invert.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style filter DOM HTML
</title>
<style>
h1
{
color: green;
}
</style>
</head>
<body>
<center>
<h1>
Blog Elfan
</h1>
<button
onclick="img()">
Press
</button>
<h4>
Klik tombol 'Press' untuk
mengubah filter properti ke
invert.
</h4>
<img
id="mdn3"
src=
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyizkhCmvzS6vbSN5BKe5vmhs_cFakFxB8u_E3U3_OXNRz-QJy4CemqcTyPrvzfOofiws4FHtSerLDrlYP6ygRUH4rpC3dtrozkB9Dz-_5cQIuYGT3KaiF4YRD8zcz2u92zmlOZRMfNlVBTylRfL-TMTFlvrd5wCxJvm3FXsIulLr40WStkBfdMO3d/s800/blogmapel.webp"
alt="Mountain View"
width="300"
height="250">
<script>
function img()
{
document.getElementById(
"mdn3").style.filter = "invert(100%)";
}
</script>
</center>
</body>
</html>
Output:Blog Elfan
Klik tombol 'Press' untuk mengubah filter properti ke invert.
Baca Juga:
Properti filter pada gaya elemen HTML adalah salah satu fitur yang sangat berguna untuk memodifikasi tampilan visual suatu elemen dengan berbagai macam efek. Filter ini memungkinkan untuk melakukan berbagai perubahan visual pada elemen-elemen tertentu tanpa mengubah strukturnya secara mendasar. Filter ini bisa diterapkan pada elemen gambar, teks, atau blok konten dalam sebuah halaman, memberikan fleksibilitas untuk menciptakan efek visual yang menarik dan kreatif.
Salah satu penggunaan filter yang umum adalah untuk menambahkan efek blur pada elemen tertentu. Efek ini sering digunakan dalam desain modern untuk menonjolkan konten atau memberikan kontras visual yang halus antara latar belakang dan elemen utama. Efek blur dapat diatur tingkat intensitasnya, mulai dari tingkat yang sangat rendah hingga sangat tinggi, tergantung pada kebutuhan desain. Dengan menggunakan filter ini, tampilan halaman dapat dibuat lebih dinamis dan menarik tanpa perlu mengedit gambar secara langsung.
Selain efek blur, filter juga memungkinkan untuk menerapkan efek kecerahan pada elemen. Efek kecerahan dapat digunakan untuk mengatur seberapa terang atau gelap elemen tersebut. Ini sangat berguna ketika ingin menyesuaikan tampilan elemen dengan latar belakang atau elemen lain dalam desain. Tingkat kecerahan yang lebih tinggi bisa membuat elemen terlihat lebih hidup, sementara tingkat kecerahan yang lebih rendah bisa memberikan nuansa yang lebih tenang atau elegan.
Kontras juga merupakan salah satu efek yang dapat diterapkan menggunakan properti filter. Dengan menggunakan efek ini, perbedaan antara area terang dan gelap dalam suatu elemen bisa diperkuat, sehingga menghasilkan tampilan yang lebih dramatis. Efek kontras sering digunakan dalam fotografi atau elemen gambar untuk menonjolkan detail tertentu. Pengaturan kontras yang tepat dapat membuat gambar atau elemen lain terlihat lebih jelas dan menonjol dibandingkan elemen lain dalam halaman.
Saturasi warna adalah efek lain yang dapat diterapkan menggunakan filter. Dengan meningkatkan atau mengurangi saturasi warna, elemen-elemen visual dapat disesuaikan untuk memberikan tampilan yang lebih cerah atau lebih pucat. Ini berguna ketika ingin menyesuaikan palet warna keseluruhan dari halaman atau mengatur suasana visual tertentu. Misalnya, menurunkan saturasi dapat memberikan tampilan yang lebih lembut dan tenang, sementara meningkatkan saturasi bisa menghasilkan warna yang lebih mencolok dan energik.
Filter juga memungkinkan untuk menerapkan efek inversi warna. Efek ini sering digunakan untuk menciptakan tampilan yang unik atau futuristik, dimana warna-warna dalam elemen dibalik. Efek inversi warna bisa menghasilkan kombinasi warna yang kontras dan menarik, terutama ketika digunakan dalam desain yang memerlukan elemen visual yang mencolok. Meskipun efek ini jarang digunakan dalam desain tradisional, filter ini memberikan fleksibilitas dalam menciptakan gaya yang unik.
Efek gradasi abu-abu juga bisa diterapkan dengan filter. Filter ini akan mengubah elemen menjadi tampilan hitam-putih atau gradasi abu-abu, menghilangkan semua warna dari elemen tersebut. Efek ini sering digunakan dalam desain klasik atau minimalis, dimana warna tidak menjadi elemen penting dalam penyampaian pesan visual. Tampilan gradasi abu-abu memberikan nuansa yang lebih sederhana dan elegan, serta sering digunakan dalam fotografi hitam-putih atau desain dengan konsep retro.
Efek opacity juga bisa disesuaikan menggunakan properti filter. Dengan mengurangi tingkat opacity, elemen bisa dibuat lebih transparan, sehingga memberikan kesan lapisan yang halus antara elemen-elemen yang ada di halaman. Penggunaan opacity sering dipadukan dengan efek lain seperti blur atau kecerahan untuk menciptakan desain yang lebih dinamis dan interaktif. Elemen dengan opacity yang lebih rendah biasanya digunakan untuk menciptakan latar belakang yang tidak terlalu mencolok atau untuk menunjukkan elemen-elemen yang bersifat sementara.
Salah satu fitur menarik lainnya adalah kemampuan untuk menggabungkan beberapa filter sekaligus. Ini berarti beberapa efek bisa diterapkan pada elemen yang sama, seperti menambahkan blur, kecerahan, dan saturasi warna pada satu elemen. Kombinasi ini memberikan kebebasan yang lebih besar dalam menciptakan desain yang kompleks dan artistik. Misalnya, sebuah gambar bisa dibuat lebih menarik dengan menerapkan sedikit blur, meningkatkan kecerahan, dan menurunkan saturasi warna, sehingga menghasilkan efek visual yang lebih halus namun tetap menarik.
Pada dasarnya, filter pada gaya elemen memberikan kontrol penuh terhadap tampilan visual dari elemen-elemen di halaman. Dengan penggunaan yang tepat, efek filter bisa meningkatkan kualitas visual dari halaman web tanpa memerlukan perubahan pada elemen-elemen dasar atau memodifikasi gambar asli. Kemampuan untuk menyesuaikan berbagai aspek visual dari elemen dengan filter ini membuka banyak kemungkinan dalam menciptakan desain web yang kreatif, responsif, dan estetis.
Pentingnya properti ini terletak pada fleksibilitas dan kemudahan penggunaannya. Tidak hanya bisa digunakan untuk elemen gambar, tetapi juga bisa diterapkan pada teks, video, dan elemen interaktif lainnya. Filter memberikan kontrol langsung pada tampilan elemen-elemen tersebut, menjadikannya alat yang penting dalam dunia desain web modern. Dengan kemampuannya untuk mengubah visual tanpa mengubah struktur elemen, filter membantu desainer dalam menciptakan tampilan yang menarik dan responsif pada berbagai perangkat.
Fungsi utama dari filter adalah mempermudah penerapan efek visual yang dinamis pada halaman web tanpa harus menggunakan perangkat lunak pengolah gambar atau membuat elemen-elemen khusus. Ini tidak hanya menghemat waktu tetapi juga memungkinkan pengembang web untuk bereksperimen dengan berbagai gaya visual tanpa harus khawatir tentang kinerja halaman. Filter memungkinkan efek-efek visual diterapkan secara langsung pada elemen-elemen halaman, sehingga menciptakan pengalaman pengguna yang lebih kaya dan interaktif.
Dengan segala fitur dan kelebihannya, properti filter pada elemen HTML merupakan salah satu alat yang sangat berguna dalam desain web modern. Kemampuannya untuk memodifikasi elemen secara visual tanpa mengubah struktur dasarnya memberikan desainer kebebasan kreatif yang lebih besar. Filter dapat digunakan untuk berbagai tujuan, mulai dari menciptakan efek visual yang halus hingga menghasilkan tampilan yang mencolok dan artistik. Dengan demikian, filter menjadi salah satu properti yang sangat penting untuk dikuasai dalam desain halaman web modern.
Penggunaan properti filter juga memungkinkan integrasi yang baik dengan animasi. Efek filter dapat diterapkan secara bertahap untuk menciptakan transisi yang menarik. Sebagai contoh, efek blur yang perlahan-lahan menghilang dapat memberikan kesan fokus bertahap pada elemen tertentu. Begitu pula dengan efek kecerahan atau saturasi yang berubah secara dinamis, dapat menciptakan interaksi visual yang lebih hidup dan atraktif. Kemampuan ini sangat berguna dalam meningkatkan pengalaman pengguna, terutama pada situs web yang mengutamakan daya tarik estetika dan interaktivitas.
Dalam penerapan praktisnya, filter juga sering digunakan untuk menyoroti elemen tertentu. Misalnya, dalam sebuah galeri gambar, efek gradasi abu-abu dapat diterapkan pada gambar-gambar yang sedang tidak dipilih, sementara gambar yang sedang dipilih tetap berwarna. Teknik ini membantu pengguna untuk fokus pada elemen yang relevan, sambil tetap memberikan konteks visual dari elemen-elemen lainnya. Hal ini membuktikan bahwa filter bukan hanya alat dekoratif, tetapi juga memiliki peran penting dalam meningkatkan kegunaan suatu halaman web.
Filter juga sering dimanfaatkan untuk menciptakan ilusi kedalaman. Dengan menggabungkan efek blur dan opacity pada elemen-elemen tertentu, sebuah tampilan dapat dirancang untuk memberikan kesan tiga dimensi. Teknik ini biasanya digunakan pada latar belakang atau elemen sekunder dalam desain, memberikan kesan bahwa elemen-elemen utama berada di depan dan lebih menonjol. Pendekatan semacam ini memberikan estetika yang lebih kaya dan menarik, terutama pada situs web modern yang menampilkan desain multi-layered.
Selain efek visual yang langsung terlihat, filter juga memiliki manfaat dalam hal optimalisasi. Dengan menerapkan efek visual secara langsung pada elemen-elemen dalam halaman, kebutuhan untuk menggunakan gambar-gambar khusus yang sudah diedit dapat diminimalkan. Hal ini berarti ukuran total halaman dapat dikurangi, sehingga meningkatkan kecepatan pemuatan dan efisiensi. Properti ini sangat bermanfaat dalam lingkungan web yang membutuhkan kinerja optimal, terutama pada perangkat dengan koneksi internet yang lebih lambat atau spesifikasi perangkat keras yang terbatas.
Keunggulan lain dari filter adalah kemampuannya untuk menyesuaikan tampilan berdasarkan konteks. Sebagai contoh, pada situs yang memiliki mode terang dan gelap, filter dapat digunakan untuk mengubah tingkat kecerahan atau saturasi elemen-elemen tertentu secara dinamis. Hal ini memungkinkan pengalaman pengguna yang konsisten dan nyaman, tanpa perlu membuat dua versi elemen yang terpisah untuk setiap mode. Fleksibilitas ini menjadikan filter alat yang sangat relevan dalam tren desain responsif saat ini.
Meskipun properti ini memiliki banyak keunggulan, penggunaannya juga memerlukan perencanaan yang matang. Penggunaan efek yang berlebihan atau tidak sesuai dapat mengurangi kenyamanan pengguna dalam mengakses halaman. Sebagai contoh, efek blur yang terlalu intens atau perubahan warna yang mendadak dapat membuat tampilan menjadi kurang jelas atau bahkan membingungkan. Oleh karena itu, penting untuk memastikan bahwa setiap penggunaan filter mendukung tujuan desain dan memberikan nilai tambah bagi pengalaman pengguna.
Dalam pengembangan web yang melibatkan tim, properti filter juga dapat membantu menyederhanakan proses kolaborasi. Dengan menerapkan efek langsung pada elemen melalui kode, pengembang dan desainer dapat bekerja lebih sinkron. Desainer dapat fokus pada aspek visual, sementara pengembang dapat memastikan bahwa efek tersebut diimplementasikan dengan efisien. Pendekatan ini mengurangi kebutuhan untuk menggunakan alat pengeditan gambar eksternal, sehingga mempercepat proses pengembangan dan meminimalkan potensi kesalahan.
Sebagai kesimpulan, properti filter pada gaya elemen HTML adalah alat yang sangat penting dalam desain web modern. Dengan kemampuannya untuk menerapkan berbagai efek visual langsung pada elemen, filter memberikan fleksibilitas yang luar biasa dalam menciptakan tampilan yang menarik, interaktif, dan responsif. Properti ini tidak hanya mendukung aspek estetika, tetapi juga berkontribusi pada optimalisasi kinerja dan efisiensi proses pengembangan. Dengan penggunaan yang tepat, filter dapat meningkatkan kualitas visual halaman web, menciptakan pengalaman yang lebih menarik, dan memenuhi kebutuhan desain yang terus berkembang.
Referensi Tambahan:
- 3 Value Properti flexGrow Style DOM pada HTML
- 3 Value Properti flexShrink Style DOM pada HTML
- 5 Value Properti flexWrap Style DOM pada HTML
- 5 Value Properti cssFloat Style DOM pada HTML
- 6 Value Properti Font Style DOM pada HTML
- 3 Value Properti fontFamily Style DOM pada HTML
- 13 Value fontSize Style DOM pada HTML
Artikel ini akan dibaca oleh: Risa Devi Anjaini, Riska Setiani, Risma Nur Mazida, Risna Kurniasari, dan Rizal Rafly Mardiansyah.
5 komentar untuk "Properti Filter Style DOM HTML dan Fungsinya"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti filter Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang biasa digunakan untuk mengaktifkan properti filter Style DOM pada HTML:
Hapus1. Google Chrome 53.0
2. Internet Explorer 13.0
3. Firefox 35.0
4. Opera 40.0
5. Safari 9.1
Apa yang dimaksud dengan filter style dom pada HTML?
BalasHapusProperti style filter DOM pada HTML digunakan untuk mendefinisikan efek visual pada suatu elemen.
HapusProperti style filter DOM pada HTML digunakan untuk menambahkan efek visual atau efek filter ke gambar yang terdapat pada dokumen html.
Hapus