Gelişmiş Düzenler ve Efektler için Sekiz CSS İpucu

Web ön uç geliştirme alanı, son birkaç yılda önemli ilerleme kaydetti. Bununla birlikte, kullanıcıların gördüğü gibi web ön ucu hala aynıdır: CSS ile stillendirilmiş HTML işaretlemesi.

Birçok yerleşim problemi ilk bakışta basit görünebilir, ancak çoğu zaman zor olduğu ortaya çıkar. Belirli CSS özelliklerinin nasıl çalıştığına dair kapsamlı bilgi olmadan, bu gelişmiş mizanpajları yalnızca CSS ile elde etmek imkansız görünebilir.

Bu makalede, bu gelişmiş düzen ve efektlerden bazılarını uygulamak için daha az bilinen CSS özelliklerinden yararlanan sekiz uzman CSS ipucu ve püf noktası bulacaksınız.

1. CSS Kardeş Seçicilerini En Üst Düzeye Çıkarma

Sorun: Kardeş seçicileri kullanmayarak optimizasyon fırsatlarını kaybediyorsunuz.

Çözüm: Ne zaman mantıklı olursa kardeş seçicileri kullanın. Bir öğe listesiyle çalıştığınızda ve ilk veya son öğeye farklı davranmanız gerektiğinde, ilk içgüdünüz :first-child ve :last-child sözde CSS seçicilerini kullanmak olabilir.

Örneğin, yalnızca CSS'ye yönelik bir hamburger menü simgesi oluştururken:

CodePen'de Rico Mossesgeld (@ricotheque) tarafından kaleme alınan CSS Kardeş Seçicileri 1 Maksimize Eden Kaleme bakın.

Bu mantıklı: Her çubuğun, sonuncusu hariç, bir kenar boşluğu vardır.

Ancak aynı etki, komşu kardeş seçici (+) aracılığıyla da mümkündür:

CodePen'de Rico Mossesgeld (@ricotheque) tarafından kaleme alınan CSS Kardeş Seçicileri 2 Kalemi Artırma konusuna bakın.

Bu da mantıklı: İlk çubuktan sonraki her şeyin bir kenar boşluğu vardır. Bu CSS numarası yalnızca birkaç ekstra bayt tasarrufu sağlamakla kalmaz (ki bu, herhangi bir orta ölçekli proje için kolayca toplanabilir), aynı zamanda bir olasılıklar dünyasının kapılarını da açar.

Bu kart listesini düşünün:

CodePen'de Rico Mossesgeld (@ricotheque) tarafından kaleme alınan CSS Kardeş Seçicileri 3 Kalemi Artırma konusuna bakın.

Her birinin bir başlığı ve metni vardır, ikincisi varsayılan olarak gizlidir. Yalnızca aktif kartın metnini ( .active sınıfı ile) ve onu takip edenleri görünür yapmak istiyorsanız, bunu sadece CSS kullanarak hızlı bir şekilde yapabilirsiniz:

CodePen'de Rico Mossesgeld (@ricotheque) tarafından kaleme alınan CSS Kardeş Seçicileri 4 Kalemi Maksimize Etme konusuna bakın.

Biraz JavaScript ile bu da etkileşimli olabilir.

Bununla birlikte, tüm bunlar için yalnızca JavaScript'e güvenmek, bunun gibi bir komut dosyasıyla sonuçlanacaktır:

CodePen'de Rico Mossesgeld (@ricotheque) tarafından kaleme alınan CSS Kardeş Seçicileri 5 Kalem Maksimize Etme konusuna bakın.

jQuery'yi bir bağımlılık olarak dahil etmek, biraz kısa koda sahip olmanızı sağlar.

2. Tutarlı HTML Öğesi Boyutlandırma

Sorun: HTML öğelerinin farklı tarayıcılarda tutarsız boyutları var.

Çözüm: Tüm öğeler için box-sizing border-box olarak ayarlayın. Web geliştiricileri için uzun zamandır bir bela olan Internet Explorer bir şeyi doğru yaptı: Kutuları doğru şekilde boyutlandırdı.

Diğer tarayıcılar, bir HTML öğesinin genişliğini hesaplarken yalnızca içeriğe bakar ve diğer her şey fazlalık olarak değerlendirilir. width: 200px piksel div, 20px dolgu ve 2 2px kenarlık, 242 piksel genişlikte işlenir.

Internet Explorer, dolguyu ve kenarlığı genişliğin bir parçası olarak kabul eder. Burada, yukarıdan div 200 piksel genişliğinde olacaktır.

