Vlad Merzhevich
Kecerunan dipanggil peralihan yang lancar dari satu warna ke warna yang lain, dan mungkin terdapat beberapa warna sendiri dan peralihan di antara mereka. Dengan bantuan kecerunan, kesan reka bentuk web yang paling pelik dicipta, contohnya, pseudo-tiga-dimensi, silau, latar belakang, dsb. Selain itu, dengan kecerunan, elemen kelihatan lebih menarik daripada monokromatik.
Tiada sifat berasingan untuk menambah kecerunan, kerana ia dianggap sebagai imej latar belakang, jadi ia ditambah melalui sifat imej latar belakang atau sifat latar belakang generik, seperti yang ditunjukkan dalam contoh 1.
Contoh 1: Kecerunan
Di sini simpulan bahasa lucah secara tradisinya memulakan imej prosaik, tetapi permainan bahasa tidak membawa kepada pemahaman dialog yang aktif.
Hasilnya contoh ini ditunjukkan dalam Rajah. 1.
nasi. 1. Kecerunan Linear untuk perenggan
Dalam sangat kes mudah dengan dua warna yang ditunjukkan dalam contoh 1, mula-mula tulis kedudukan dari mana kecerunan akan bermula, kemudian warna mula dan akhir.
Untuk merekodkan kedudukan, anda mula-mula menulis ke , dan kemudian menambah kata kunci atas , bawah dan kiri , kanan , serta gabungannya. Susunan perkataan tidak penting, anda boleh menulis ke kiri atas atau ke kiri atas . Dalam jadual 1 menunjukkan kedudukan berbeza dan jenis kecerunan yang diperoleh untuk warna #000 dan #fff, sebaliknya daripada hitam kepada putih.
| kedudukan | Penerangan | Lihat | |
|---|---|---|---|
| ke atas | 0deg | Bawah atas. | |
| ke kiri | 270deg | Dari kanan ke kiri. | |
| ke dasar | 180deg | Atas bawah. | |
| ke kanan | 90deg | Dari kiri ke kanan. | |
| ke kiri atas | Dari sudut kanan bawah ke kiri atas. | ||
| ke atas kanan | Dari kiri bawah ke kanan atas. | ||
| ke kiri bawah | Dari sudut kanan atas ke kiri bawah. | ||
| ke bawah kanan | Dari kiri atas ke kanan bawah. |
Daripada kata kunci, anda boleh menentukan cerun garis kecerunan, yang menunjukkan arah kecerunan. Pertama, nilai positif atau negatif sudut ditulis, kemudian deg ditambah kepadanya.
Sifar darjah (atau 360º) sepadan dengan kecerunan dari bawah ke atas, kemudian kira detik mengikut arah jam. Sudut cerun garis kecerunan ditunjukkan di bawah.
Untuk kiri atas dan nilai yang serupa, sudut kecondongan garisan kecerunan dikira berdasarkan dimensi elemen untuk menyambung dua titik sudut bertentangan menyerong.
Untuk mencipta kecerunan kompleks, dua warna tidak lagi mencukupi; sintaks membolehkan anda menambah bilangannya tanpa had, menyenaraikan warna yang dipisahkan dengan koma. Dalam kes ini anda boleh menggunakan warna lutsinar (kata kunci lutsinar ), dan juga lut sinar menggunakan format RGBA, seperti yang ditunjukkan dalam contoh 2.
Contoh 2: Warna lut sinar
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Hasil daripada contoh ini ditunjukkan dalam Rajah. 2.
nasi. 2. Kecerunan dengan warna lut sinar
Untuk meletakkan warna dengan tepat dalam kecerunan, nilai warna diikuti dengan kedudukannya dalam peratusan, piksel atau unit lain. Sebagai contoh, rekod merah 0%, oren 50%, kuning 100% bermakna kecerunan bermula dengan merah, kemudian 50% oren, dan kemudian kuning. Untuk kesederhanaan, unit ekstrem seperti 0% dan 100% boleh ditinggalkan; ia diandaikan secara lalai. Contoh 3 menunjukkan cara membuat butang kecerunan di mana kedudukan warna kedua daripada tiga ditetapkan kepada 36%.
Contoh 3: Butang Kecerunan
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Hasil daripada contoh ini ditunjukkan dalam Rajah. 3.
nasi. 3. Butang kecerunan
Dengan menetapkan kedudukan warna, anda boleh mendapatkan peralihan tajam antara warna, yang akhirnya memberikan satu set jalur monokromatik. Jadi, untuk dua warna anda perlu menentukan empat warna, dua warna pertama adalah sama dan bermula dari 0% hingga 50%, warna selebihnya juga sama dan berterusan dari 50% hingga 100%. Dalam contoh, 4 jalur ditambah sebagai latar belakang halaman web. Oleh kerana nilai ekstrem digantikan secara automatik, ia tidak boleh ditentukan, jadi cukup untuk menulis hanya dua warna.
Contoh 4. Belang biasa
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Borjuasi Eropah tipikal dan kehormatan digambarkan dengan elegan oleh bahasa rasmi.
Hasil daripada contoh ini ditunjukkan dalam Rajah. 4. Ambil perhatian bahawa salah satu warna kecerunan ditetapkan kepada lutsinar, jadi ia berubah secara tidak langsung melalui warna latar belakang halaman web.
nasi. 4. Latar belakang jalur melintang
Kecerunan agak popular di kalangan pereka web, tetapi menambahkannya adalah rumit oleh sifat yang berbeza untuk setiap penyemak imbas dan menentukan berbilang warna. Untuk memudahkan anda mencipta kecerunan dan memasukkannya ke dalam kod, saya mengesyorkan tapak www.colorzilla.com/gradient-editor yang anda boleh gunakan dengan mudah untuk menyediakan kecerunan dan segera dapatkan kod yang diperlukan. Tersedia templat siap sedia(Praset), melihat hasil (Pratonton), melaraskan warna (Pelarasan), kod akhir (CSS) yang menyokong IE melalui penapis. Bagi mereka yang bekerja dalam Photoshop atau lain-lain penyunting grafik, mencipta kecerunan akan kelihatan seperti sekeping kek, tetapi yang lain tidak akan menghadapi sebarang masalah untuk memikirkannya dengan cepat. Secara umum, saya sangat mengesyorkannya.
a! Kecerunan adalah alat yang sangat baik untuk memanipulasi warna CSS3. Daripada menggunakan imej untuk mencipta kesan kecerunan pada halaman web, ia akan menjadi lebih berfaedah untuk digunakan Kecerunan CSS3 dan dengan itu "meringankan" tapak. Memandangkan pengguna tidak perlu membuang masa dan trafik untuk memuat turun imej latar belakang. Terdapat dua jenis kecerunan utama: jejari dan linear. Siaran hari ini akan mengenai mereka.
Kecerunan Linear
Seperti yang dikatakan klasifikasi, kecerunan dalam CSS3 ialah imej. Tiada sifat istimewa untuk mereka. Dan iklan itu menggunakan sifat imej latar belakang.
Secara umum, sintaks kecerunan (linear) kelihatan seperti ini:
1 | div( |
Jadi, mari kita bercakap tentang segala-galanya dengan teratur.
Pertama sekali, kecerunan linear diisytiharkan oleh fungsi linear-gradient(). Fungsi tersebut mempunyai tiga makna utama. Nilai pertama mentakrifkan kedudukan awal. Contoh menunjukkan atas i.e. kedudukan permulaan dari atas. Anda juga boleh menggunakan bahagian bawah , kiri dan kanan ;
Jika sudut negatif, kedudukan akan berubah dari sudut kiri bawah ke kiri atas.
Nilai kedua fungsi ialah warna permulaan dan kedudukan berhentinya, yang ditunjukkan sebagai peratusan. Mengisytiharkan kedudukan ini tidak perlu; penyemak imbas akan lalai kepada 0% untuk warna pertama.
Nilai terakhir ialah warna kedua dan kedudukan berhentinya. Lalai kepada 100%. Nilai melampau ini bermakna bahawa warna pertama serta-merta mula beralih ke warna kedua. Walau bagaimanapun, jika kita menetapkan warna pertama kepada 50%, maka ia hanya akan mula beralih ke warna kedua dari tengah ketinggian yang tersedia. Inilah rupa kod tersebut:
Kami mendapat jalur ketinggian yang sama. Dengan sempadan yang jelas, tidak akan ada peralihan warna. Untuk lebih memahami cara ini berfungsi, percubaan dengan nilai.
Kecerunan jejari, sama seperti kecerunan linear, diisytiharkan sebagai fungsi, hanya radial-gradient() . Terdapat juga nilai asas: ini adalah bentuk kecerunan jejari (bulatan - bulatan atau elips - elips), warna awal dan akhir. Sintaksnya adalah seperti berikut:
div( |
Jika anda tidak menentukan bentuk, maka lalai akan menjadi elips.
Juga, kedudukan tengah kecerunan ditetapkan secara lalai; ia boleh diubah. Kedudukan boleh ditentukan menggunakan arahan (atas, bawah, kiri, kanan dan tengah), serta gabungannya, atau dinyatakan dalam peratusan atau piksel.
Gabungan arahan:
- Tengah di bahagian atas - atas - 50% 0%;
- Di sebelah kiri bucu atas— kiri atas — 0% 0%;
- Di sudut kanan atas - kanan atas - 100% 0%;
- Di tengah - tengah - 50% 50%;
- Tengah kiri - tengah kiri - 0% 50%;
- Tengah kanan - tengah kanan - 100% 50%;
- Tengah bawah - bawah - 50% 100%;
- Di sudut kiri bawah - bawah kiri - 0% 100%;
- Di sudut kanan bawah - kanan bawah - 100% 100%.
Berikut ialah contoh dengan peratusan:
div( |
Nilai paksi pertama X kedua masuk U.
Anda juga boleh menetapkan saiz kecerunan jejari. Saiz ditunjukkan dengan ruang selepas bentuk kecerunan. Gunakan secara lalai sudut terjauh(ke sudut jauh). Pengiraan dijalankan dari titik tengah kecerunan kepada:
Untuk lebih memahami perkara ini, mari lihat contoh. Kecerunan berbentuk elips dengan warna permulaan putih dan warna berakhir biru:
div( |
Saiz dikira dari jarak ke sisi yang dekat, jelas bahawa bahagian atas lebih dekat di sepanjang paksi Y dan kiri sepanjang paksi X.
Dan sekarang ke bahagian yang jauh:
div( |
Hasilnya, seperti yang mereka katakan, adalah jelas. Saiz dikira dari jarak ke bahagian yang jauh.
Dalam kecerunan jejari dan juga linear, kedudukan berhenti boleh digunakan untuk warna. Saya juga ingin ambil perhatian bahawa jika anda perlu mencapai ketelusan warna, anda harus menggunakan rgba.
div( |
Saluran alfa, yang terakhir dan bersamaan dengan 0.2, menunjukkan bahawa hanya 20% daripada 100% warna digunakan.
Dalam kedua-dua jenis Kecerunan CSS3 Anda boleh menggunakan bukan dua, tetapi beberapa warna.
div( |
Untuk kedua-dua jenis, warna berulang boleh digunakan. Iaitu, kitaran terbentuk daripada nilai-nilai ini. Mengulang fungsi kecerunan, mengulang-linear-gradient() untuk linear dan mengulang-radial-gradient() untuk jejari.
div( |
0% , #FFAE00 100%) ; /* untuk Firefox */
imej latar belakang : -ms-linear-gradient(atas , #FF5A00 0% , #FFAE00 100%) ; /* untuk IE 10+ */
imej latar belakang : -o-linear-gradient(atas , #FF5A00 0% , #FFAE00 100%) ; /* untuk Opera */
imej latar belakang : kecerunan linear(atas , #FF5A00 0% , #FFAE00 100%) ; /* sintaks standard */
}
div(
penapis : progid: DXImageTransform.Microsoft .gradient(startColorstr= #33FF5A00 , endColorstr= #33FFAE00 ) ;
}
Di mana 33 sejurus selepas cincangan ialah peratusan ketepuan warna.
Saya berharap artikel itu berguna kepada anda, dan topik yang dibincangkan telah dilindungi sepenuhnya.
Untuk mengikuti perkembangan artikel dan pelajaran terkini, langgan
Tidak lama lagi, tidak lama lagi, tapak web akan dimuatkan dengan lebih mudah, dan ia boleh dibuat tanpa imej sama sekali.
Sekarang sudah masuk pelayar moden anda boleh membuat latar belakang kecerunan dari sebarang kerumitan dengan Bantuan CSS, dan pada masa yang sama sepenuhnya tanpa gambar.
Mencipta Kecerunan CSS Tanpa Imej
Katakan kita mahu membuat peralihan kecerunan di latar belakang daripada kelabu kepada hitam. Untuk mencapai matlamat ini, W3 Corporation mencadangkan menggunakan arahan kecerunan linear khas dalam CSS3.
Jadi, mengikut versi W3, untuk membuat latar belakang kecerunan, tulis sahaja dalam pemilih blok:
Latar belakang: kecerunan linear(mula, kedudukan1 warna1, kedudukan2 warna2,...,kedudukan warnaN);
Dan penyemak imbas secara automatik akan melukis latar belakang kecerunan dalam blok.
Ia adalah jelas bahawa bunga dan titik kawalan boleh ada banyak dalam kecerunan. Parameter mulakan menentukan ke arah mana kecerunan harus merambat - ia boleh sama ada atas untuk kecerunan arah menegak atau dibiarkan untuk arah mendatar.
Tidak semua pelayar menyokong ciri ini, jadi buat masa ini terdapat beberapa helah. Untuk penyemak imbas yang sangat lama, anda perlu sama ada menentukan beberapa warna latar belakang purata (tidak akan ada kecerunan sama sekali, tetapi latar belakang tidak akan menjadi putih), atau menentukan imej dengan kecerunan (namun, jika tujuan menggunakan kecerunan linear dalam CSS adalah untuk mengurangkan bilangan imej yang dimuatkan, maka ini tidak berguna, kerana dalam semua pelayar imej masih akan dimuatkan, walaupun ia kemudiannya akan digantikan dengan kecerunan linear).
Untuk penyemak imbas seperti IE, anda boleh menggunakan kecerunan berasaskan penapis dan untuk pelayar webkit (Safari, Chrome) dan tokek (Mozilla), seperti biasa, terdapat alternatif: -webkit-gradient dan -moz-linear-gradient, yang menerima parameter yang serupa. Lihat blok kod berikut untuk mengetahui cara semua ini berfungsi:
Latar Belakang: #999; penapis: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#000000"); latar belakang: -webkit-gradient(linear, kiri atas, kiri bawah, dari(#ccc), hingga(#000)); latar belakang: -moz-linear-gradient(atas, #ccc, #000);
Selepas membuat ia kelihatan seperti ini.
