Vesika CSS Şablonları

Esnek Portre CSS Şablonları

Bu kategorideki portre CSS şablonları, kendi fotoğraflarınıza veya tablolarınıza uyarlayabileceğiniz stillendirilmiş başlangıç noktalarıdır. Açık ve koyu görünüm arasındaki fark çoğunlukla arka planlara, metin renklerine ve kenarlıklara dayanır. Koyu bir tema, siyah saçların veya koyu renkli bir ceketin hatlarını asla yutmamalıdır; biraz daha açık renkli bir kart genellikle bu sorunu çözer. Paleti, kartları ve altyazıları en az değişiklik gerektiren şablonu seçin.

Stili Her Ortama Uyarlayın

İki demo eşit derecede iyi göründüğünde, onları şu noktalara göre karşılaştırın:

1. Saf beyaz, sıcak gri ve nötr arka planlar açık teni farklı gösterdiğinden arka plan tonu.
2. Tuval üzerindeki bir portreyi ince bir kenarlık ön plana çıkarırken, belgesel niteliğindeki vesikalık fotoğraflar nadiren herhangi bir efekte ihtiyaç duyduğundan kenarlıklar ve gölgeler.
3. Bir altyazı aynı zamanda bağlantı işlevi gördüğündeki fareyle üzerine gelme (hover) durumu da dahil olmak üzere altyazı kontrastı.
4. Boşluğun portreleri birbirinden ayırdığı ve kart iç kenar boşluğunun (padding) altyazıları kart kenarından uzak tuttuğu boşluklandırma.

Tek renkli vesikalık fotoğraflar; minimum süsleme, uyumlu kenarlıklar ve tutarlı boşluklarla en temiz görünümü sunar. Kontrast ve başlık boyutu daha küçük ekranlarda çalıştığı sürece, moda portreleri daha cesur renk bloklarını taşıyabilir. Kömür kalem çizimlerde arka plan ve kenarlık tonlarını kağıdın açık grilerinden daha sakin tutun ve çizimin kendisine dokunmayın.

Şablonları Nicepage'de Özelleştirin

Değişiklikler genellikle genel ayarlardan koda doğru ilerler:

1. Tema Renkleri arka planları, metinleri ve kontrolleri birlikte değiştirir; böylece bir stüdyo fotoğrafları çekildiği gibi bırakırken her portre kartını tek seferde yeniden renklendirebilir. Tek tek öğelerde ayarlanan renkler olduğu gibi kalabilir.
2. Görsel düzenleyici, herhangi bir kod gerektirmeden yazı tipi boyutlarını ve olağan boşlukları halleder.
3. Özel CSS; üzerine gelme durumları veya bitmiş tabloları çerçeveleyip süreç fotoğraflarını yalın bırakan bir sınıf gibi istisnaları yönetir.

Nicepage'in Özel CSS belgeleri, bu tür kuralların nerede geçerli olduğunu açıklar. Her kuralı bir sınıfla veya blokla sınırlandırın; çünkü her görsel için yazılan bir kural logolarla ve dekoratif görsellerle de eşleşir. Özel kod düzenleyicinin içinde çalışmadığından sonucu önizlemede kontrol edin.

Dar Ekranlar İçin Duyarlı CSS

Yinelenen portre kartları genellikle CSS Grid'e dayanır ve Flexbox altlarındaki açıklamaları hizalar. Düzenleyicinin kendi kontrollerinin yetersiz kaldığı durumlarda medya sorguları (media queries) her genişlikte sütunları ve boşlukları değiştirebilir. Uzun bir boyanmış figürü, kare bir vesikalığı ve geniş bir grup portresini test edin. Her kart bir görselin doğal oranlarını korur ya da onu sabit bir kutuya kırpar; bu noktada hangi kısmın görünür kalacağını "nesne sığdırma" ve "nesne konumu" belirler. Kırpmanın asla bir yüzü veya elleri kesmeyeceği şekilde ayarlayın. İyi bir başlangıç şablonu, aynı kart, altyazı ve boşluklandırma kurallarının çok az geçersiz kılma ile tüm galeriyi kapsamasını sağlar.