CodePen'de Rico Mossesgeld (@ricotheque) tarafından kaleme alınan Kalem CSS Kutusu Modeli Demo 1'e bakın.

Alıştıktan sonra, standartları takip etmese bile ikinci yaklaşımın daha mantıklı olduğunu göreceksiniz.

Genişlik 200px dersem, kahretsin, 20px dolgum olsa bile 200px genişliğinde bir kutu olacak.

Her durumda, aşağıdaki CSS, öğe boyutlarını (ve dolayısıyla düzenleri) tüm tarayıcılarda tutarlı tutar:

CodePen'de Rico Mossesgeld (@ricotheque) tarafından kaleme alınan Kalem CSS Kutusu Model Demosu 2'ye bakın.

İkinci CSS seçici seti, kenarlık kutusu göz önünde bulundurulmadan stillendirilen HTML öğelerini düzen bozulmasından korur.

box-sizing: border-box o kadar kullanışlıdır ki sanitize.css adlı nispeten popüler bir CSS çerçevesinin parçasıdır.

3. Dinamik Yükseklik Öğeleri

Sorun: Bir HTML öğesinin yüksekliğini genişliğiyle orantılı tutmak.

Çözüm: Yükseklik yerine dikey dolgu kullanın.

Bir HTML öğesinin yüksekliğinin her zaman CSS genişliğiyle eşleşmesini istediğinizi varsayalım. height: 100% , içeriğinin yüksekliğiyle eşleşen öğelerin varsayılan davranışını değiştirmez.

CodePen'de Rico Mossesgeld (@ricotheque) tarafından kaleme alınan Kalem Dinamik Yükseklik Öğeleri 1'e bakın.

Cevap, yüksekliği 0'a ayarlamak ve bunun yerine .container gerçek yüksekliğini ayarlamak için padding-top veya padding-bottom kullanmaktır. Her iki özellik de öğenin genişliğinin bir yüzdesi olabilir:

CodePen'de Rico Mossesgeld (@ricotheque) tarafından kaleme alınan Kalem Dinamik Yükseklik Öğeleri 2'ye bakın.

Şimdi .container ne kadar geniş olursa olsun bir kare olarak kalacak. overflow: hidden , uzun içeriğin bu oranı aşmasını engeller.

Bu teknik, bazı değişikliklerle birlikte, en boy oranlarını her boyutta koruyan video yerleştirmeleri oluşturmak için harikadır. .container üst ve sol geçiş position: absolute , yerleştirmenin her iki boyutunu da .container "doldurması" için %100'e ayarlayın ve .container padding-bottom videonun görünümüyle eşleşecek şekilde değiştirin oran.

CodePen'de Rico Mossesgeld (@ricotheque) tarafından kaleme alınan Kalem Dinamik Yükseklik Öğeleri 3'e bakın.

position: relative .container için göreceli, iframe mutlak konumlandırmanın düzgün çalışmasını sağlar. Yeni padding-bottom , yalnızca en boy oranının yüksekliğinin genişliğine, çarpı 100'e bölünmesidir. Örneğin, video yerleştirmenin en boy oranı 16:9 ise, dolgu altı yüzdesi 9 bölü 16 (.5625) olmalıdır. ve 100 (56.25) ile çarpılır.

4. Dinamik Genişlik Öğeleri

Sorun: Bir HTML öğesinin genişliğini yüksekliğiyle orantılı tutmak.

Çözüm: Öğenin boyutları için temel olarak yazı tipi boyutunu kullanın.

Şimdi, tersi veya yüksekliğine göre genişliği değişen kaplar ne olacak? Bu sefer, kurtarmaya font-size . Genişlik ve yüksekliğin em olabileceğini, yani öğenin font-size bir oranı olabileceğini unutmayın.

font-size 40 piksel, genişliği 2em ve yüksekliği 1em olan bir 1em 80 piksel (40 x 2) genişliğinde ve 40 piksel (40 x 1) yüksekliğinde olur.

CodePen'de Rico Mossesgeld (@ricotheque) tarafından kaleme alınan Kalem Dinamik Genişlik Öğelerine bakın.

.container yüksekliğini değiştirmek mi istiyorsunuz? Yazı tipi boyutunu değiştir.

