CSS

Favori Şeyler 2: Yeni CSS Özellikleri, JS Kitaplıkları ve Daha Fazlası

İşte şu anda beni heyecanlandıran bazı web teknolojileri ve kaynaklarının kısa bir özeti. Bu gönderilerden birini düzenli olarak yazmak için en iyi niyetle başlamışken, ilkinden bu yana birkaç ay geçti.

En Boy Oranı

Chrome (ve uzantıya göre Edge) yeni CSS için destek gönderdi aspect-ratio Emlak! CSS Püf Noktaları, bunun ne olduğu ve nasıl kullanılacağına dair bir döküme sahiptir. Bu yaygın bir desteğe sahip olduğunda, dolgu hileleri geçmişten bir şey. Sözdizimi daha basit olamazdı — işte 4:3 en boy oranına sahip bir öğeyi nasıl oluşturabileceğimiz:

.element {
width: 100%;
aspect-ratio: 4 / 3;
}

Google’ın geliştirici blogunda bir nasıl kullanılacağının tam dökümü ile birlikte object-fit en boy oranı görüntüleri için.

Ufukta kapsayıcı sorguları

Yakında hayatımızı kolaylaştıracak başka bir şey de, kapsayıcı sorguları için çok beklenen belirtimdir. Medya sorguları, geliştiricilere uzun zamandır, görünüm alanı genişliğine bağlı olarak öğeleri farklı şekilde biçimlendirme yeteneği kazandırdı, ancak bizim gözümüzden kaçan bir şey, bir ana öğenin boyutuna dayalı olarak stil oluşturmadır. Tam sayfa genişliğini kaplayamayacak bir kart ızgarası düşünün. Kenar çubuğu olan bir düzende iki sütunlu bir düzen uygulamak isteyebiliriz, ancak kenar çubuğu olmadan üç satır göstermek veya tamamen farklı bir stil kullanmak isteyebiliriz. Ethan Marcotte daha ayrıntılı yazdı kapsayıcı sorgularının neden yararlı olduğunun açıklaması birkaç yıl önce.

Flexbox ve CSS Grid, son yıllarda medya sorgularına ihtiyaç duymadan özünde duyarlı mizanpajlar oluşturmayı kolaylaştırdı, ancak buna rağmen, çok az geliştirici kapsayıcı sorgularının – şekillendirmenin kapsayıcı bir öğenin boyutuna bağlı olduğunu – çok kullanışlı olacağı konusunda hemfikir değil. . Pratik bir uygulama basit olmaktan çok uzaktı ve pek çoğu ümidini yitirmişti. Ama son zamanlarda tartışma canlandı, ve görünüşe göre dileğimize kavuşabiliriz! Kapsayıcı sorguları kullanmaya ne zaman başlayabileceğimizi söylemek için henüz çok erken, ancak hey, bize sabırsızlıkla bekleyeceğimiz bir şey veriyor.

sürüklenebilir

ile animasyon yapmayı ne kadar sevdiğimi daha önce yazmıştım. yeşil çorap (GSAP). Son zamanlarda onunla oynarken eğlendim sürüklenebilir Bu kağıt kar tanesi yapıcıyı oluşturmak için eklenti – benzersiz bir kağıt kar tanesi kesmek için tutamaçları sürükleyin. Kar tanesi segmentleri CSS klip yolu kullanılarak yapılır ve tutamaçların sürüklenmesi çokgen yol değerini günceller. Burada da özel özellikleri yoğun bir şekilde kullandım.

Kalemi Gör
Klip yolu trigonometrisi ile kar taneleri
Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Kurs: Three.js Yolculuğu

Bruno Simon’ı görmüş olabilirsiniz. harika portföy sitesi – 3 boyutlu bir manzarada araba sürdüğünüz veya web’de diğer bazı çalışmalarına rastladığınız görsel bir şölen. Bu sürükleyici deneyimler, Three.jsve Bruno kısa süre önce kapsamlı bir Three.js video kursu yayınladı, Three.js Yolculuğu — kendi muhteşem açılış sayfasıyla tamamlayın! Kurs, sizi temel bilgilerden ileri tekniklere götürür ve bu süreçte, Three.js ile biraz deneyiminiz olsa bile öğrenecek çok şey vardır. Bu da büyük bir değer!

Yoluma devam etmekten zevk alıyorum. İşte şimdiye kadar öğrendiklerimi kullanarak yaptığım küçük bir hata animasyonu.

Kalemi Gör
Üç JS grubu
Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Uygulama Oluştur

Modern ön uç geliştirmeyle ilgili yaygın sorunlardan biri, gerekli tüm araçları ve çerçeveleri kurmak ve yapılandırmak için gereken zamandır. Tercih ettiğiniz yapım aracı Webpack, Parsel veya Snowpack olsun, Uygulama Oluştur bir projeyi hızlı ve kolay bir şekilde çalışır duruma getirmenize yardımcı olur. Bir proje kalıp plakası oluşturmak için şekillendirme, linting, JS çerçeveleri ve daha fazlası için seçeneklerinizi seçin. Gelecekteki projelere başlamak için bunu kullandığımı kesinlikle görebiliyorum.

Bültenler

İşte gelen kutuma her zaman neşe getiren birkaç haber bülteni.

Görünüm Kutusu

Viewbox ana sayfasının ekran görüntüsü

Bu muhteşem haber bülteni Cassie Evans ve Louis Hoebregts sayı başına SVG ile ilgili bir konuya odaklanır ve muhteşem demolar ve bir SVG mücadelesi içerir. Ayrıca başlık animasyonunu gerçekten çok seviyorum ve tekrar oynatmayı bırakamıyorum.

Şimdi abone ol

Ön Uç At

Front End Horse ana sayfasının ekran görüntüsü

bu ön uç at web sitesi kısa süre önce bazı muhteşem çizimlerle yeniden tasarlandı. Haber bülteninin her sayısında, aşağıdakilerden oluşan yaratıcı bir demonun derinlemesine bir dökümü yer alır. Adam Kuhn, Andy Yalınayak, Ilithya ve dahası. Alex’in benimkileri öne çıkarmayı seçmesinden onur duydum. Tuhaf balıklar demo son bir sayıda!

Şimdi abone ol

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Başa dön tuşu