Web Tasarımını Değiştiren Yeni CSS Özellikleri

Web tasarımının monotonlaştığı bir dönem vardı. Tasarımcılar ve geliştiriciler aynı tür web sitelerini tekrar tekrar oluşturdular, öyle ki kendi sektörümüzdeki insanlar tarafından sadece iki tür web sitesi oluşturduğumuz için alay edildi:

Şu anda iki olası web sitesinden hangisini tasarlıyorsunuz? pic.twitter.com/ZD0uRGTqqm

— Jon Gold (@jongold) 2 Şubat 2016

“Yaratıcı” zihinlerimizin başarabileceklerinin sınırı bu mu? Bu düşünce kalbime kontrol edilemez bir üzüntü sızısı gönderdi.

Kabul etmek istemiyorum ama belki de o zamanlar başarabileceğimizin en iyisi buydu. Belki de yaratıcı tasarımlar yapmak için uygun araçlarımız yoktu. Web'in talepleri hızla gelişiyordu, ancak şamandıralar ve tablolar gibi eski tekniklerle sıkışıp kaldık.

Bugün, tasarım manzarası tamamen değişti. Yaratıcılığımızı geliştirmek için kullanabileceğimiz yeni ve güçlü araçlarla (CSS Grid, CSS özel özellikleri, CSS şekilleri ve CSS writing-mode ) donatıldık.

CSS Izgarası Her Şeyi Nasıl Değiştirdi?

Izgaralar web tasarımı için gereklidir; bunu zaten biliyordun. Ancak, esas olarak kullandığınız ızgarayı nasıl tasarladığınızı kendinize sormayı bıraktınız mı?

Çoğumuz yapmadık. Sektörümüzde standart haline gelen 12 kolonlu gridi kullanıyoruz.

• Ama neden aynı ızgarayı kullanıyoruz?
• Izgaralar neden 12 sütundan yapılmıştır?
• Izgaralarımız neden eşit büyüklükte?

İşte neden aynı ızgarayı kullandığımıza olası bir cevap: Matematik yapmak istemiyoruz .

Geçmişte, kayan nokta tabanlı ızgaralarda, üç sütunlu bir ızgara oluşturmak için her sütunun genişliğini, her bir oluğun boyutunu ve her ızgara öğesinin nasıl konumlandırılacağını hesaplamanız gerekiyordu. Ardından, bunları uygun şekilde biçimlendirmek için HTML'de sınıflar oluşturmanız gerekiyordu. Oldukça karmaşıktı.

İşleri kolaylaştırmak için ızgara çerçevelerini benimsedik. Başlangıçta 960gs ve 1440px gibi çerçeveler 8-, 9-, 12- ve hatta 16 sütunlu ızgaralar arasında seçim yapmamıza izin verdi. Daha sonra Bootstrap çerçeve savaşını kazandı. Bootstrap yalnızca 12 sütuna izin verdiğinden ve bunu değiştirmek acı verici olduğundan, sonunda standart olarak 12 sütuna karar verdik.

Ama Bootstrap'ı suçlamamalıyız. O zamanlar en iyi yaklaşım buydu. Minimum çabayla çalışan iyi bir çözümü kim istemez ki? Izgara sorunu çözüldüğünde, dikkatimizi tipografi, renk ve erişilebilirlik gibi tasarımın diğer yönlerine çevirdik.

Şimdi, CSS Grid'in gelişiyle ızgaralar çok daha basit hale geldi . Artık grid matematiğinden korkmamıza gerek yok. O kadar basitleşti ki, CSS ile bir ızgara oluşturmanın Sketch gibi bir tasarım aracından daha kolay olduğunu iddia edebilirim!

Niye ya?

Diyelim ki her sütun 100 piksel boyutunda 4 sütunlu bir ızgara yapmak istiyorsunuz. CSS Grid ile grid-template-columns bildiriminde 100px dört kez yazabilirsiniz ve 4 sütunlu bir grid oluşturulacaktır.

 .grid { display: grid; grid-template-columns: 100px 100px 100px 100px; grid-column-gap: 20px; } 

