Home-theater-designers
Sekiranya anda berada di internet selama lebih dari beberapa minit, kemungkinan anda telah menemui kecerunan CSS. Properti latar belakang CSS dapat digunakan untuk membuat berbagai gaya yang berbeza, dan salah satu jenis yang paling menarik adalah apa yang dapat dilakukan dengan nilai kecerunan.
Mengetahui bagaimana merancang dan membuat kecerunan CSS yang berbeza adalah aset bagi mana-mana pereka atau pembangun perisian. Dari artikel ini, anda akan mempelajari semua yang perlu anda ketahui untuk mula memasukkan kecerunan CSS dalam projek anda.
Apakah Gradien CSS?
Gradien CSS pada asasnya adalah gabungan dua atau lebih warna yang bertukar secara lancar dari satu ke yang berikutnya. Keadaan peralihan kecerunan CSS bergantung pada jenis kecerunan yang digunakan. Terdapat dua jenis kecerunan utama yang biasa digunakan dalam reka bentuk perisian: linear dan radial.
Walau bagaimanapun, terdapat jenis kecerunan ketiga yang kurang popular dan dikenali sebagai kecerunan kon.
Sintaks Gradien CSS
Background-image: gradient-type (direction, color1, color2);
Kecerunan CSS harus diberikan kepada harta CSS gambar latar. Jenis kecerunan boleh menjadi salah satu daripada beberapa; linear-gradient, radial-gradient, atau conic-gradient. Jenis kecerunan diikuti dengan tanda kurung buka dan tutup yang berisi arah peralihan gradien, serta warna yang akan dimasukkan dalam kecerunan.
Berkaitan: Cara Menetapkan Gambar Latar di CSS
Contoh di atas menunjukkan dua warna, tetapi kecerunan boleh mengandungi beberapa warna yang berbeza. Satu-satunya syarat ialah setiap warna dalam senarai dipisahkan dengan koma.
Apa itu Kecerunan Linear?
Kecerunan linear adalah kecerunan CSS yang paling popular. Ini mewujudkan kecerunan peralihan mendatar, menegak, atau pepenjuru menggunakan dua atau lebih warna.
Contoh Gradien Linear CSS
Background-image: linear-gradient(#00A4CCFF, #F95700FF);
Kod di atas akan menghasilkan kecerunan CSS berikut:
Terdapat satu komponen utama sintaks gradien yang dihilangkan dari contoh di atas. Komponen ini adalah arah peralihan gradien, dan ia dihilangkan kerana penjajaran lalai dari lereng linier adalah menegak (atas-ke-bawah); itulah output yang dikehendaki dalam contoh ini.
Kod di atas menghasilkan hasil yang sama dengan baris kod berikut. Satu-satunya perbezaan antara keduanya adalah bahagian arah kod.
Menggunakan Contoh Gradien Linear Bawah
Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);
Seperti yang anda lihat dari output, kod di atas membuat kecerunan yang bermula dengan biru di bahagian atas kemudian perlahan-lahan beralih ke oren di bahagian bawah. Sekiranya anda ingin membalikkan susunan warna, anda boleh menggantikannya ke bawah dengan ke atas dan ini akan membalikkan arah kecerunan, menghasilkan output berikut:
Sama dengan penjajaran menegak, penjajaran mendatar dari kecerunan dapat dicapai dengan penggunaan dua set kata kunci arah: ke kiri dan ke kanan , yang masing-masing akan menghasilkan output berikut.
butang rumah iphone 6 tidak berfungsi
Kecerunan Linear pepenjuru
Kemungkinan untuk mencapai peralihan kecerunan linear pepenjuru ke arah mana-mana kecerunan linear. Terdapat hanya empat senarai kata kunci tertentu yang perlu anda ketahui untuk mewujudkannya.
- Ke kanan bawah
- Ke kiri bawah
- Ke kanan atas
- Ke kiri atas
Menggunakan Contoh Gradien Linear Diagonal
Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);
Contoh di atas menghasilkan output berikut:
Seperti yang anda lihat dari output di atas, kecerunan linear membuat peralihannya dalam arah pepenjuru bergerak dari bahagian kiri atas ke bahagian kanan bawah kecerunan.
Kecerunan Linear pelbagai warna
Kecerunan linear boleh mempunyai dua atau lebih warna, tetapi seperti apa warna lebih banyak dalam kecerunan? Susunan warna kecerunan linear pelbagai warna bergantung pada arahnya. Yang berpindah ke arah mendatar akan mempunyai setiap warna baru yang muncul di sebelah kiri atau kanan kecerunan linier, bergantung pada arah tepat dari kecerunan linear.
Contoh Kecerunan Linear Berwarna
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
Garis kod di atas akan menghasilkan output berikut:
Seperti yang anda lihat, setiap warna baru ditambahkan di sebelah kanan kecerunan, menjadikan apa yang akhirnya berubah menjadi pelangi. Output yang sama dapat dicapai dalam arah menegak; namun, susunan warna khusus pada kecerunan linear akan bergantung pada kata kunci arah menegak (ke atas atau ke bawah).
Apakah Gradien Radial?
Gradien Radial membuat gradien spiral dua lebih banyak warna yang bermula dari pusat secara lalai. Di mana kecerunan linier menghasilkan kecerunan lurus yang mengalir secara menegak atau mendatar, kecerunan radial menghasilkan kecerunan bulat yang mengalir dari pusat ke tepi luar.
Menggunakan Contoh Radial Gradient
Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);
Garis kod di atas akan menghasilkan output berikut:
Menukar Pusat Gradien Radial
Secara lalai, kecerunan radial bermula di pusat kecerunan; bagaimanapun, mungkin untuk mengubah titik asal dengan pengenalan beberapa kata kunci.
cakera saya sentiasa pada 100
Menukar Contoh Kedudukan Mula Radial Gradien
Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);
Garis kod di atas akan menghasilkan output berikut:
Seperti yang anda lihat dari output di atas kecerunan sekarang bermula dari sudut kanan atas dan bukannya di tengah. Perubahan ini mungkin berlaku kerana penyertaan kata kunci kanan atas dalam kod di atas. Senarai kata kunci berikut juga dapat digunakan untuk mengubah titik asal kecerunan radial:
- Kiri atas
- Bawah kanan
- Dibahagian bawah kiri
Kecerunan Radial Berwarna
Seperti kecerunan linier, kecerunan radial juga dapat menggunakan dua warna lebih banyak, perbezaan utama adalah di mana kecerunan linear menambah kecerunan dalam garis lurus, kecerunan radial menambahkan warna baru di pinggir luar.
Contoh Gradien Radial Berwarna
Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
Garis kod di atas akan menghasilkan output berikut:
Menyesuaikan Kecerunan
Sejauh ini anda telah melihat cara mengubah arah dan titik tengah kecerunan, tetapi anda belum melihat cara menyesuaikan kecerunan. Menyesuaikan kecerunan mungkin kelihatan seperti banyak kerja, tetapi setelah anda memahami asas-asas membuat kecerunan latar belakang CSS, langkah seterusnya yang jelas adalah belajar bagaimana menjadikan kecerunan CSS anda lebih unik.
cara membuang pemacu google dari komputer
Secara lalai, warna dalam kecerunan menempati jumlah ruang yang sama rata dengan setiap warna beralih dengan lancar ke warna selepasnya. Oleh itu, jika dua warna digabungkan untuk membentuk kecerunan, setiap warna akan menempati separuh daripada ruang yang ada semasa beralih dari satu ke yang lain. Sekiranya tiga warna digabungkan, setiap warna akan menempati sepertiga ruang yang ada.
Dengan kecerunan yang disesuaikan, anda dapat menentukan jumlah ruang yang akan ditempati oleh warna dalam kecerunan dengan menetapkan secara jelas kedudukan berhenti warna .
Menyesuaikan Gradien Linear Contoh 1
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);
Garis kod di atas akan menghasilkan output berikut:
Output di atas menunjukkan warna kedua dalam gradien linier berhenti pada titik 30% dari warna pertama dalam gradien, bukan pada kedudukan biasa, dan kerana warna kedua juga merupakan warna akhir dalam kecerunan itu secara semula jadi meluas hingga akhir .
Sekiranya anda meletakkan 30% dalam kod di atas pada akhir warna pertama perkara harus menjadi lebih jelas.
Memperibadikan Gradien Linear Contoh 2
Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );
Kod di atas akan menghasilkan output berikut.
Output di atas jelas menunjukkan warna pertama dalam kecerunan berhenti pada titik 30% warna kedua dalam kecerunan. Contoh ini bersama dengan yang di atas akan membantu menjadikan penyesuaian warna berhenti lebih mudah untuk anda fahami.
Menyesuaikan kecerunan radial dilakukan dengan cara yang sama dengan kecerunan linear. Satu-satunya perkara yang perlu anda lakukan untuk mencapai hasil yang sama di atas dalam kecerunan radial ialah menukar jenis dan arah kecerunan.
Buat Gradien CSS Tidak Pernah Lebih Mudah
Artikel tutorial ini memberi anda alat untuk mengenal pasti dan membuat kecerunan linear dan radial. Sekiranya anda berjaya sampai ke tahap ini, anda akan belajar mengubah arah dan pusat kecerunan. Selain itu, anda kini mempunyai kemahiran untuk menyesuaikan kecerunan CSS dan membuat kecerunan latar yang unik.
Namun, jika anda tidak mahu terus mencipta kecerunan baru dan unik, anda boleh mulakan dengan membuat beberapa kecerunan yang sudah ada.
Berkongsi Berkongsi Tweet E-mel 27 Contoh Gradien Latar Belakang CSS yang bergayaWarna pepejal begitu tahun lalu. Kecerunan sudah masuk! Tetapi bagaimana anda membuatnya dalam CSS?
Baca Seterusnya Topik-topik yang berkaitan- Pengaturcaraan
- Pembangunan Web
- Reka Bentuk Web
- CSS
Kadeisha Kean adalah Pembangun Perisian Penuh dan Penulis Teknikal / Teknologi. Dia mempunyai kemampuan berbeza untuk mempermudah beberapa konsep teknologi yang paling kompleks; menghasilkan bahan yang dapat difahami dengan mudah oleh mana-mana pemula teknologi. Dia minat menulis, mengembangkan perisian yang menarik, dan menjelajah dunia (melalui dokumentari).
Lagi Dari Kadeisha KeanLanggan buletin kami
Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!
Klik di sini untuk melanggan