Duyarlı CSS Hareket Yoluna Farklı Yaklaşımlar

Faydalı Alternatif Metin Yazma

kullanmaya gelince CSS Hareket Yolu, yolun kendisinin ölçeklenmemesi beni her zaman rahatsız eder. Yol boyutu, oluşturulduğu şekliyle, esasen piksel cinsinden sabit bir boyuttur. Bu, Hareket Yolu ile duyarlı tasarımın biraz zor olduğu ve bazı geçici çözümler gerektirdiği anlamına gelir.

Yolu ölçekleme

Ne mutlu ki, CodePen meraklısı (ve harika animatör) Jhey Tompkins bazı yaratıcı düşünme ve grafik kitaplığı ile bir yol değerini ölçeklendirmenin bir yolunu buldu D3 – ve sahip bunun hakkında CSS Püf Noktalarında yazılmış. Bu, yolu ölçeklendirmenin akıllıca bir yoludur. yapma yoldaki öğelerin kendilerini ölçeklendirmesini ister. En boy oranını korumak istemiyorsak, yolu her iki eksende de ölçeklendirmeye bile izin verir. Jhey, kendi CodePen deneylerimden birinde test eden bir demo bile hazırladı:

Kalemi Gör Typo-coaster w/ Menderes tarafından Jhey (@jh3y) üzerinde kod kalemi.

Bir dönüşüm yaklaşımı

Jhey’in demosunun gösterdiği gibi, bizim için yararlı bir sonuç elde etmek için metni ölçeklendirmek için de biraz çalışmamız gerekir. Bazen, görünüm penceresi yeniden boyutlandırıldığında yalnızca yolu değil, üzerinde hareket eden öğeleri de ölçeklendirmek daha mantıklı olabilir. Farklı bir yaklaşımı test ettim: kullanarak Gözlemciyi Yeniden Boyutlandır dönüşümü hesaplamak için scale bir üst kapsayıcıdan değer. Bu, daha sonra bir CSS dönüşümünde kullanılan özel bir özellik değeri verir:

Kalemi Gör Hareket yolu ölçekleme Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Bu aynı zamanda belge akışındaki diğer içerikle de ilgiliydi, emin değildim.

Kalemi Gör Hareket yolu ölçekleme Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Bu yaklaşımların her ikisi de daha fazla deneyden faydalanabilir ve farklı durumlarda faydalı olabilir. Yolları ölçekleyebilmek, üretimde Hareket Yolu kullanmak için büyük bir teşvik olacağından, onlarla biraz daha çalışmayı dört gözle bekliyorum.

Bir cevap yazın

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