Arka Plan ve Görünüm

Bu dersin sonunda arka plana resim ve renk geçişi ekleyebilecek, elemanların görünme ve yer kaplama biçimini değiştirebileceksiniz.

Arka plan resmi

background-image bir elemanın arkasına resim koyar. Adres url() içine yazılır. style değeri çift tırnak içinde olduğu için adresi tek tırnakla yazın.

Arka plan resmi elemanın boyutunu belirlemez. İçi boş bir kutunun yüksekliği sıfırsa resim de görünmez, bu yüzden kutuya bir yükseklik verin.

• background-size Resmin boyutu. cover kutuyu tamamen doldurur ve taşanı keser. contain resmin tamamını gösterir, boşluk kalabilir.
• background-position Resmin konumu. Örneğin center veya top left.
• background-repeat Resmin tekrar edip etmeyeceği. repeat, no-repeat, repeat-x, repeat-y.
• background-attachment Sayfa kaydırılınca resmin ne yapacağı. scroll sayfayla birlikte kayar, fixed yerinde kalır.

<div style="height: 140px; margin-bottom: 8px; background-color: lightgray; background-image: url('baldiyetapanadam.png'); background-size: cover; background-position: center;"></div>
<div style="height: 140px; margin-bottom: 8px; background-color: lightgray; background-image: url('baldiyetapanadam.png'); background-size: contain; background-repeat: no-repeat; background-position: center;"></div>
<div style="height: 140px; background-color: lightgray; background-image: url('baldiyetapanadam.png'); background-size: 60px; background-repeat: repeat-x;"></div>

Sayfanın içeriğinin parçası olan resimler için img kullanın. Arka plan resimleri ekran okuyucular tarafından okunmaz ve alt metni alamaz. Süs olan resimler için background-image uygundur.

Sayfanın tamamını kaplayan bir arka plan için bu özelliklerin hepsi body etiketine birlikte yazılır:

body {
  background-image: url('arka-plan.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

Renk geçişleri

Geçişler, resim gibi background-image ile verilir:

• linear-gradient Düz bir çizgi boyunca geçiş yapar. Yön to right, to bottom gibi veya 45deg gibi derece olarak yazılır.
• radial-gradient Merkezden dışa doğru geçiş yapar.

<div style="padding: 24px; margin-bottom: 8px; background-image: linear-gradient(to right, gold, crimson);">Soldan sağa</div>
<div style="padding: 24px; margin-bottom: 8px; color: white; background-image: linear-gradient(135deg, midnightblue, teal, gold);">Çapraz ve üç renk</div>
<div style="padding: 24px; background-image: radial-gradient(circle, white, lightblue);">Merkezden dışa</div>

Bütün bunları background kısayoluyla da yazabilirsiniz: background: lightgray url('resim.png') no-repeat center;

background yazdığınızda belirtmediğiniz arka plan değerleri varsayılana döner. Tek bir renk için background: gold yazmak da geçerlidir ve çok yaygındır.

opacity: Saydamlık

opacity elemanın tamamını saydam yapar: arka planını, yazısını ve içindeki her şeyi. 0 görünmez, 1 tamamen opaktır. Yalnızca arka planı saydam yapmak istiyorsanız rgba kullanın.

<div style="background-image: linear-gradient(to right, gold, crimson); padding: 16px;">
  <p style="background-color: white; opacity: 0.4; padding: 8px;">opacity: yazı da soluklaştı</p>
  <p style="background-color: rgba(255, 255, 255, 0.4); padding: 8px;">rgba: yalnızca arka plan saydam</p>
</div>

display: Elemanın davranışı

Blok ve Satır İçi Elemanlar dersinde gördüğünüz davranışı display değiştirir:

• block Satırın tamamını kaplar, width ve height alır.
• inline Satırın içinde akar, width ve height almaz.
• inline-block Satırın içinde akar ama width ve height alır.
• none Eleman tamamen kaldırılır, yer de kaplamaz.

Bir önceki derste span etiketine neden genişlik verilemediğini böylece anlayabilirsiniz: span varsayılan olarak inline çalışır.

<p>
  <span style="width: 200px; background-color: lightblue;">inline: genişlik yok sayıldı</span>
</p>
<p>
  <span style="display: inline-block; width: 200px; background-color: lightgreen;">inline-block</span>
  <span style="display: inline-block; width: 100px; background-color: khaki;">yan yana</span>
</p>
<p>
  <span style="display: block; background-color: lightpink;">block: satırı kapladı</span>
</p>
<ul style="list-style-type: none; padding: 0;">
  <li style="display: inline-block; margin-right: 12px;">Yatay</li>
  <li style="display: inline-block; margin-right: 12px;">bir</li>
  <li style="display: inline-block;">menü</li>
</ul>

display değerini değiştirmek elemanın anlamını değiştirmez. span etiketine display: block yazmak onu paragraf yapmaz.

Resmi ortalamak

img varsayılan olarak satır içi çalışır, bu yüzden margin: 0 auto tek başına resmi ortalamaz. Önce display: block yazmanız gerekir.

<img src="baldiyetapanadam.png" alt="Örnek resim" style="display: block; margin: 0 auto; width: 200px;">

Gizlemenin üç yolu

• display: none Eleman yok olur, yerini diğerleri alır.
• visibility: hidden Eleman görünmez ama yeri boş kalır.
• opacity: 0 Eleman görünmez, yeri boş kalır ve tıklanabilir olmaya devam eder.

<p>Birinci satır</p>
<p style="display: none;">display: none</p>
<p>Üstte boşluk yok</p>
<p style="visibility: hidden;">visibility: hidden</p>
<p>Üstte bir paragraflık boşluk var</p>

overflow: Taşan içerik

İçerik kutuya sığmıyorsa ne olacağını belirler:

• visible Varsayılan. İçerik kutudan taşar.
• hidden Taşan kısım kesilir.
• scroll Her zaman kaydırma çubuğu gösterir.
• auto Yalnızca gerekirse kaydırma çubuğu gösterir.

<div style="height: 50px; width: 220px; border: 1px solid gray; margin-bottom: 60px; overflow: visible;">visible: Bu yazı kutuya sığmıyor ve kutunun altına doğru taşıyor. Kenarlığın dışına çıkan satırlara dikkat edin.</div>
<div style="height: 50px; width: 220px; border: 1px solid gray; margin-bottom: 8px; overflow: hidden;">hidden: Bu yazı kutuya sığmıyor ve taşan kısım kesiliyor. Bu satırları göremezsiniz.</div>
<div style="height: 50px; width: 220px; border: 1px solid gray; overflow: auto;">auto: Bu yazı kutuya sığmıyor, bu yüzden kutunun içinde kaydırabilirsiniz. Fare tekerleğiyle deneyin.</div>

Resimleri kutuya sığdırmak: object-fit

Bir img etiketine farklı oranda width ve height verirseniz resim bozulur. object-fit bunu önler:

• fill Varsayılan. Resim esner.
• cover Kutuyu doldurur, taşan kesilir.
• contain Resmin tamamı görünür.

<img src="baldiyetapanadam.png" alt="Örnek resim" style="width: 140px; height: 70px; background-color: lightgray;">
<img src="baldiyetapanadam.png" alt="Örnek resim" style="width: 140px; height: 70px; object-fit: cover; background-color: lightgray;">
<img src="baldiyetapanadam.png" alt="Örnek resim" style="width: 140px; height: 70px; object-fit: contain; background-color: lightgray;">

cursor ve filter

cursor fare imlecinin görünümünü değiştirir. Değerleri arasında pointer, not-allowed, help, move ve text vardır.

filter bir elemana görsel efekt uygular: grayscale(100%), blur(2px), brightness(150%), contrast(200%), sepia(100%).

<p><span style="cursor: help; border-bottom: 1px dotted gray;">Üzerine gelin: help</span></p>
<p><span style="cursor: not-allowed;">Üzerine gelin: not-allowed</span></p>
<img src="baldiyetapanadam.png" alt="Gri tonlu örnek resim" style="width: 100px; filter: grayscale(100%);">
<img src="baldiyetapanadam.png" alt="Bulanık örnek resim" style="width: 100px; filter: blur(2px);">

<div style="padding: 24px; color: white; background-image: linear-gradient(to right, teal, navy);">Yaz Şenliği</div>

<span style="display: inline-block; padding: 4px 12px; background-color: gold;">HTML</span>
<span style="display: inline-block; padding: 4px 12px; background-color: gold;">CSS</span>

Bu derste öğrendikleriniz

• background-image resim veya renk geçişi alır, background-size ve background-position yerleşimini belirler.
• opacity elemanın tamamını, rgba yalnızca o rengi saydam yapar.
• display elemanın blok mu satır içi mi davranacağını belirler.
• display: none yeri de kaldırır, visibility: hidden yeri korur.
• overflow, object-fit, cursor ve filter görünümün ince ayarlarıdır.