12 sütunlu bir ızgara istiyorsanız, 100px 12 kez tekrarlamanız yeterlidir.

 .grid { display: grid; grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px; grid-column-gap: 20px; } 

Evet, kod güzel değil, ancak kod kalitesini optimize etmekle ilgilenmiyoruz (henüz) - hala tasarım hakkında düşünüyoruz. CSS Grid, herkesin – hatta kodlama bilgisi olmayan bir tasarımcının bile – web üzerinde bir ızgara oluşturmasını çok kolaylaştırır.

Farklı genişliklere sahip ızgara sütunları oluşturmak istiyorsanız, grid-template-columns bildiriminizde istediğiniz genişliği belirtmeniz yeterlidir ve hazırsınız.

 .grid { display: grid; grid-template-columns: 100px 162px 262px; grid-column-gap: 20px; } 

Izgaraları Duyarlı Hale Getirmek

Duyarlılık yönünden bahsetmeden CSS Izgarası hakkında hiçbir tartışma tamamlanmamıştır. CSS Izgarasını duyarlı hale getirmenin birkaç yolu vardır. Bir yol (muhtemelen en popüler yol) fr birimini kullanmaktır. Başka bir yol, medya sorgularıyla sütun sayısını değiştirmektir.

fr , bir kesri temsil eden esnek bir uzunluktur. fr birimini kullandığınızda, tarayıcılar açık alanı böler ve alanları fr göre sütunlara tahsis eder. Bu, eşit boyutta dört sütun oluşturmak için dört kez 1fr yazmanız gerektiği anlamına gelir.

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 20px; } 

Dört eşit boyutlu sütunun neden oluşturulduğunu anlamak için bazı hesaplamalar yapalım .

İlk olarak, ızgara için kullanılabilir toplam alanın 1260 piksel olduğunu 1260px .

Her sütuna genişlik ayırmadan önce, CSS Grid'in ne kadar boş alan (veya kalan) olduğunu bilmesi gerekir. Burada, grip-gap bildirimlerini 1260px . Her boşluk 20px olduğundan, kullanılabilir alan için 1200px piksel kalır. (1260 - (20 * 3) = 1200) .

Ardından, fr katlarını toplar. Bu durumda, dört 1fr 1200px , bu nedenle tarayıcılar 1200 pikseli dörde böler. Bu nedenle her sütun 300px . Bu yüzden dört eşit sütun alıyoruz.

Ancak, fr birimiyle oluşturulan ızgaralar her zaman eşit değildir !

fr kullandığınızda, her bir fr biriminin kullanılabilir (veya arta kalan) alanın bir bölümü olduğunun farkında olmanız gerekir.

Eğer fr birimi ile oluşturulan kolonların herhangi birinden daha geniş bir elementiniz varsa hesaplamanın farklı yapılması gerekir.

Örneğin, grid-template-columns: 1fr 1fr 1fr 1fr .

1fr 1200px her birine 300 300px ayırdıktan sonra, tarayıcılar ilk ızgara öğesinin 1000 piksel olan bir görüntü içerdiğini fark 1000px . 1000 300px 1000px daha büyük olduğundan, tarayıcılar bunun yerine 1000px ilk sütuna ayırmayı seçer.

Bu, kalan alanı yeniden hesaplamamız gerektiği anlamına gelir.

Yeni kalan alan 1260px - 1000px - 20px * 3 = 200px ; bu 200px daha sonra kalan kesirlerin miktarına göre üçe bölünür. Her kesir daha sonra 66px . Umarım bu, fr birimlerinin neden her zaman eşit genişlikte sütunlar oluşturmadığını açıklar.

fr biriminin her zaman eşit genişlikte sütunlar oluşturmasını istiyorsanız, minmax(0, 1fr) ile zorlamanız gerekir. Bu özel örnek için ayrıca görüntünün max-width özelliğini %100 olarak ayarlamak isteyeceksiniz.

Not : Rachel Andrew, farklı CSS değerlerinin (min-içerik, maksimum-içerik, fr, vb.) içerik boyutlarını nasıl etkilediğine dair harika bir makale yazmıştır. Okumaya değer!

