CSS Gradyanları Hakkında Bazı Bağlantılar

Arada bir, blog yazmanın ruhu belirli bir konu etrafında birleşiyor gibi görünüyor ve yer imleri klasörümde kayıtlı makaleler sohbet ediyor gibi. Şu anda orada oturan sohbet tamamen CSS Gradients hakkında ve daha ilginç parçalardan bazılarını birbirine bağlayacağımı düşündüm.

• 22. Gün: konik gradyanlar — Manuel Matuzovic, modern CSS hakkındaki 21 günlük serisinin 100. Gününde konik gradyanlara bakarak renklere, açılara, yerleşime ve renk duraklarına üst düzey güzel bir bakış sağladı. sonra, üzerinde Gün 22, o koyar ::backdrop sözde eleman (Bu arada, Twitter beklenmedik bir şekilde hesabını askıya aldı - mümkünse o gemiyi düzeltmeye yardım edelim.)
• CSS radyal gradyanlarını gerçekten anlıyor musunuz? - patrick brosset burada rehberliğe layık işler yaptı ve dürüst olmak gerekirse hala bunun üstesinden gelmeye çalışıyorum. Ancak, radyal bir gradyanın boyutu ve şekli için anahtar kelimeler gibi, hala anlamadığım şeylere ilişkin net açıklamalarını ve demolarını şimdiden takdir ediyorum. Bunu zaten kendi başımıza bağlıyorum CSS Degradeleri Kılavuzu!
• Son Derece Özelleştirilebilir Arka Plan Degradeleri — Hey, radyal eğimden bahsetmişken, Scott Vandehey'ın birden fazla renk duraklı tarifi geçen hafta tur yaptı. Onun meydan okuması, farklı renk varyasyonlarını destekleyebilecek bir gradyan deseni yaratmaktı; özel özellikler. Bu şekilde, farklı renkler için özel bir özellik ve her bir renk durağı için yerleştirme değerleri atayabilir, ardından bağlama göre değerleri kolayca güncelleyebilir. Dahası, özel özelliklerin JavaScript ile güncellenebilmesi, Scott'ın degrade desenini özelleştirmek için bir araç oluşturun, yazının sonunda cömertçe paylaşılıyor.
• CSS Yarım Ton Desenleri - michelle barker Ana Tudor'un “yarım ton” kalıplarının ayrıntılı dökümü ile. Etki, eski okul gazetelerinin noktalı mürekkep baskısı gibi bir tür. Ana kullanırken Houdini Animasyon ve vurgulu efektler için arka planda, Michelle özellikle yarı ton efektinin kendisine ve bunun radyal bir gradyanla nasıl oluşturulduğuna bakıyor. Michelle'in basit bir nokta ızgarasından desenin biraz kademeli olduğu bir noktaya nasıl geçileceğini göstermesine özellikle bayılıyorum. Ve efekti nasıl noktaladığını görmek için sonuna kadar kalın. mask-image Bu, solma efekti oluşturmak için doğrusal bir gradyan kullanır. ben bu modelle biraz uğraştım, ve akan bir mürekkep lekesi filtresi gibi görünen düzgün bir şeyle sarıldı.
• Çarpıcı Bir Navbar Çözümü — Eric Meyer'e, "geçerli sayfa" bağlantısından noktalı bir çizginin çıktığı ve içerik kabının sol kenarı boyunca daha büyük noktalı bir kenarlığın parçası haline geldiği bir menü için ilginç bir tasarım görevi verildi. Eric her zaman harika bir örnektir. bir ön uç geliştirici gibi düşünmek nasılve bunu burada, standart ayar yaklaşımıyla bir engelle karşılaştığında doğrusal bir gradyan kullanarak izlediği alternatif rotayı açıklarken yapıyor. border-style: dotted eleman üzerinde.
• Maskeli Degrade Kesikli Çizgiler — Eric, yalnızca sol kenarlığın çizgilerini raster bir görüntünün çizgilerine nasıl bağladığını değil, aynı zamanda inatçı tasarım gözünün onu, ekranın daha düşük çözünürlüğünü taklit etmek için çözümünü değiştirmeye nasıl ikna ettiğini gösteren bu son bağlantının devamı ile birlikte olarak iki yinelenen doğrusal arka plan gradyanını kullanan görüntünün çizgileri mask-image arka plan gradyanı üzerinde. Çok inek ve harika!