Orta CSS Şablonları

Farklı Görsel Düzenler İçin Esnek Orta CSS Şablonları

Stil, bir CSS şablonunda üzerinde en çok denetime sahip olduğunuz katmandır. Renkler, yazı tipi boyutları ve boşluklar her tasarımda önceden tanımlanmış olarak gelir. Blokların dar ekranlarda nasıl yeniden hizalandığı da aynı şekildedir. Medium koleksiyonundaki tasarımlar, sade tipografik bloklardan büyük fotoğraflar üzerine kurulu etkinlik düzenlerine kadar uzanır; bu nedenle stillerini erkenden karşılaştırmak daha sonra oluşabilecek fazladan iş yükünü önler.

Hazır Stiller Ne Kadar Farklılık Gösterir

Bu tasarımlardaki çoğu görsel tercih üç ana grupta toplanır:

1. Renk, genel atmosferin büyük kısmını belirler. „Düğmeli Orta Metin”, beyaz zemin üzerinde siyah metni ve vurgu olarak tek bir mavi düğmeyi korurken Fashion & Music tüm bölümleri turuncuyla kaplar.
2. Tipografi de tonu en az renk kadar biçimlendirir. „Düğmeli Orta Metin” başlığındaki kalın sözcükler ek renge gerek kalmadan vurgu kazandırır; Fashion & Music ise afiş yazılarını andıran daraltılmış başlıklardan yararlanır.
3. Kartlar, yinelenen içeriğin nasıl ele alındığını gösterir. Modern Technology Devices, mor ve macenta rengi bir arka planın alt kenarı üzerine yumuşak gölgeli üç beyaz kart yerleştirir.

Demo Materyalleri Değiştirildiğinde

Kendi içeriklerinizle yapacağınız kısa bir test, stilin duruma ne kadar iyi uyum sağladığını ortaya koyar:

1. Demo başlığı elinizdeki en uzun başlıkla değiştirin. „Düğmeli Orta Metin” tasarımında üç satıra taşan bir başlık dengeyi bozabilir; bu nedenle satır yüksekliğini ve metin genişliğini ayarlamak gerekebilir.
2. Metnin arkasına kendi fotoğraflarınızı yerleştirin. Fashion & Music demo fotoğrafı üzerinde rahatça okunan beyaz yazılar açık renkli bir görsel üzerinde soluk kalabilir. Daha koyu bir katman veya sözcüklerin arkasına eklenecek düz renkli bir şerit okunurluğu yeniden kazandırır.
3. Tema Renkleri bölümünden paleti değiştirin. Tema renklerini kullanan ögeler bu değişikliğe uyum sağlar; ancak elle farklı renge boyanmış bir düğme eski tonunu korur.
4. Geniş ekranlardan cep telefonlarına kadar Duyarlı Modları adım adım inceleyin. Kart boşlukları ve yazı tipi boyutları genellikle buralarda kendilerine özgü değerlere ihtiyaç duyar; ayrıca Modern Technology Devices içindeki öge çakışmasını da dikkatle kontrol etmek gerekir.

Kart satırları CSS Grid veya Flexbox yapısından yararlanabilir ve bu tercih alan daraldığında ögelerin nasıl alt satıra geçeceğini belirler. Her modda boyutları ve boşlukları birbirinden bağımsız olarak ayarlayabilirsiniz.

Özel CSS Eksik Ayarları Tamamlar

Standart kontroller; renkler, yazı tipleri ve boşluklarla ilgili değişikliklerin çoğunu rahatlıkla yönetir. Özel CSS ise uzun bir başlıktaki satır sonlarını dengelemek gibi hazır bir ayarı bulunmayan ayrıntılarda devreye girer. Nicepage, tek bir ögeye ya da sitenin tamamına yönelik özel kuralları destekler. Bu kurallar varsayılan stillerle çakışabileceğinden, sonucu Önizleme ekranında ve ardından yayımlanmış sitede tekrar kontrol edin. Doğru tasarım; başlıklarınız, fotoğraflarınız ve renk paletiniz demo ögelerin yerini aldıktan sonra bile, telefon genişliğinde dahi özenli görünümünü sürdürür.