Hampir rumit atau belajar CSS3. Bagian 3. Cara mengatur warna dalam CSS. Tetapkan transparansi ke elemen dalam dokumen HTML

Halo, para pembaca yang terhormat dari situs remontcompa.ru! Nama saya Roman Nahvat dan saya sajikan kepada Anda bagian ketiga dari serangkaian artikel tentang bahasa gaya CSS. Di bagian pertama dan kedua, kami mencari cara untuk menambahkan gaya ke halaman web, mempelajari konsep pemilih CSS dan tipenya. Dimulai dengan bagian ini, kita akan mulai mempelajari sifat-sifat bahasa CSS yang berlaku untuk berbagai elemen halaman HTML: teks, tabel, daftar, formulir, dan sebagainya. Khususnya, dalam artikel ini, kita akan melihat cara untuk mengatur warna dan transparansi elemen pada halaman web menggunakan properti warna, warna latar, dan opacity..

Hampir rumit atau belajar CSS3. Bagian 3. Cara mengatur warna dalam CSS. Tetapkan transparansi ke elemen dalam dokumen HTML

Buat struktur dokumen HTML berikut seperti yang ditunjukkan di bawah ini.

Simpan dokumen ini sebagai color.html pada flash drive di folder CSS

Kami juga akan membuat dan menyimpan pada flash drive di folder CSS file styles.css