Eşit Olmayan Genişlikli Izgaralar

Eşit olmayan genişlikte ızgaralar oluşturmak için, fr'yi çoklu olarak değiştirmeniz yeterlidir. Aşağıda, ikinci sütunun birinci sütunun 1,618 katı ve üçüncü sütunun ikinci sütunun 1,618 katı olduğu altın oranı izleyen bir ızgara verilmiştir.

 .grid { display: grid; grid-template-columns: 1fr 1.618fr 2.618fr; grid-column-gap: 1em; } 

Farklı Kesme Noktalarında Izgaraları Değiştirme

Izgarayı farklı kesme noktalarında değiştirmek isterseniz, bir medya sorgusu içinde yeni bir ızgara bildirebilirsiniz.

 .grid { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 1em; } @media (min-width: 30em) { .grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }

CSS Grid ile grid oluşturmak kolay değil mi? Daha önceki tasarımcılar ve geliştiriciler böyle bir olasılık için öldürürdü.

Yükseklik Tabanlı Izgaralar

Önceden bir web sitesinin yüksekliğine dayalı ızgaralar yapmak imkansızdı çünkü görüntü alanının ne kadar yüksek olduğunu anlamamızın bir yolu yoktu. Artık görüntü alanı birimleri, CSS Calc ve CSS Grid ile görüntü alanı yüksekliğine dayalı ızgaralar bile yapabiliriz.

Aşağıdaki demoda, tarayıcının yüksekliğine göre ızgara kareler oluşturdum.

Jen Simmons, CSS Grid ile dördüncü uç için tasarım yapmaktan bahseden harika bir videoya sahip. izlemenizi şiddetle tavsiye ederim.

Izgara Öğesi Yerleştirme

Izgara öğelerini konumlandırmak geçmişte büyük bir acıydı çünkü margin-left özelliğini hesaplamanız gerekiyordu.

Artık CSS Izgarası ile ızgara öğelerini fazladan hesaplamalar olmadan doğrudan CSS ile yerleştirebilirsiniz.

 .grid-item { grid-column: 2; /* Put on the second column */ } 

Hatta bir ızgara öğesine span anahtar sözcüğüyle kaç sütun alması gerektiğini söyleyebilirsiniz.

 .grid-item { /* Put in the second column, span 2 columns */ grid-column: 2 / span 2; } 

ilham

CSS Grid, aynı web sitesinin birçok varyasyonunu hızlı bir şekilde oluşturabilmeniz için işleri o kadar kolay bir şekilde düzenlemenizi sağlar. En iyi örneklerden biri Lynn Fisher'ın kişisel ana sayfasıdır.

CSS Izgarasının neler yapabileceği hakkında daha fazla bilgi edinmek isterseniz, Jen Simmon'un CSS Izgarası ve diğer araçlarla farklı türde mizanpajlar oluşturmayı araştırdığı laboratuvarına göz atın.

CSS Izgarası hakkında daha fazla bilgi edinmek için aşağıdaki kaynaklara göz atın:

• Master CSS Grid, Rachel Andrew ve Jen Simmons Video eğitimleri
• Layout Land, Jen Simmons Düzen hakkında bir dizi video
• CSS düzeni atölyesi, Rachel Andrew Bir CSS düzeni kursu
• CSS Izgarasını Öğrenin, Jonathan Suh CSS Izgarası üzerine ücretsiz bir kurs.
• Izgara yaratıkları, Dave Geddes CSS Izgarasını öğrenmenin eğlenceli bir yolu

Düzensiz Şekillerle Tasarlama

CSS kutu modeli bir dikdörtgen olduğu için web üzerinde dikdörtgen düzenler oluşturmaya alışkınız. Dikdörtgenlerin yanı sıra üçgen ve daire gibi basit şekiller oluşturmanın da yollarını bulduk.

Bugün burada durmamıza gerek yok. Elimizdeki CSS şekilleri ve clip-path ile fazla çaba harcamadan düzensiz şekiller oluşturabiliriz.

