Ortak UI Zorlukları İçin Akıllı CSS Çözümleri

Bugün CSS ile neler yapabileceğimizi görmek inanılmaz, özellikle de bir zamanlar yığın bağlamlarını anlamanın ne kadar zor olduğunu veya kenar boşluklarının neden çöktüğünü ve top: float neden çalışmadığını hala hatırlıyorsanız. Bu yazıda, sadece şuna bakacağız: CSS ile yapabileceğimiz heyecan verici ve eğlenceli şeyler , ortak sorunları keşfetmek ve işimizde hepimizin yüzleşmesi gereken kullanım örneklerini kullanmak.

CSS ile Daha Zengin, Gerçek Gibi Gölgeler

Gölgeler, anlamı iletmeye yardımcı olur ve bir kullanıcı arayüzüne ekstra değer katar. Ancak, bugünlerde internette gördüğümüz birçok gölge, tam potansiyellerini kullanmıyor. Bunu değiştirelim!

Rob O'Leary'den gölgelerle ilgili her şeye kapsamlı bir bakış. CSS Püf Noktaları hakkındaki makalesi, ışığın gölgeleri nasıl etkilediğini ve gerçek gölge efektleri yaratmanın temeli olan bir ışık kaynağının nasıl tanımlanacağını araştırıyor. Bu temel ayarlandıktan sonra, derinlik uyandırmak, öğeleri yükseltmek ve onları yerleştirmek için gölgeleri nasıl kullanacağınızı, gölgeleri nasıl katmanlayacağınızı ve tabii ki hangi CSS özelliğinin hangi kullanım durumu için kullanılacağını öğreneceksiniz. Rob ayrıca gölgelerin beraberinde getirdiği erişilebilirlik ve performans etkilerine ve bunların nasıl canlandırılacağına da göz atıyor.

Konuyla ilgili bir başka harika yazı da Josh W Comeau'dan geliyor. Josh'un web'deki çoğu gölgenin mevcut durumunu tarif ettiği gibi, "gerçekten gölgelere pek benzemeyen bulanık gri kutulara" bir son vermek için, tipik kutu gölgelerinin güzel, gerçeğe yakın olanlara nasıl dönüştürüleceğini gösteriyor. . Herhangi bir kullanıcı arayüzünü çok daha dokunsal hale getiren küçük bir ayrıntı.

CSS Kağıt Kesim Etkisi

Bir başlık için kağıt kesme efekti oluşturmak istediyseniz, biraz uğraşmış olabilirsiniz. Belki de daha sonra üst üste bindirilecek iki ayrı div s kurmanız gerekir. Boşluğun, elbette, ekranlar arasında geçiş yapmak biraz zor olabilecek göreli birimlerde tanımlanması gerekir.

Stephanie Eckles'in CSS Kağıt Kesme Etkisi, CSS özel özellikleri, CSS Izgarası, CSS dönüşümleri ve eski moda CSS işlevi attr() ile sorunu tamamen çözer. Stephanie, h1 bir data özniteliği ile birlikte bir span kullanıyor. attr() , daha sonra bir :after -pseudo öğesindeki content -özelliği için kullanılan data özniteliğinin değerini alır. Vurgular, gölgeler ve renkler daha sonra CSS Özel Özellikleri ile ayarlanabilir. Yeniden kullanılabilir ve bakımı basit!

Stephanie ve CSS'yi seven diğer harika insanlar tarafından yapılan daha fazla sihirle ilgileniyorsanız, modern CSS'nin hak ettiği ilgiyi gördüğü StyleStage'e bir göz atın.

Ayrıca, Ahmad Shadeed'in, SVG'nin ne zaman daha anlamlı olabileceğine ve gerçek yaşam senaryosunda nasıl uygulanacağına karar vermenin tüm ince ayrıntılarına giren Cut Out Effect'i Düşünmek hakkındaki makalesine bir göz atın. Makale ayrıca, başlamak için çok sayıda kod örneği sunar!

Web İçin Mini Harita

Bunları daha önce görmüştük: genellikle sayfanın üst kısmında bulunan küçük yatay çubuklar. Kullanıcı aşağı kaydırırken yatay çubuk doluyor, böylece kullanıcı kaydırmak için gerçekte ne kadar kaldığını biliyor.

