Beberapa Tautan Tentang Gradien CSS

Sesekali, zeitgiest blogging tampaknya menyatu di sekitar topik tertentu dan itu seperti artikel yang disimpan di folder bookmark saya sedang melakukan percakapan. Percakapan yang ada di sana sekarang adalah semua tentang Gradien CSS dan saya pikir saya akan menautkan beberapa bagian yang lebih menarik.

• Hari 22: gradien kerucut — Manuel Matuzovic melihat gradien kerucut pada Hari ke-21 dari seri 100 hari tentang CSS modern, memberikan tampilan tingkat tinggi yang bagus pada warna, sudut, penempatan, dan perhentian warna. Kemudian, pada hari 22, dia menggunakannya di ::backdrop elemen semu. (Ngomong-ngomong, Twitter tiba-tiba menangguhkan akunnya — mari kita bantu memperbaiki kapal itu jika kita bisa.)
• Apakah Anda benar-benar memahami gradien radial CSS? - Patrick Brosset telah melakukan pekerjaan yang layak untuk panduan di sini dan sejujurnya saya masih mengerjakannya. Tapi saya sudah menghargai penjelasan dan demonya yang jelas tentang hal-hal yang masih saya tutupi, seperti kata kunci untuk ukuran dan bentuk gradien radial. Saya sudah menghubungkan ini dengan milik kita sendiri Panduan Gradien CSS!
• Gradien Latar Belakang yang Sangat Dapat Disesuaikan — Hei, berbicara tentang gradien radial, Scott Vandehey's resep untuk satu dengan beberapa warna berhenti membuat putaran minggu lalu. Tantangannya adalah membuat pola gradien yang dapat mendukung variasi warna yang berbeda, yang biasanya akan menjadi kekacauan panas kelas CSS dan nilai warna untuk setiap variasi jika tidak digunakan. properti khusus. Dengan cara ini, dia dapat menetapkan properti khusus untuk warna dan nilai penempatan yang berbeda untuk setiap perhentian warna, lalu cukup perbarui nilainya tergantung pada konteksnya. Dan terlebih lagi, cara properti khusus dapat diperbarui dengan JavaScript memungkinkan Scott untuk buat alat untuk menyesuaikan pola gradiennya, yang dengan murah hati dibagikan di akhir posting.
• Pola Halftone CSS - Michelle Barker dengan rincian rinci pola "halftone" Ana Tudor. Efeknya agak seperti cetakan tinta bertitik dari koran sekolah tua. Sementara Ana menggunakan Houdini di bawah kap untuk efek animasi dan hover, Michelle melihat secara khusus pada efek halftone itu sendiri dan bagaimana itu dibangun dengan gradien radial. Saya terutama menyukai cara Michelle menunjukkan cara beralih dari kotak titik langsung ke kotak di mana polanya sedikit terhuyung-huyung. Dan bertahan sampai akhir untuk melihat bagaimana dia menekankan efeknya dengan a mask-image yang menggunakan gradien linier untuk menciptakan efek fading. Saya sedikit mengotak-atik pola ini, juga, dan diakhiri dengan sesuatu yang rapi yang terlihat seperti filter noda tinta berair.
• Solusi Navbar yang Menakjubkan — Eric Meyer diberi tantangan desain yang menarik untuk menu di mana garis putus-putus keluar dari tautan "halaman saat ini" dan menjadi bagian dari batas putus-putus yang lebih besar di sepanjang tepi kiri wadah konten. Eric selalu menjadi contoh yang bagus dari cara berpikir seperti pengembang front-end, dan dia melakukannya di sini saat dia menjelaskan rute alternatif yang dia ambil menggunakan gradien linier ketika dia menabrak hambatan dengan pendekatan pengaturan standar border-style: dotted pada elemen.
• Garis Putus-putus Gradien Bertopeng — Eric dengan tindak lanjut ke tautan terakhir yang menunjukkan tidak hanya bagaimana dia menghubungkan garis batas kiri ke garis putus-putus dari gambar raster, tetapi bagaimana mata desainnya yang gigih meyakinkannya untuk mengubah solusinya untuk meniru resolusi yang lebih rendah dari gambar raster. tanda hubung gambar menggunakan dua gradien latar belakang linier berulang sebagai a mask-image pada gradien latar belakang. Sangat kutu buku dan hebat!