CSS3 Kecerunan Semula [Tips CSS3]
Terdapat banyak ciri CSS3 yang mengubah cara kami menghiasi tapak web, salah satunya adalah Gradien CSS3. Sebelum CSS3, kami pasti memerlukan imej untuk mencipta kesan kecerunan; sekarang kita dapat menyampaikan kesan yang sama (dan lebih baik) dengan hanya menggunakan CSS
Dalam siaran terdahulu kami, kami telah membincangkan dua jenis kecerunan yang boleh dicapai dengan CSS3:
- Radial dan
- Gradien Linear.
Kali ini kita akan melihat saudara mereka: mengulang kecerunan.
Mengulangi Asas
Gradien Berulang pada dasarnya adalah lanjutan. Sintaksnya mirip dengan cara kita menentukan kecerunan Radial dan Linear, hanya seperti namanya, ia juga akan mengulangi warna dalam arah tertentu. Untuk mengulang kecerunan linier, kita boleh menggunakan fungsi ini: berulang-linear-kecerunan, manakala untuk mengulang kecerunan jejarian atau elips kami menggunakan fungsi ini: gradien berulang-radial.
/ * Linear * / .gradient background: berulang-linear-gradient (0deg, # f9f9f9, #cccccc 20px); / * Radial * / .gradient latar belakang: gradien pengulangan radial (50% 50%, lingkaran, # f9f9f9, #cccccc 20px);
Tidak banyak perbezaan untuk selebihnya pada kod, kecuali untuk pengulangan warna. Berikut adalah ilustrasi ringkas untuk menerangkan bagaimana pengulangan warna ini berfungsi.
Walaupun imej di atas hanya menggambarkan untuk mengulang kecerunan linier, idea asas juga digunakan untuk kecerunan jejarian di mana warna-warna akan mengulangi tak terhingga, dalam kes ini, dalam sebarang arah. Ikuti pautan di bawah untuk melihat demo.
- Lihat Demo
Di bahagian seterusnya, kami akan menunjukkan kepada anda bagaimana kami boleh menggunakan CSS3 Gradients Ulang dalam contoh sebenar.
Contoh: Mencipta Corak
Pelaksanaan yang paling umum iaitu Gradien Berulang adalah untuk mencipta corak latar belakang. Dalam contoh ini, kita akan membuat corak menegak mudah.
.kecerunan latar belakang: mengulang-linear-kecerunan (0deg, # f9f9f9, # f9f9f9 20px, #cccccc 20px, #cccccc 40px);
Perhatikan bagaimana kita menentukan dua warna yang berbeza - # f9f9f9 dan #cccccc - di tempat yang sama, 20px. Contoh ini akan mengasah perbezaan antara kedua-dua warna ini dan menghilangkan kekaburan.
Untuk mengarahkan orientasi kita hanya menukar sudut - 90deg akan mengarahkannya secara mendatar semasa 45deg akan mengarahkannya secara menyerong dan sebagainya.
- Lihat Demo
Contoh: Membuat Paperline
Dalam contoh kedua ini, kita akan membuat kertas kerja yang sering anda lihat dalam buku nota. Untuk mewujudkan kesan ini, kami hanya memerlukan div, tiada imej, hanya CSS.
.kecerunan lebar: auto; ketinggian: 500px; margin: 0 50px; latar belakang: -webkit-repeating-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); latar belakang: -moz-repeating-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); latar belakang: -o-mengulang-linear-kecerunan (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); latar belakang: mengulang-linear-kecerunan (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); saiz latar belakang: 100% 21px;
Perhatikan kami juga menambah CSS3 saiz latar belakang harta untuk menentukan saiz imej latar belakang untuk 100%, 20px. Walaupun kecerunan CSS3 memaparkan 'warna', ia sebenarnya dikategorikan sebagai imej, bukan warna.
Seterusnya, kami akan menggunakannya : sebelum pseudo-element untuk menambah jalur di sebelah kiri kertas.
.kecerunan: sebelum kandungan: ""; paparan: blok dalam talian; ketinggian: 500px; lebar: 4px; border-left: 4px double # FCA1A1; kedudukan: relatif; kiri: 30px;
Dan kita sudah selesai, betul betul betul? Kita kini boleh melihat mereka semua dalam tindakan dari pautan di bawah.
- Lihat Demo
- Muat turun Sumber
Sumber Tambahan
- Kecerunan CSS3 Webkit
- Kecerunan CSS3 di Rangkaian Pembangun Microsoft
