CSS3 Repeating Gradients [Tips CSS3]
Ada banyak fitur CSS3 yang mengubah cara kita menghias situs web, salah satunya adalah CSS3 Gradients. Sebelum ke CSS3, kita pasti membutuhkan gambar untuk membuat efek gradien; sekarang kami dapat memberikan efek yang sama (dan lebih baik) hanya dengan menggunakan CSS
Dalam posting kami sebelumnya, kami telah membahas dua jenis gradien yang dapat dicapai dengan CSS3:
- Radial dan
- Gradien Linier.
Kali ini kita akan melihat saudara mereka: mengulangi gradien.
Pengulangan Dasar
Pengulangan Gradien pada dasarnya adalah ekstensi. Sintaksnya mirip dengan bagaimana kita mendefinisikan gradien Radial dan Linear, hanya saja seperti namanya, itu juga akan mengulangi warna dalam arah yang ditentukan. Untuk mengulangi gradien linier, kita dapat menggunakan fungsi ini: pengulangan-linear-gradien, sementara untuk mengulangi gradien radial atau elips kami menggunakan fungsi ini: pengulangan-radial-gradien.
/ * Linear * / .gradient background: repeating-linear-gradient (0deg, # f9f9f9, #cccccc 20px); / * Radial * / .gradient background: repeating-radial-gradient (50% 50%, lingkaran, # f9f9f9, #cccccc 20px);
Tidak ada banyak perbedaan untuk sisanya pada kode, kecuali untuk pengulangan warna. Di bawah ini adalah ilustrasi sederhana untuk menggambarkan cara kerja pengulangan warna ini.
Meskipun gambar di atas hanya menggambarkan untuk mengulangi gradien linier, ide dasar juga berlaku untuk gradien radial di mana warna akan mengulangi secara tak terbatas, dalam hal ini, ke segala arah. Ikuti tautan di bawah ini untuk melihat demo.
- Lihat Demo
Di bagian selanjutnya, kami akan menunjukkan kepada Anda bagaimana kami dapat menggunakan CSS3 Repeating Gradients dalam contoh nyata.
Contoh: Membuat Pola
Implementasi yang paling umum dari Pengulangan Gradien adalah membuat pola latar belakang. Dalam contoh ini, kita akan membuat pola garis vertikal sederhana.
.gradient background: gradien linier berulang (0deg, # f9f9f9, # f9f9f9 20px, #cccccc 20px, #cccccc 40px);
Perhatikan bagaimana kita mendefinisikan dua warna berbeda - # f9f9f9 dan #cccccc - di tempat yang sama, 20px. Contoh ini akan mempertajam perbedaan antara dua warna ini dan menghilangkan kekaburan.
Untuk mengarahkan orientasi, kita cukup mengubah sudutnya - 90 derajat akan mengarahkannya secara horizontal saat 45 derajat akan mengarahkannya secara diagonal dan sebagainya.
- Lihat Demo
Contoh: Membuat Paperline
Dalam contoh kedua ini, kita akan membuat garis kertas yang mungkin sering Anda lihat di buku catatan. Untuk membuat efek ini, kita hanya perlu a div, tidak ada gambar, hanya CSS.
.gradient width: auto; tinggi: 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-gradien (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); latar belakang: gradien linier berulang (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); ukuran latar belakang: 100% 21px;
Perhatikan kami juga menambahkan CSS3 ukuran latar belakang properti untuk menentukan ukuran gambar latar belakang untuk 100%, 20px. Meskipun CSS3 Gradients menampilkan 'warna', sebenarnya dikategorikan sebagai gambar, bukan warna.
Selanjutnya, kita akan gunakan :sebelum elemen semu untuk menambahkan garis di sisi kiri kertas.
.gradien: sebelum content: ""; display: inline-block; tinggi: 500px; lebar: 4px; border-left: 4px ganda # FCA1A1; posisi: relatif; kiri: 30px;
Dan kita selesai, itu benar-benar sederhana, bukan? Kita sekarang dapat melihat semuanya beraksi dari tautan di bawah ini.
- Lihat Demo
- Sumber Unduhan
Sumber Daya Lebih Lanjut
- Gradien CSS Webkit
- CSS3 Gradien di Jaringan Pengembang Microsoft