Tek uyarı, bir öğenin yazı tipi boyutunu, yalnızca CSS aracılığıyla üst öğesinin yüksekliğiyle otomatik olarak eşleştirmenin imkansız olmasıdır. Yine de bu teknik, bir Javascript yeniden boyutlandırma komut dosyasının aşağıdakilerden kesilmesine izin verir:

 var container = document.querySelector( '.container' ); container.style.height = yourDesiredHeight + 'px'; container.style.width = yourDesiredHeight * yourDesiredRatio + 'px';

ile:

 document.querySelector( '.container' ).style.fontSize = yourDesiredHeight + 'px';

5. Dinamik İçeriğin Dikey Merkezlenmesi

Sorun: Bir HTML öğesini (bilinmeyen yükseklikte) dikey olarak bir diğerinin içinde tutmak.

Çözüm: Dış öğeyi display: table olarak ayarlayın, ardından iç öğeyi bir CSS table-cell dönüştürün. Veya sadece CSS Flexbox kullanın.

line-height ile bir metin satırını dikey olarak ortalamak mümkündür:

CodePen'de Rico Mossesgeld (@ricotheque) tarafından kaleme alınan Dinamik İçeriğin Dikey Merkezlenmesi 1'e bakın.

Birden çok metin satırı veya metin dışı içerik için yanıt CSS tablolarıdır. .container ekranını table olarak ayarlayın, ardından .text için display: table-cell ve vertical-align: middle kullanın:

CodePen'de Rico Mossesgeld (@ricotheque) tarafından kaleme alınan Dinamik İçerik 2'nin Kalem Dikey Merkezlenmesine bakın.

Bu CSS numarasını, margin: 0 auto dikey eşdeğeri olarak düşünün. Internet Explorer'ın buggy desteği kabul edilebilir düzeydeyse, CSS3'ün Flexbox'ı bu teknik için harika bir alternatiftir:

CodePen'de Rico Mossesgeld (@ricotheque) tarafından kaleme alınan Dinamik İçerik 3'ün Kalem Dikey Merkezlenmesine bakın.

6. Aynı Yükseklikte Sütunlar

Sorun: Sütunları aynı yükseklikte tutmak.

Çözüm: Her sütun için büyük bir negatif margin-bottom padding-bottom edin. CSS tabloları ve Flexbox da çalışır.

float veya display: inline-block kullanarak, CSS aracılığıyla yan yana sütunlar oluşturmak mümkündür.

CodePen'de Rico Mossesgeld (@ricotheque) tarafından kaleme alınan Kalem Aynı Yükseklik Sütunları 1'e bakın.

.cols uygun şekilde boyutlandırmak için box-sizing: border-box kullanımına dikkat edin. Yukarıdaki Tutarlı HTML Öğesi Boyutlandırma bölümüne bakın.

İlk ve son sütunun sınırları tamamen aşağı inmez; daha uzun olan ikinci sütunun yüksekliğine uymuyorlar. Bunu düzeltmek için .row overflow: hidden eklemeniz yeterlidir. Ardından, her .col margin-bottom 99999 piksele ve padding-bottom 100009 piksele (99999 piksel + .col diğer taraflarına uygulanan 10 piksel dolgusu) ayarlayın.

CodePen'de Rico Mossesgeld (@ricotheque) tarafından kaleme alınan Kalem Aynı Yükseklikte Sütunlar 2'ye bakın.

Daha basit bir alternatif Flexbox'tır. Yine, bunu yalnızca Internet Explorer desteği şart değilse kullanın.

CodePen'de Rico Mossesgeld (@ricotheque) tarafından kaleme alınan Aynı Yükseklikte Sütunlar 3'e bakın.

Daha iyi tarayıcı desteğine sahip bir alternatif daha: CSS tabloları ( vertical-align: middle ).

CodePen'de Rico Mossesgeld (@ricotheque) tarafından kaleme alınan Aynı Yükseklikte Sütunlar 4'e bakın.

7. Kutunun Ötesine Geçmek

Sorun: Kutular ve düz çizgiler çok klişe.

Çözüm: transform: rotate(x) veya border-radius kullanın.

Bir pazarlama veya broşür web sitesinden tipik bir dizi bölme alın: tek bir nokta ile dikey bir slayt yığını. İşaretlemesi ve CSS'si şöyle görünebilir:

CodePen'de Rico Mossesgeld (@ricotheque) tarafından kaleme alınan Kalemin Kutunun Ötesine Geçmesi 1'e bakın.

İşaretlemeyi çok daha karmaşık hale getirme pahasına, bu kutu şeklindeki paneller bir paralelkenar yığınına dönüştürülebilir.

