# 117: Anlaşmalar için Özel Başlık - CSS Hileleri

Anonim

Son videoda gerçekte hangi başlığı yaptığımızla ilgili tuhaf karışıklıktan sonra, bu sefer gerçekten Fırsatlar sayfası için özel başlığı uygulayacağız! Bu, Meg Hunt tarafından yapıldı.

Tüm üstbilgiler gibi, orijinal dosyalara bakıp sayfaya en iyi şekilde nasıl oturacağını bulmak için biraz zaman harcadık. Birkaç seçenek deniyoruz, ancak nihayetinde onu sınırlı bir kutuya koymaya karar veriyoruz (başlığın içeriğin etrafında bir sınıra dönüştüğü Demos başlığı gibi bir şeyin aksine).

Dışa aktarırken, birçok farklı grafik formatıyla oynuyoruz. İlginç bir şekilde bu özel stil, PNG ve JPG.webp arasında hem kalite hem de dosya boyutu bakımından eşittir. Her ekranda iyi görünmesi gereken 2000 piksel genişliğinde çıktı veriyoruz. Ayrıca yaklaşık 150 bin vurduk ki bu büyük ama böyle bir kahraman grafiği için iyi bir hedef.

Anlaşmaların, çıktılanmadan önce rastgele hale getirilen her bir özel alanın nasıl olduğuna bakmak da dahil olmak üzere, anlaşmalar için şablon almaya başladık. Bu işaretlemeye ve daha sonra daha fazla zaman harcayacağız, ancak bu şablonda başlık için işleri hazırladığımızdan, onu da temizleyebiliriz.

Özel başlık grafiğini sayfaya yerleştirmek için birkaç farklı olasılığa bakıyoruz. Bir arka plan resmi en mantıklıdır, çünkü anlamsal

başlık ve görüntü değişimi için. Kullanarak background-sizekontrol ediyoruz cover, ancak bu kesintilere neden olabilir. Kapsama alanını kontrol ediyoruz, ancak bu dışarıda boşluğa izin veriyor. 100%hile yapar, ancak bunun güzel bir şekilde çalışması için bir en boy oranı stil kutusu yapmamız gerekecek. Yine de bu kolay, biz sadece yüksekliği 0 yapıyoruz ve bunun çalışmasını sağlamak için bir yüzde üst dolgu kullanıyoruz (dolgulu kutu).

Bu, yaptığımız yedinci özel başlıktır ve her biri farklı şekilde yapılmıştır. Web tasarımı, ha? Ne gezi Ama.