Örneğin, Aysha Anggraini, CSS Izgarası ve clip path ile çizgi romandan ilham alan bir düzen denedi.

Hui Jing, metnin Beyonce eğrisi boyunca akmasına izin verecek şekilde CSS şekillerinin nasıl kullanılacağını açıklıyor.

Daha derine inmek isterseniz, Sara Soueidan'ın dikdörtgen olmayan düzenler oluşturmanıza yardımcı olacak bir makalesi var.

CSS şekilleri ve clip-path , tasarımlarınıza özgü özel şekiller oluşturmanız için size sonsuz olanaklar sunar. Ne yazık ki, sözdizimi açısından, CSS şekilleri ve clip-path , CSS Izgarası kadar sezgisel değildir. Neyse ki, istediğimiz şekilleri oluşturmamıza yardımcı olacak Clippy ve Firefox'un Shape Path Editor gibi araçlarımız var.

CSS' writing-mode ile Metin Akışını Değiştirme

Web'de kelimelerin soldan sağa aktığını görmeye alışkınız çünkü web ağırlıklı olarak İngilizce konuşan insanlar için yapılmıştır (en azından böyle başladı).

Ancak bazı diller bu yönde akmaz. Örneğin, Çince kelimeler yukarıdan aşağıya ve sağdan sola okunabilir.

CSS'nin writing-mode , metin akışını her dile özgü yönde yapar. Hui Jing, Penang Hokkien adlı bir web sitesinde yukarıdan aşağıya ve sağdan sola akan Çin tabanlı bir düzen denedi. Deneyi hakkında daha fazla bilgiyi “Ev Hakkında Bir” başlıklı makalesinde okuyabilirsiniz.

Makalelerin yanı sıra, Hui Jing'in tipografi ve writing-mode üzerine harika bir konuşması var, "When East Meets West: Web Typography and How It Can Inspire Modern Layouts". İzlemenizi şiddetle tavsiye ediyorum.

Çince gibi diller için tasarım yapmasanız bile, bu CSS'nin writing-mode İngilizce'ye uygulayamayacağınız anlamına gelmez. 2016'da Devfest.asia'yı oluşturduğumda, küçük bir yaratıcı gücü esnettim ve metni writing-mode döndürmeyi seçtim.

Jen Simmons'ın laboratuvarı da writing-mode ilgili birçok deney içeriyor. Onu da incelemenizi şiddetle tavsiye ederim.

Çaba ve marifet uzun bir yol kat ediyor

Yeni CSS araçları faydalı olsa da, benzersiz web siteleri oluşturmak için bunların hiçbirine ihtiyacınız yok. Biraz yaratıcılık ve biraz çaba uzun bir yol kat eder.

Örneğin, Super Silly Hackathon'da Cheeaun, tüm web sitesini -15 derece döndürür ve web sitesini okurken aptal görünmenizi sağlar.

Darin Senneff, bazı trigonometri ve GSAP ile animasyonlu bir giriş avatarı yaptı. Parola alanına odaklandığınızda maymunun ne kadar sevimli olduğuna ve gözlerini nasıl kapattığına bakın. Etkileşimli oturum açma formuna benzer şekilde, JustEat gibi harici hizmetleri kullanırken kaybedilen gelir miktarını tahmin etmeye yardımcı olan gerçekten hoş ve etkileşimli bir hesap makinesi de var!

JavaScript Öğrenin kursum için satış sayfasını oluşturduğumda, JavaScript öğrenen kişinin kendini evinde hissetmesini sağlayan öğeler ekledim.

Toplama

Benzersiz bir web tasarımı sadece düzen ile ilgili değildir. Tasarımın içerikle nasıl bütünleştiği ile ilgilidir. Biraz çaba ve ustalıkla hepimiz, hedef kitlemize hitap eden benzersiz tasarımlar yaratabiliriz. Bugün elimizdeki araçlar işlerimizi kolaylaştırıyor.

Soru şu ki, benzersiz bir tasarım yapmaya yeterince önem veriyor musunuz? Umarım yaparsın.