Tambahkan beberapa paragraf ke halaman web color.html (tag

...

dengan teks apa pun (dalam kasus kami, 4 paragraf)

Kami mendapatkan jenis halaman web berikut

Untuk setiap paragraf, tulis nama kelas (class1, class2, class3 dan class4) seperti yang ditunjukkan di bawah ini

Properti warna CSS memungkinkan Anda menentukan warna teks di dalam elemen dalam dokumen HTML. Setelah properti warna, nilainya ditunjukkan, yang dapat ditulis dengan berbagai cara

Anda dapat mengatur warna apa pun dalam CSS dengan cara berikut: Menggunakan nama warna bahasa Inggris. Melalui kode heksadesimal yang menentukan jumlah merah, biru, dan hijau. Kode ini ditulis setelah nilai tanda # RGB, yang mengekspresikan warna dalam proporsi merah, biru dan hijau sesuai dengan model RGB. Nilai RGBA masih merupakan nilai RGB yang sama, di mana parameter keempat, yang disebut saluran alpha, ditambahkan, yang mengambil nilai dari 0,0 (transparansi) menjadi 1,0 (opacity) dan memungkinkan Anda untuk menentukan tingkat opacity elemen. Nilai HSL yang ditambahkan dalam CSS3 sebagai cara alternatif untuk menentukan warna. Nilai ini dimulai dengan huruf hsl, diikuti oleh parameter dalam tanda kurung yang mengekspresikan rona, saturasi dan kecerahan warna. Nilai HSLA adalah nilai HSL yang sama yang, seperti dalam kasus nilai RGBA, yang disebut saluran alpha ditambahkan sebagai parameter keempat, mengambil nilai dalam kisaran dari 0,0 hingga 1,0

Di situs https://colorscheme.ru/ names, kode heksadesimal, nilai RGB warna HTML disajikan dalam bentuk yang nyaman

Juga di situs https://colorscheme.ru/ disajikan konverter warna universal, yang akan kita gunakan di masa depan. Konverter ini memungkinkan Anda untuk mengubah warna dari satu model warna ke yang lain, misalnya dari RGB ke HSL, mengubah kode warna heksadesimal menjadi nilai RGB, dan sebagainya..

Setel teks menjadi biru untuk paragraf pertama (kami menetapkan kelas yang disebut class1 ke paragraf ini)

Dalam file style color.css, setelah properti warna, tentukan nama warna (biru) sebagai nilainya

Seperti yang Anda lihat, teks paragraf pertama telah berubah warna menjadi biru (biru)

Ubah warna teks paragraf kedua (kelas2) menjadi darkorchid

Sebagai nilai untuk properti warna, tulis warna darkorchid sebagai kode hex, yaitu # 9932cc

Seperti yang Anda lihat, warna teks paragraf kedua telah berubah menjadi darkorchid (# 9932cc)

Ubah warna teks paragraf ketiga (class3) menjadi fuchsia warna (magenta), yang mengindikasikannya sebagai nilai RGB setelah properti warna. Anda akan melihat bahwa warna fuchsia dan magenta pada dasarnya identik dan memiliki kode heksadesimal yang sama (# ff00ff) dan nilai RGB (255.0.255)

Kami menulis setelah properti warna RGB nilai warna fuchsia (magenta) sebagai berikut: color: rgb (255.0.255)

Warna teks paragraf ketiga telah berubah menjadi fuchsia (magenta)

Ubah warna teks paragraf keempat (class4) menggunakan nilai HSL. Seperti disebutkan di atas, nilai HSL ditentukan oleh tiga parameter: rona, saturasi, dan cahaya

Kami mempertimbangkan masing-masing parameter ini secara terpisah. Untuk menunjukkan rona, Anda harus menentukan sudut rotasi (dari 0 ° hingga 360 °) pada roda warna, seperti yang ditunjukkan pada gambar di bawah ini. Sebagai contoh, hijau berhubungan dengan sudut rotasi 120 °, dan biru ke sudut rotasi 270 °

Parameter saturasi menentukan saturasi rona yang dipilih. Saturasi dalam model warna HSL diindikasikan sebagai persentase dalam kisaran dari 0% hingga 100%. Semakin dekat nilai parameter ini ke 100%, warnanya terlihat lebih bersih, dan jika saturasi cenderung 0%, maka warnanya menjadi pudar. Parameter lightness menentukan kecerahan warna dan, seperti parameter saturasi, ditentukan sebagai persentase dalam kisaran dari 0% hingga 100%. Semakin tinggi nilai parameter ini, semakin cerah warnanya. Ubah warna teks paragraf keempat ke lawngreen

Karena kami ingin menentukan nilai HSL sebagai nilai untuk properti warna, kami perlu mengubah warna lawngreen (# 7CFC00 atau 124.252.0) ke model warna HSL. Untuk melakukan ini, gunakan konverter warna online di https://colorscheme.ru/color-converter.html. Misalnya, dalam garis model warna, tentukan nilai warna lawngreen, misalnya RGB, yaitu 124.252.0, dan sedikit lebih rendah kita dapat melihat hasil konversi ke HSL (hsl (90.100%, 49%))

Setelah properti warna, tentukan nilai hsl (90.100%, 49%)

Seperti yang Anda lihat, warna teks paragraf keempat telah berubah menjadi lawngreen

Pertimbangkan properti CSS lain sebagai warna latar. Properti background-color mengatur warna latar belakang elemen dalam dokumen HTML. Anda dapat mengatur nilai untuk properti warna latar belakang dengan cara yang sama seperti yang kami pertimbangkan untuk menentukan warna teks: menggunakan nama warna bahasa Inggris, kode warna heksadesimal, nilai RGB dan nilai HSL. Mengubah warna latar belakang untuk empat paragraf menggunakan properti warna latar dengan cara berbeda untuk menentukan warna. . Untuk paragraf pertama, atur warna latar belakang menggunakan nama warna bahasa Inggris, misalnya darkgray. Dalam stylesheet, tulis warna latar: darkgray

Warna latar belakang paragraf pertama telah berubah menjadi darkgray

Ubah warna teks paragraf kedua menjadi aqua (cyan)

Atur kode warna heksadesimal aqua (cyan) sebagai nilai untuk properti warna latar belakang

Kami mendapatkan yang berikut ini

Untuk paragraf ketiga, atur warna latar belakang menjadi hijau di bawah menggunakan nilai RGB (173.255,47)

Dalam file gaya color.css, tentukan warna latar belakang: rgb (173.255,47)

Atur paragraf keempat ke warna latar belakang hitam menggunakan nilai hsl

Dalam file gaya color.css, kami menentukan properti warna latar belakang dengan nilai hsl (0,0%, 0%)

Sebagai hasilnya, kami mendapatkan yang berikut ini

Di CSS3, ada beberapa cara untuk mengatur transparansi elemen dalam dokumen HTML:

Properti opacity yang memungkinkan Anda menentukan tingkat transparansi elemen dan anak-anaknya. Properti opacity menerima nilai dalam kisaran dari 0,0 (sepenuhnya transparan) hingga 1,0 (buram) Menggunakan model warna RGBA, yang memungkinkan Anda untuk mengatur warna dengan cara yang sama seperti RGB. Tidak seperti RGB, RGBA memiliki parameter keempat, yang disebut saluran alpha, yang memungkinkan Anda menentukan tingkat transparansi elemen. Parameter ini menerima nilai dalam kisaran 0,0 hingga 1,0. Model warna HSLA, yang memungkinkan mengekspresikan warna dalam hal rona, saturasi dan cahaya, dan dengan cara yang sama seperti model warna RGBA, menambahkan nilai transparansi sebagai parameter keempat, yang disebut saluran alpha. Parameter ini, seperti dalam kasus RGBA, dapat mengambil nilai dari 0,0 hingga 1,0. Pertimbangkan semua metode untuk mengatur transparansi (menggunakan teks sebagai contoh) menggunakan contoh-contoh spesifik. Dalam file color.css, hapus semua properti warna latar belakang

Setelah properti opacity, nilainya ditunjukkan, yang dapat berada dalam kisaran 0,0 hingga 1,0. Semakin dekat nilai properti ini ke 1, semakin tinggi opacity elemen

Tetapkan nilai berikut untuk properti opacity di setiap paragraf: Untuk paragraf pertama (diberikan kelas dengan nama class1), tentukan angka 0,2 sebagai nilai untuk properti opacity. Untuk paragraf kedua (tetapkan kelas dengan nama class2), tentukan nilai 0,3 untuk properti opacity. paragraf (menugaskan kelas dengan nama class3) sebagai nilai untuk properti opacity, tentukan angka 0.4. Untuk paragraf keempat (ditugaskan kelas dengan nama class4) sebagai nilai untuk properti opacity, tentukan angka 1.0

Akibatnya, kita melihat bahwa teks dari tiga paragraf pertama (yang properti opacity dengan nilai masing-masing 0,2, 0,3, dan 0,4) diterapkan lebih transparan daripada teks paragraf keempat (properti opacity dengan nilai 1,0)

Hapus properti warna dan opacity dari file color.css dan atur transparansi untuk teks paragraf menggunakan fungsi hsla

Dalam fungsi hsla, transparansi diatur, seperti yang disebutkan di atas, menggunakan parameter yang disebut saluran alpha (alpha), yang mengambil nilai dari 0,0 hingga 1,0.

Dalam file color.css untuk setiap paragraf, kami menulis nilai-nilai fungsi hsla:

Akibatnya, kami mendapatkan hasil yang sama dengan menggunakan properti opacity.

Atur transparansi teks dalam paragraf menggunakan fungsi rgba, di mana parameter keempat (alpha) bertanggung jawab atas tingkat transparansi dan mengambil nilai dari 0,0 hingga 1,0.

Kami mendapatkan hasil yang sama seperti dalam kasus fungsi hsla dan properti opacity

Lanjutan dalam artikel: Hampir rumit atau belajar CSS3. Bagian 4. 1. Font dalam dokumen HTML. Properti font-family dan @ font-face