Tiesto

Tiesto

WFN Üye
Konular
589
Mesajlar
589
Çözüm
0
Ticaret Puanı
0
Üyelik
23 Gün
Konum
Antalya
Web Sitesi
Var
Alanı
Domain Uzmanı
1/1
Konu sahibi
İlk paragrafta ana yanıtı, izlenecek yolu ve ulaşılabilecek sonucu doğrudan ver. Konunun önemini öven genel açılış veya bu makalede anlatacağız vaadiyle başlama. Okuru asıl bilgiye ulaşmak için gereksiz paragraflar okumaya zorlama.

Görselin üzerine metin yerleştirmenin temel yöntemi​


Görseli ve metni aynı kapsayıcı öğenin içine alın. Kapsayıcıya position: relative, metne ise position: absolute verin. Böylece metin, sayfanın tamamına göre değil, kapsayıcının konumuna göre yerleşir. Aşağıdaki örnekte metin görselin tam ortasında görünür:

HTML: 
<div class="gorsel-karti">
    <img src="manzara.jpg" alt="Dağ manzarası">
    <div class="gorsel-metni">Dağların sessizliği</div>
</div>

<style>
.gorsel-karti {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.gorsel-karti img {
    display: block;
    width: 100%;
    height: auto;
}

.gorsel-metni {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: clamp(1.25rem, 4vw, 3rem);
    font-weight: 700;
    text-align: center;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .7);
}
</style>

Bu kodda gorsel-karti sınıfı konum referansıdır. top: 50% ve left: 50% metnin sol üst köşesini merkeze taşır; transform: translate(-50%, -50%) ise metnin kendi genişlik ve yüksekliğinin yarısını geri alarak metni gerçekten ortalar. Sonuç olarak görselin boyutu değişse bile metin kapsayıcının merkezinde kalır.

Görselin üzerine koyu veya açık metni okunabilir yapmak​


Metin görselin açık ve koyu bölgeleri üzerinde aynı anda görünebileceği için yalnızca yazı rengini değiştirmek yeterli olmayabilir. text-shadow kısa metinlerde okunabilirliği artırır. Daha güçlü bir çözüm için görselin üzerine yarı saydam bir katman ekleyebilirsiniz:

HTML: 
<div class="gorsel-karti">
    <img src="manzara.jpg" alt="Dağ manzarası">
    <div class="gorsel-karti__katman"></div>
    <div class="gorsel-metni">Doğayla iç içe</div>
</div>

<style>
.gorsel-karti {
    position: relative;
    overflow: hidden;
    max-width: 800px;
    margin: 0 auto;
}

.gorsel-karti img {
    display: block;
    width: 100%;
    height: auto;
}

.gorsel-karti__katman {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .35);
}

.gorsel-metni {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    width: 90%;
    color: #fff;
    font-size: clamp(1.25rem, 4vw, 3rem);
    font-weight: 700;
    text-align: center;
}
</style>

Burada inset: 0, katmanı kapsayıcının dört kenarına tamamen yayar. Metnin katmanın üzerinde kalması için z-index: 1 kullanılır. Katmanın koyuluğunu rgba içindeki son değerle değiştirebilirsiniz: .20 daha hafif, .60 daha koyu bir sonuç verir.

Metni üst, alt veya belirli bir köşeye yerleştirme​


Metnin merkezde olması gerekmiyorsa top, right, bottom ve left özelliklerinden uygun olanları kullanın. Örneğin sağ alt köşeye yerleştirmek için:

CSS: 
.gorsel-metni {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .7);
}

Bu kullanımda top ve left vermeniz gerekmez. Metin kapsayıcının sağ ve alt kenarlarından 1rem uzaklıkta görünür. Sol üst köşe için top: 1rem; left: 1rem, üst orta için ise top: 1rem; left: 50%; transform: translateX(-50%) kullanabilirsiniz.

Responsive görünümde dikkat edilmesi gerekenler​


Görselin genişliğini width: 100% ve yüksekliğini height: auto yapmak, görselin kapsayıcıya uyum sağlamasını sağlar. Metnin taşmaması için genişliği belirlemek ve yazı boyutunu clamp() ile sınırlandırmak yararlıdır. Uzun metinlerde width: 90% gibi bir değer kullanarak yazının kenarlara yapışmasını önleyin.

Kapsayıcıya position: relative verilmezse mutlak konumlandırılmış metin, beklediğiniz görseli değil başka bir üst öğeyi veya sayfa alanını referans alabilir. Metin tamamen kayboluyorsa katmanın altında kalmış olabilir; bu durumda metne uygun bir z-index değeri verin ve kapsayıcıda konumlandırma bağlamının bulunduğunu kontrol edin.

Görsel yalnızca dekoratifse metni CSS ile background-image olarak eklemek mümkün olsa da, içerik taşıyan görsellerde img kullanıp anlamlı bir alt metni sağlamak daha uygundur. CSS ile yerleştirilen metin görselin içine yazılmaz; HTML içindeki ayrı bir metin öğesi olarak görselin üstünde gösterilir.
 

Sende şimdi bize katılmak ister misin?

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol
Foruma git ?

Bu konuyu görüntüleyen kullanıcılar

Bu konuyu şu anda görüntüleyen üye bulunmuyor.
Robotlar:
  • Anthropic
Toplam: 1 (Üye: 0, misafir: 0, robot: 1)