Özet - Hero bölümü
Renk ve arka plan özelliklerini birleştirerek bir hero bölümü kurarsın.
Hero bölümü ne yapar?
Bir kahraman bölümü (hero) sayfanın en üstünde durur; ziyaretçinin ilk gördüğü büyük başlık ve görselden oluşur. Genellikle tam genişlik, koyu bir arka plan görseli ve üzerine beyaz başlık ile kurulur.
Bu derste öğrendiğin renk ve arka plan özelliklerini bir araya getirip bir hero bölümünü sıfırdan kuracağız: background kısayolu ile görsel, color ile metin rengi, background-size ile kaplama ve padding ile nefes alma alanı.
Bir hero için plan
Hero bölümünü kurarken şu dört parçayı bir araya getireceksin: bir .hero sınıf seçicisi, background kısayolu ile görsel, color ile başlık rengi ve padding ile içerik için yer.
İlk görevde bölümün zeminini ve metin rengini ayarlayacaksın. İkinci görevde .hero h1 seçicisine renk ve hafif bir gölge ekleyerek başlığı öne çıkaracaksın. Renklerin doğru karşıtlıkta olmasına dikkat et.
Uygulama .hero bölümünü kur
Bir .hero sınıf seçicisi ekle. background kısayolunu #1a1a2e url("/images/hero.jpg") center/cover no-repeat değeriyle, color özelliğini #fff, padding özelliğini 4rem 2rem değeriyle ata.
Örnek çözümü göster
/* .hero bölümünü kur */
.hero {
background: #1a1a2e url("/images/hero.jpg") center/cover no-repeat;
color: #fff;
padding: 4rem 2rem;
}Uygulama .hero h1 başlığını öne çıkar
Aşağıdaki .hero bloğunun ardına bir .hero h1 seçicisi ekle. color özelliğini #fff, text-shadow özelliğini 0 2px 4px rgba(0, 0, 0, 0.4) değeriyle ata.
Örnek çözümü göster
.hero h1 {
color: #fff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}Kendini test et
-
Özelliği amacına eşle
- background
- Görsel ve renk tek satırda
- color
- Metin rengini ayarlar
- background-size: cover
- Görseli kutuya yayar
- opacity
- Tüm öğeyi saydamlaştırır
-
Hero metin rengini tamamla
.hero { background: #1a1a2e url("/images/hero.jpg") center/cover no-repeat; color: ____; padding: 4rem 2rem; }Cevabı göster
.hero { background: #1a1a2e url("/images/hero.jpg") center/cover no-repeat; color: #fff; padding: 4rem 2rem; }