Pastel CSS Şablonları

İnce Ayar Yapabileceğiniz Stillere Sahip Pastel CSS Şablonları

Bir pastel CSS şablonu, yumuşak görünümünü değişkenlerde, yeniden kullanılabilir sınıflarda ve etkileşimli durumlar için ayrılmış birkaç seçicide saklar. "Nane" renginin arkasındaki değeri değiştirdiğinizde, bu değeri kullanan her kart, rozet ve buton aynı anda güncellenir. Üzerine gelme (hover) ve etkin (active) durumlar genellikle önceden tanımlanmıştır; böylece kuralları sıfırdan yazmak yerine doğrudan değerleri ayarlayabilirsiniz.

Her Tonun Arkasındaki Değişkenler

Çoğu pastel stil sayfası, şunun gibi kısa bir özel özellik kümesine dayanır:

• arka planlar ve kartlar için açık renkli bir temel;
• dönüşümlü paneller ve küçük rozetler için ikincil bir ton;
• her iki alanda da okunabilirliğini koruyan koyu bir metin değeri;
• bağlantılar ve butonlar için ayrılmış daha belirgin bir vurgu rengi.

Sınıflar bu değerler üzerine inşa edilir. Kart sınıfını bir kez düzenlediğinizde her kart yeni kenarlığı ve gölgeyi devralır; buton sınıfı da aynı şekilde çalışır. Pastel renklerin parlaklık seviyeleri birbirine çok yakın olduğundan, okunabilirliğin büyük kısmını koyu renkli metin değeri taşır. Açık sarı tonlar ekstra özen gerektirir; çünkü kremsi bir arka plan üzerindeki beyaz metin temel kontrast kontrollerini geçemez.

Üzerine Gelme, Odaklanma ve Devre Dışı Durumlar

Durumlar, pastel tasarımlarda en çok zorluk çıkaran kısımdır. Bir butonu nane renginden biraz daha koyu bir nane tonuna geçiren üzerine gelme efekti kolayca gözden kaçabilir ve leylak rengi bir kart üzerindeki lavanta odak halkası neredeyse tamamen kaybolur. Özenle hazırlanan şablonlar, değişikliği yalnızca renkle değil; bir dış çizgi, daha belirgin bir kenarlık veya daha kalın bir yazı tipi ekleyerek hissettirir. Devre dışı bırakılmış butonlar ise tam tersi bir yaklaşıma ihtiyaç duyar: buton olduğu yine de anlaşılan daha düz bir dolgu ve silik metin. Form alanları klasik bir zayıf noktadır; çünkü açık renkli bir panel üzerindeki açık renkli bir giriş alanı, kenarlığı, arka planı veya dış çizgisi koyulaşana kadar görünür bir sınıra sahip olmaz.

Özel Kod ile Kesme Noktası Geçersiz Kılmaları

Dar ekranlarda pastel stil, medya sorguları (media queries) aracılığıyla değişir. Açık renkli bir panelin telefonu kaplayıp boğmaması için geniş iç boşluklar küçülür, kartlar arasındaki mesafe daralır ve yazı tipi boyutları ile satır yükseklikleri kademeli olarak düşer. El yazısı biçimindeki bir başlık telefonda sıkışık görünüyorsa, bir kesme noktası geçersiz kılması bunu daha sade bir yazı tipine dönüştürebilir. Nicepage Responsive Modes, her geçersiz kılmayı cihaz bazında adım adım kontrol etmenizi sağlar.

Nicepage ayrıca tüm site, tek bir sayfa veya belirli bir öge için Custom CSS Code eklenmesine olanak tanır. Site genelindeki bir kural metin rengini koyulaştırmak gibi genel düzeltmeler için idealken, tek bir öge kuralı çevresindeki pastel tonlar arasında öne çıkması gereken mercan rengi bir promosyon rozeti gibi özel durumları çözer. Pastel CSS şablonları arasındaki en temel fark, stillerinin ne kadar merkezi bir şekilde yönetildiğidir. Renk paleti ile boşluklar paylaşılan değişkenlerde toplandığında ve durumlar birkaç net sınıfı takip ettiğinde, hiçbir içeriği yeniden yapılandırmadan tüm tasarımı baştan sona yeniden biçimlendirebilirsiniz.