Altıgen CSS Şablonları

Yenilikçi altıgen CSS şablonları

Bir altıgen CSS şablonu, karmaşık geometriyi sizin için önceden çözülmüş olarak sunar. Her bir hücreyi kırpan, satırları kaydıran ve dar ekranlarda petek yapısını koruyan kurallar önceden yazılmıştır; bu sayede size çoğunlukla değerleri ayarlamak kalır. Aynı stil sayfası; yoğun bir öne çıkanlar ızgarasını, bir portföy duvarını veya kompakt bir hizmet grubunu biçimlendirebilir.

Karşılaştırmaya değer kırpma yöntemleri

Şeklin nasıl inşa edildiği, karşılaştırılması gereken ilk konudur. Güncel şablonların çoğu, standart bir kutuyu clip-path ve bir polygon() değeriyle kırpar; bu yöntem fotoğraf ağırlıklı hücrelerde oldukça iyi sonuç verir. Daha eski şablonlar ise altıgeni sözde öğe (pseudo-element) üçgenlerinden oluşturur; bu yaklaşım düz renkli hücrelerde işe yarasa da görsellerle çalışırken zahmetli hale gelir.

Kırpma işlemi yalnızca boyanan alanı değiştirir ve altındaki kutu dikdörtgen kalmaya devam eder, bu da kontrol edilmesi gereken bazı yan etkiler doğurur:

• kırpmanın kesip attığı kenarlıklar; bu nedenle kaliteli bir şablon, kenarı renkli bir altıgenin içine yerleştirilmiş daha küçük bir altıgenle taklit eder;
• yine kesintiye uğrayan gölgeler ve odak (focus) dış hatları; bunlar sarmalayıcıdaki bir drop-shadow filtresi ve görünür bir dolgu rengi değişimiyle geri kazanılır;
• eğik kenarlardan uzak durması için aspect-ratio, object-fit ve iç boşluk kurallarına ihtiyaç duyan görseller ve metinler.

Kesme noktaları boyunca kaydırılan satırlar

Petek yapısı, satırların ötelenmesinde hayat bulur. Her iki satırdan biri yarım hücre kadar kayar ve satırlar dikeyde üst üste biner, böylece eğik kenarlar kama şeklinde boşluklar bırakmadan birleşir. Bazı şablonlar bunu Flexbox satır kaydırma ve negatif kenar boşlukları ile çözer; diğerleri ise her hücrenin iki dar sütuna yayıldığı CSS Grid kanallarını kullanır.

Bir satır dört hücreden üçe, ardından ikiye düştüğünde, öteleme seçicilerinin genellikle güncellenmesi gerekir. Yetersiz bir şablon, her ekran genişliği için kuralları baştan yazmanıza neden olur. Daha güçlü bir şablon ise birkaç ortak değer üzerinden uyum sağlar ve ritmini tek bir sütuna kadar korur. Standart bir boşluk (gap) dikey kenarları eşitler, ancak eğik kenarlar örtüşmeye bağlıdır; bu nedenle yoğun içerik ızgaraları ile ferah portföy kümeleri genellikle ayrı boşluk kurallarına ihtiyaç duyar.

Baskı altında özel nitelikler

Uyum sağlayabilen şablonlar, sabit boyutları stil sayfasına dağıtmak yerine sayısal değerlerini özel niteliklerde (CSS custom properties) depolar. Hücre boyutu, boşluk ve örtüşme en yaygın adaylardır. Vurgulanan ve nötr hücreler için renk rolleri de aynı yaklaşıma uyar ve bir niteleyici sınıf ana hücreyi büyütebilir. Hafif bir ölçekleme gibi fareyle üzerine gelme (hover) efektleri de kırpmadan yararlanır, çünkü kesilen köşeler imlece yanıt vermeyi durdurur. Nicepage'de, Custom CSS alanına öğe, sayfa veya site düzeyinde ek kurallar ekleyebilirsiniz.

Bir şablona karar vermeden önce onu test edin. İlk olarak hücre boyutunu ve boşluğu değiştirin. Ardından iki hücreyi kaldırın ve sütun sayısını değiştirin. Tüm bu işlemler boyunca satırları birbirine kenetli kalan bir şablon, zorlu geometrinin üstesinden başarıyla gelmiş demektir.