CodePen'de Rico Mossesgeld (@ricotheque) tarafından kaleme alınan Kalemin Kutunun Ötesine Geçmesi 2'ye bakın.

Burada çok şey oluyor:

Her bölmenin yüksekliği .pane-container tarafından kontrol edilir. Negatif kenar boşluğu, bölmelerin rahatça yığılmasını sağlar.

• .pane-background , alt .mask-box ve torunu .image , tümü position: absolute olarak ayarlanmıştır. Her öğenin farklı top , left , bottom ve right değerleri vardır. Bu, aşağıda ayrıntıları verilen döndürmeler tarafından oluşturulan boşlukları ortadan kaldırır.
• .mask-box 2 derece (saat yönünün tersine) döndürülür.
• .image , .mask-box dönüşünü engellemek için -2 derece döndürülür.
• .mask-box taşması, döndürülmüş üst ve alt kenarları .image öğesini kırpacak şekilde gizlenir.

İlgili bir notta, bir görüntüyü daire veya oval haline getirmek çok basittir. img öğesine border-radius: 100% uygulayın.

CodePen'de Rico Mossesgeld (@ricotheque) tarafından kaleme alınan Kalemin Kutunun Ötesine Geçmesi 3'e bakın.

Bunlar gibi gerçek zamanlı CSS değişiklikleri, bir web sitesinde yayınlanmadan önce içerik hazırlama ihtiyacını azaltır. Photoshop'ta bir fotoğrafa daire maskesi uygulamak yerine, web geliştiricisi orijinal fotoğrafı değiştirmeden aynı efekti CSS üzerinden uygulayabilir.

Ek avantaj, içeriğe dokunulmadan ve web sitesinin mevcut tasarımına bağlı kalmadan, gelecekteki yeniden tasarımların veya yenilemelerin kolaylaştırılmasıdır.

8. Gece Modu

Sorun: Yeni bir stil sayfası oluşturmadan bir gece modunu uygulamak.

Çözüm: CSS filtreleri kullanın.

Bazı uygulamalar, düşük ışıkta daha iyi okunabilirlik için arayüzün karardığı bir gece moduna sahiptir. Daha yeni tarayıcılarda, CSS filtreleri Photoshop benzeri efektler uygulayarak aynı efekti oluşturabilir.

Yararlı bir CSS filtresi, bir öğenin içindeki her şeyin renklerini invert çeviren (sürpriz değil) invert'tir. Bu, yeni bir stil kümesi oluşturmayı ve uygulamayı gereksiz kılar.

CodePen'de Rico Mossesgeld (@ricotheque) tarafından kaleme alınan Kalem Gece Modu 1'e bakın.

Bu filtreyi siyah metinde ve beyaz arka planda kullanmak gece modunu simüle eder. !important , bu yeni renklerin mevcut stilleri geçersiz kılmasını sağlar.

CodePen'de Rico Mossesgeld (@ricotheque) tarafından kaleme alınan Kalem Gece Modu 2'ye bakın.

Ne yazık ki, görüntü garip görünüyor çünkü renkleri diğer her şeyle ters çevrilmişti. İyi haber şu ki, aynı anda birden fazla filtre uygulanabilir. Ton döndürme filtresinin eklenmesi, görüntüleri ve diğer görsel içeriği normale döndürür:

CodePen'de Rico Mossesgeld (@ricotheque) tarafından kaleme alınan Kalem Gece Modu 3'e bakın.

Bu neden işe yarıyor? hue-rotate(180deg) sadece invert(1) ile aynı etkiyi yaratır. JavaScript destekli bir düğme aracılığıyla geçiş yapıldığında gece modu CSS'nin nasıl çalışacağına dair bir demo burada.

CSS'den En İyi Şekilde Yararlanın

Tarayıcı veya web sitelerinin nasıl oluşturulduğu gelecekte önemli ölçüde değişmedikçe, iyi bir CSS bilgisi web geliştirme alanında temel bir beceri olarak kalacaktır.

Tüm bu CSS ipuçlarının ortak bir noktası vardır: Bir stil dili olarak CSS'nin kullanımını en üst düzeye çıkararak tarayıcının ağır işleri yapmasına izin verirler. Ve doğru yapıldığında, bu her zaman daha iyi sonuçlar, daha iyi performans ve dolayısıyla daha iyi bir kullanıcı deneyimi sağlayacaktır.

Aşağıdaki yorumlar bölümünde ilginç ve faydalı bulduğunuz herhangi bir CSS numaranız varsa bize bildirin.