Beberapa pautan mengenai kecerunan CSS

Baru -baru ini, blogosphere nampaknya memberi perhatian khusus kepada topik kecerunan CSS, dan artikel -artikel yang relevan dalam penanda halaman saya telah menjadi meriah. Saya kebetulan mengambil kesempatan ini untuk menganjurkan dan berkongsi beberapa pautan menarik kepada artikel.

Kecerunan Conic
• -Manuel Matuzovic memperkenalkan kecerunan conic pada hari ke-21 dalam siri CSS modennya 100 hari, menjelaskan dengan cara yang mudah difahami seperti warna, sudut, kedudukan dan titik berhenti warna. Pada hari ke-22, dia memohon kepada Pseudo-Element lagi. (Dengan cara ini, Twitter secara tidak sengaja mengharamkan akaunnya - jika boleh, mari bantu dia memulihkannya bersama -sama.) ::backdrop
• Adakah anda benar -benar memahami kecerunan radial CSS? -Artikel ini oleh Patrick Brosset adalah kerja peringkat panduan, dan saya masih mengkaji dengan teliti. Tetapi saya telah menghargai penjelasan dan demonstrasi yang jelas yang menjawab kekeliruan lama saya mengenai saiz kecerunan radial dan kata kunci. Saya telah menghubungkan siaran ini ke Panduan Kecerunan CSS kami sendiri!
• Kecerunan latar belakang yang sangat disesuaikan -bercakap tentang kecerunan radial, skim kecerunan radial multi-warna berhenti yang dikongsi oleh Scott Vandehey minggu lepas telah diedarkan secara meluas. Cabarannya adalah untuk mewujudkan corak kecerunan yang menyokong variasi warna yang berbeza, yang akan menjadi kekacauan jika anda tidak menggunakan sifat tersuai, anda biasanya perlu membuat sejumlah besar kelas CSS dan nilai warna untuk setiap variasi. Dengan cara ini, dia boleh menetapkan harta tersuai kepada warna yang berbeza dan nilai kedudukan setiap titik berhenti warna, dan kemudian hanya mengemas kini nilai -nilai ini mengikut konteksnya. Lebih penting lagi, sifat tersuai boleh dikemas kini melalui JavaScript, yang membolehkan Scott membina alat untuk corak kecerunan tersuai dan dengan murah hati berkongsi alat pada akhir artikel. Corak Halftone CSS
• - Michelle Barker telah membuat pecahan terperinci mengenai corak "Halftone" Ana Tudor. Kesan ini agak seperti percetakan dakwat Dot-in di akhbar-akhbar lama. Walaupun Ana menggunakan Houdini untuk animasi dan kesan hover di bahagian bawah, Michelle memberi tumpuan khusus pada kesan separuh dongeng itu sendiri dan bagaimana ia dibina dengan kecerunan radial. Saya sangat suka cara Michelle menunjukkan bagaimana untuk beralih dari matriks titik mudah ke matriks titik yang sedikit berperingkat. Artikel ini juga berakhir dengan menunjukkan cara menggunakan kecerunan linear sebagai imej topeng untuk membuat kesan pudar. Saya juga mencuba corak ini dan berakhir dengan beberapa kesan menarik yang kelihatan seperti penapis dakwat kabur.
Penyelesaian bar navigasi yang indah
• - Eric Meyer menghadapi cabaran reka bentuk menu yang menarik yang memerlukan garis putus -putus dari pautan "Halaman Semasa" dan menjadi sebahagian daripada sempadan bertitik yang lebih besar di tepi kiri kontena kandungan. Eric sentiasa menjadi contoh hebat bagaimana untuk berfikir seperti pemaju depan, dan dia melakukannya di sini, kerana dia menerangkan alternatif yang dia ambil ketika dia menghadapi halangan ketika menggunakan kaedah standard penetapan elemen -menggunakan kecerunan linear. Jalur putus -putus dengan kecerunan topeng border-style: dotted - Eric menambah jawatan terdahulu dengan menunjukkan bukan sahaja bagaimana untuk menyambungkan garis bertitik sempadan kiri ke garis putus -putus imej raster, tetapi juga bagaimana dia menyempurnakan reka bentuknya dengan menggunakan dua kecerunan latar belakang linear berulang sebagai imej bertopeng latar belakang.Luar Biasa!

Atas ialah kandungan terperinci Beberapa pautan mengenai kecerunan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!