Rekomendasi Kursus:
- Halaman sebelumnya Fungsi hsl() CSS
- Halaman berikutnya Fungsi hwb() CSS
- Kembali ke tingkat atas Referensi Fungsi CSS
Fungsi hue-rotate() CSS
Definisi dan penggunaan CSS hue-rotate()
Fungsi penyaringan meng aplikasikan putar warna bagi elemen.
Contoh
Contoh 1
Atur penataan warna yang berbeda untuk gambar:
#img1 { filter: hue-rotate(200deg); } #img2 { filter: hue-rotate(90deg); } #img3 { filter: hue-rotate(-90deg); }
Contoh 2
untuk hue-rotate()
dengan backdrop-filter
Gabungkan properti:
div.transbox { background-color: rgba(255, 255, 255, 0.4); -webkit-backdrop-filter: hue-rotate(90deg); backdrop-filter: hue-rotate(90deg); padding: 20px; margin: 30px; font-weight: bold; }
Syntaks CSS
hue-rotate(angle)
Nilai | Deskripsi |
---|---|
angle |
Opsional. Tentukan suatu sudut untuk menunjukkan perubahan relatif warna sampel masukan. Nilai positif akan menambah nilai warna, sementara nilai negatif akan mengurangi nilai warna. 0deg berarti gambar asli (tanpa efek). Nilai standar adalah 0. |
Detil Teknologi
Versi: | Modul Efek Penyaringan CSS Level 1 |
---|
Dukungan Browser
Angka di tabel menunjukkan versi browser yang mendukung penuh fungsi ini.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
18 | 12 | 35 | 6 | 15 |
Halaman yang berhubungan
Referensi:Atribut filter CSS
Referensi:Fungsi CSS blur()
Referensi:Fungsi CSS brightness()
Referensi:Fungsi CSS contrast()
Referensi:Fungsi CSS drop-shadow()
Referensi:Fungsi CSS grayscale()
Referensi:Fungsi CSS invert()
Referensi:Fungsi opacity() CSS
Referensi:Fungsi saturate() CSS
Referensi:Fungsi sepia() CSS
- Halaman sebelumnya Fungsi hsl() CSS
- Halaman berikutnya Fungsi hwb() CSS
- Kembali ke tingkat atas Referensi Fungsi CSS