Peki ya bunu biraz daha bağlamsal hale getirirsek? Belki sayfa bazı resimler ve videolar ya da alıntılar ve farklı bölümler içeriyor - okuyucuların sayfada bir konum belirlemesine ve gerektiğinde geri atlamasına izin verirken bunları farklı şekilde vurgulamak ilginç olmaz mıydı? Rauno Freiberg de öyle düşündü.

Rauno'nun web için mini haritası (şu anda yalnızca Firefox'ta çalışıyor), tüm sayfanın bir mini harita temsilini oluşturmayı önemsiz hale getirirken, aynı zamanda okuyucuların sayfanın bir bölümünü sabitlemesine ve aralarında gezinmesine izin veriyor. Bunu başarmak için Rauno, rastgele bir HTML öğesinden (şu anda yalnızca Firefox'ta mevcut olan) canlı bir görüntü görüntülemek için deneysel bir CSS özelliği element() kullanır.

CSS'de Koşullu Sınır Yarıçapı

Kartları tasarlarken, diğer kartlarla birlikte görüntülemek için yeterli alan olduğunda, border-radius oldukça büyük bir değere sahip olmasını isteyebilirsiniz. Yine de kartta boşluk olmadığında ve belki de kenar boşluğu olmadığında - daha küçük ekranlarda olduğu gibi - border-radius 0 düşürmek isteyebilirsiniz. Bunu nasıl başaracaksınız?

Ahmad Shadeed, CSS'de Koşullu Sınır Yarıçapı hakkındaki makalesinde bu sorunu oldukça ayrıntılı bir şekilde inceledi. Başlangıçta Heydon Pickering ve Naman Goel tarafından önerilen fikir, bir durumu veya diğerini tetiklemek için yeterince büyük bir sayı kullanmaktır. Daha küçük ekranlarda, 100vw ile 100% arasındaki fark 0 ise, yarıçap da 0 olacaktır; ancak fark daha büyükse, daha büyük bir değer kullanılacaktır. CodePen'e de bir göz atabilirsiniz.

CSS Grenli Gradyanlar

Bir görüntüye biraz doku getirmek için biraz gürültü eklemek isterseniz ne olur? Elbette görüntüleri PNG, WebP veya AVIF olarak dışa aktarabilirsiniz, ancak ideal olarak SVG'lerin üzerine “gürültü” eklemek isteriz, böylece istersek gürültüyü her zaman kapatıp kapatabiliriz.

Grenli gradyanlar hakkındaki CSS-Tricks makalesinde Jimmy Chion, sadece bir CSS ve SVG ışıltısıyla bir gradyana doku eklemek için nasıl renkli gürültü üretebileceğimizi açıklıyor. Jimmy'nin açıkladığı gibi, fikir, gürültüyü oluşturmak için bir SVG filtresi kullanmak ve ardından bu gürültüyü arka plan olarak uygulamaktır. Sonra onu bir degradenin altına yerleştiririz, parlaklığı ve kontrastı iyileştiririz ve - işte - kademeli olarak uzaklaşan bir gradyanınız olur.

Sorun çözüldü! Ayrıca Jimmy'nin kurduğu Grainy Gradient oyun alanını da keşfedebilirsiniz.

Çok Satırlı Arka Plan Gradyanı

Bazı şeyleri CSS ile yapmak imkansız görünebilir - ta ki biri bunu gerçekleştirecek bir hack bulana kadar. Bu durumda olduğu gibi: Her satır için sıfırlanmayan bir degradeye sahip çok satırlı dolgulu bir metin elde edebilir misiniz?

Evet, Matthias Ott'un gösterdiği gibi. Matthias'ın çözümü biraz zor, ancak metnin üstüne eklenen bir sözde öğe sayesinde istenen sonuca yol açıyor. Uğraşmak için ilginç bir fikir.

Anahatlar Olmadan Form Alanı Odağı

Formların sıkıcı olması gerektiğini kim söyledi? Hakim El Hattab, ad, e-posta ve şifre isteyen bir form gibi basit bir şeyin bile, kalıpların dışında düşünmek ve bir zevk kıvılcımı sağlamak için bir fırsat olduğunu kanıtlayan bir demo oluşturdu.

Bunu başarmak için Hakim, form odağını ve doğrulamayı, alanların kendileri üzerinde herhangi bir odak anahattı olmadan geçen ince ama şaşırtıcı bir animasyonda birleştirir. Bunun yerine, odaklanılan alanı bir nokta işaretler. Odak başka bir alana geçtiğinde, animasyon tetiklenir ve nokta, ikisi arasında bir bağlantı kurarak yeni aktif alana atlar. Form alanı doğrulaması da nokta genişleyerek ve bir onay işareti göstererek sorunsuz bir şekilde entegre edilmiştir. Kodun derinliklerine dalmak isterseniz, Hakim ayrıca Codepen'de bir demo yayınladı. İlham verici!

CSS Gradyanlarını Geçiş

CSS'de geçiş geçişlerini denediyseniz, muhtemelen bunun gerçekten işe yaramadığını fark etmişsinizdir. Bir degradeden diğerine kademeli olarak solmak yerine, değişim, ikisi arasında yumuşak bir geçiş olmaksızın, hemen, aniden gerçekleşir.

Keith J. Grant'in keşfettiği gibi, geçişi akıllıca bir geçici çözümle başarabiliriz. Bunun için bir sözde eleman ve opaklık dönüşümü kullanıyoruz. İlk olarak, elemana bir degrade uygularız, ardından sözde elemanını elemanı dolduracak şekilde konumlandırırız ve ardından ikinci degradeyi ona uygularız. Ve sözde elemanın opaklığını değiştirerek iki gradyan arasında "geçiş" yaparız. Tam çalışan bir örneği CodePen'de kontrol edebilirsiniz.

image-set() ile Görüntü Performansını İyileştirme

image-set() i zaten duydunuz mu? Bunu, img etiketleri için HTML srcset niteliğine eşdeğer bir CSS arka planı olarak düşünebilirsiniz. Chromium tabanlı tarayıcılar ve Safari, birkaç yıldır bunu destekliyor, Firefox daha yeni izledi. Ollie Williams, bugün onunla neler yapabileceğimize ve neler yapamayacağımıza bir göz atıyor.

Ollie'nin açıkladığı gibi, image-set() için bir kullanım durumu, bir arka plan görüntüsünün birden çok çözünürlüğünü sağlamak ve hangi görüntünün bir kullanıcıya sunulacağına karar vermeyi tarayıcıya bırakmaktır - süslü cihazlarda kullanıcılar için yüksek çözünürlüklü bir sürüm ve örneğin, yavaş bağlantılarda veya daha düşük piksel yoğunluğuna sahip ekranlarda olanlar için daha düşük çözünürlüklü görüntü.

Çok umut verici bir başka kullanım durumu, ne yazık ki hala tarayıcı desteğinden yoksundur: AVIF, WebP veya HEIF gibi yeni görüntü biçimlerini kullanırken eski tarayıcılar için bir geri dönüş ekleme fikri. Bugün zaten böyle bir şey elde etmek istiyorsanız ve background-image 'e ihtiyacınız yoksa, <picture> unsuru, Ollie'nin önerdiği gibi, dikkate alınmaya değer bir alternatif olabilir. Görüntü performansını iyileştirmenize yardımcı olacak harika bir okuma.

Klip Yolu Açılır Efekt

Büyük tarayıcılar tarafından desteklenen clip-path: path() ile yaratıcı olmanın zamanı geldi. Mikael Ainalem, oldukça yeni özellik için güzel bir kullanım örneği gösteriyor: pürüzsüz bir açılır efekt.

Mikael, bir kişinin fotoğrafını daire şeklindeki arka planından ayırmak için clip-path: path() yöntemini kullanır. Üzerine geldiğinizde, kişi dairenin içinden yükselerek harika bir 3D izlenimi yaratıyor gibi görünüyor. “Hakkımızda” sayfaları için mükemmeldir.

Kaprisli 3D Düğme

Ayrıntılar önemlidir. Güzel bir düğme tasarlamak büyük ve karmaşık bir çaba gibi görünmüyor: burada ve orada biraz dolgu, korkak bir renk, erişilebilir metin ve birkaç düğme durumu. Josh Comeau, birden fazla tıklamak isteyebileceğiniz gerçekten tuhaf bir 3D düğme tasarlamak için tüm yolu kat etti.

Fikir basit: iki katman oluşturuyoruz ve ilk başta ön plan katmanını biraz dengeliyoruz. Fareyle üzerine gelindiğinde, ön katmanı aşağı kaydırıyoruz. Ardından, outline-offset anahattı ile ayarlarız veya düğme odaklandığında ve kullanıcı bir işaretçi aygıtı kullanırken anahattı gizlemek için :focus:not(:focus-visible) kullanırız.

Ardından, fareyle üzerine geldiklerinde düğmeyi birkaç piksel yukarı kaydırır, dönüşümü biraz canlandırır, animasyon için Bezier eğrisini ayarlar ve daha yumuşak, daha doğal bir gölge için biraz bulanıklık ekleriz. Ve işte - erişilebilir, mobil ve masaüstünde çalışan ve dokunup tıklaması bir zevk olan tuhaf bir 3D düğmemiz var. Elbette, tam kod parçacığını Josh'un blogunda bulabilirsiniz.

CSS Grafikleri

Belki bir sütun grafiği veya çubuk grafik, hatta çok verili bir sütun grafiği veya yığın sütunlar tasarlamanız gerekebilir. Nereden başlıyorsun? Belki de HTML öğelerini grafikler olarak biçimlendirmek için CSS yardımcı sınıflarını kullanan bir CSS veri görselleştirme çerçevesi olan Charts.css ile.

Lana Gordiievski ve Rami Yushuvaev tarafından oluşturulan çerçeve, birçok grafik türünü destekler, hiçbir bağımlılığı yoktur ve çok hafiftir. Ayrıca bileşenleri ve yerleşik grafik türleri hakkında kapsamlı belgeler içerir ve ayrıca kaynak kodu GitHub'da (MIT lisansı altında) mevcuttur. Ve biraz daha yaratıcı yaklaşımlara ihtiyacınız varsa, Preethi, CSS-Tricks'te de ilginç şekillerle CSS Grafiklerinin nasıl oluşturulacağını açıklıyor.

Yeni CSS Sıfırlama

Tarayıcılar arasında stilleri normalleştirmek için ne kullanıyorsunuz? Son zamanlarda, genel CSS sıfırlamanın boyutunu küçültmek için yeni yaklaşımlar vardı ve belki de projeleriniz için iyi adaylar olabilirler.

Modern CSS Sıfırlama ile Andy Bell, kutu boyutlandırma kuralları ekleyerek, varsayılan kenar boşluklarını kaldırarak, çekirdek kök varsayılanlarını ve gövde varsayılanlarını ayarlayarak CSS sıfırlamayı minimuma indirdi. Bununla birlikte Andy, onları görmemeyi tercih eden insanlar için tüm animasyonları, geçişleri ve yumuşak kaydırmayı kaldırır ve varsayılan olarak scroll-behavior ve text-decoration-skip-ink gibi modern özellikler ekler.

Elad Shechter'in Yeni CSS Sıfırlaması biraz daha agresif bir yaklaşım benimsiyor. Elad, display property dışında belirli HTML öğelerinde elde ettiğimiz tüm varsayılan stilleri kaldırır. Her iki yaklaşım da incelemeye değer!

CSS ile Kararlı Kaydırma Çubuğu Olukları

Ah, eski güzel düzen değişiyor! Bramus Van Damme'nin açıkladığı gibi, yerleşim değişikliklerinin biraz daha belirsiz nedenlerinden biri, web'deki farklı kaydırma çubuklarından kaynaklanmaktadır. iOS/macOS'ta kaplama kaydırma çubukları içeriğin üzerine yerleştirilirken (ve varsayılan olarak gösterilmez), diğer kaydırma çubukları "kaydırma çubuğu oluğuna", yani iç kenar kenarı ile dış dolgu kenarı arasındaki boşluğa yerleştirilir.

Bir kutunun içeriği çok büyüdüğünde, tarayıcı varsayılan olarak bir kaydırma çubuğu gösterecektir. İkinci durumda, bir düzen kaymasına neden olur. Neyse ki, bu sorun yakında tamamen ortadan kalkabilir. Yeni ve parlak bir scrollbar-gutter özelliği ile tanışın: bunu stable olarak ayarlayarak, kutu dolup taşmasa bile tarayıcının her zaman kaydırma çubuğu oluğunu göstermesini sağlayabiliriz.

Ve işleri simetrik tutmak için scrollbar-gutter: stable both-edges . Bu özellik henüz mevcut değil, ancak çok yakında Chromium'da gelecek ve diğer oluşturma motorları da yakında gelecek.

CSS'nin Canlandırabileceği Şaşırtıcı Şeyler

CSS özelliklerini canlandırmayı düşündüğünüzde, aklınıza hangileri geliyor? Will Boyd, soruya farklı bir perspektiften baktı ve hemen akla gelmeyen, tipik olarak animasyonla ilişkilendirilmeyen, ancak canlandırılabilir olduğu ortaya çıkan özellikleri keşfetmeye karar verdi.

“CSS'nin Canlandırabileceği Şaşırtıcı Şeyler” yazısında Will, bu beklenmedik şekilde canlandırılabilir özelliklerin ve tabii ki onları canlandırarak yapabileceğiniz şık şeylerin derinliklerine dalıyor. z-index , örneğin, katmanlı animasyonlar için kullanılabilir, opacity , yalnızca CSS ile bir modun karartılmasına yardımcı olur. CSS'nin ne kadar güçlü olduğuna dair harika bir hatırlatma.

Öğrenme Kaynakları

Öğrenme asla durmaz, değil mi? Aşağıda bazı yararlı ve eğlenceli derledik! — CSS becerilerinizi bir sonraki seviyeye taşımak için mükemmel kaynaklar. Ve zaten bir CSS uzmanıysanız, bilginizi test etmenin zorlukları da vardır. Eğlence!

CSS Kelime ve Hile Sayfaları

Daha önce orada bulunmuş olabilirsin. Tam bir son teslim tarihi üzerinde çalışırken, hızlı bir şekilde bir şeye bakmanız gerekir. CSS için, CSS Tricks Almanac ile asla yanlış gitmeyeceksiniz ve ayrıca Finlandiya'dan Ville V. Vanninen tarafından derlenen CSS kelime dağarcığına da bakabilirsiniz.

Flexbox'ı Eğlenceli Bir Şekilde Öğrenin

Kurbağalar, zombiler ve kulelerin ortak noktası nedir? Flexbox'ı öğrenirken onlar sizin en iyi arkadaşlarınızdır. Çünkü dürüst olalım: Bir kez anladığınızda Flexbox çok güçlüdür, ancak oraya ulaşmak oldukça zor olabilir. Öyleyse öğrenmeyi biraz daha eğlenceli hale getirelim.

Flexbox Froggy oyununda, küçük bir kurbağaya ve arkadaşlarına CSS yazarak nilüfer yapraklarını bulmalarına yardım ediyorsunuz. Oyun, sizi Flexbox konumlandırmanın en temellerinden daha gelişmiş zorluklara götüren 24 seviyeden oluşur.

Zombiler daha çok aranızdaysa, Flexbox Zombies tam size göre. Oyunun her bölümü arsanın bir bölümünü çözüyor, yeni bir Flexbox konsepti sunuyor ve yeni becerilerinizi sağlamlaştırmanıza yardımcı olan "zombi hayatta kalma mücadeleleri" sunuyor.

Son olarak, Flexbox Defense'e de bir göz atmak isteyebilirsiniz. Kule savunma oyunlarından ilham alan işiniz, gelen düşmanların savunmanızı geçmesini durdurmak - elbette kulelerinizi CSS ile konumlandırarak. Her üç oyun da tarayıcınızda çalışır. Mutlu flexboxing!

CSS Izgarası, CSS Seçiciler ve Diğer Yarışmalar

CSS becerilerinizi bir sonraki seviyeye taşımak ister misiniz? Bu üç küçük oyun tam da bunu yapmanıza yardımcı oluyor - kelimenin tam anlamıyla. Grid Garden'da bir havuç bahçesinin gururlu sahibi olacaksınız. CSS ızgarası yardımıyla mahsulünüze iyi bakmanız gereken 28 seviye sizi bekliyor.

CSS seçici becerilerinizin biraz cilalanması gerektiğini düşünüyorsanız, CSS Diner tam size göre. Tabaklar, elmalar, turşular — 32 mücadelenin her birinde, bir masadaki belirli öğeleri seçmek için farklı bir CSS seçici kullanmanız gerekecek.

Ve biraz rekabete hazırsanız, CSSBattle'ı da kontrol ettiğinizden emin olun. CSS golf oyununda , skor tablosunun en üstüne çıkmak için mümkün olan en küçük kodla hedefleri görsel olarak çoğaltmak için CSS becerilerinizi kullanacaksınız. Zorlukların her biri, visibility , display , transition veya z-index gibi belirli bir konuya ayrılmıştır.

Toplama

Son zamanlarda belirli bir zorluğa yaklaşma şeklinizi değiştiren bir CSS kaynağı veya tekniği ile karşılaştınız mı? Aşağıdaki yorumlarda bize bildirin! Bunu duymayı çok isteriz.