# 116: Demolar İçin Özel Başlık - CSS Hileleri

Anonim

Kalan son başlıklar geldi! Artık bunları tamamlayabilir ve tüm özel başlıklarımızı tamamlayabiliriz. Bu ekran video kaydında, John Neiner tarafından yapılan Demo bölümü için özel başlıklar üzerinde çalışacağız.

İlginçtir, John, resmi Illustrator'da sağlayan tek illüstratördü. Bu bizim için güzel çünkü tam kalitede ihtiyacımız olan boyuta kadar ölçeklendirebiliriz. Geriye dönüp bakıldığında, muhtemelen vektörü bırakmalıydık (SVG olarak) ve belki de bir raster geri dönüşü kullanmalıydık. Ancak bu ekran yayınında farklı tarama kaydetme seçeneklerini keşfediyoruz ve sonunda JPG.webp ile devam ediyoruz.

Yanlış adı aradığım için kaydedilen dosyayı bulamadığımda bazı tasarruf karmaşası vardı. Gerçek dünya DUH durumu.

Daha sonra WordPress'e atlıyoruz ve şablonları stile hazır hale getirmek için sürecimizi tekrarlıyoruz. Demo sayfalarının sadece onlara özel bir CSS dosyası yüklemesini sağlıyoruz. Bu, header.php dosyamıza ( is_page_template()) mantık eklemek anlamına gelir . Demolar alanı için doğru şablonu buluyoruz (şablonda bariz bir değişiklik yaptığımız ve gerçek siteye yansıdığını gördüğümüz klasik bir test kullanarak.

Bu şablondaki tüm eski çöpleri çıkarıp yeni tarzımıza getiriyoruz. Sayfanın bir ızgarada olması ve yalnızca bu yeni özel başlık ve tüm bunlar için bir başlık alanına sahip olmak için gereken bir miktar işaretleme yazıyoruz.

Nihayetinde, özel başlık grafiğimizi, üstte (yüzdeye dayalı) grafiği yukarıya sığdırmak için (sığacak şekilde boyutlandırılmış) yeterli dolguya sahip bir sarmalayıcı öğesine arka plan görüntüsü olarak uygularız. Görüntünün arkasına koyu yeşilden siyaha doğru solan bir gradyan bile koyarız, böylece aşağı doğru ilerlerken okyanusta daha da derinleşiyormuşsunuz gibi görünür.

Bu sayfada yapılacak daha çok iş var, ancak başlığı tamamladık ve şablonu iyi durumda tuttuk!