Resim Üzerine Yazı Yazma Kodu: Görsellerinizi Daha Etkili Hale Getirin

Görseller, web sitelerinin ve içeriklerin görsel cazibesini artıran önemli bir bileşenidir. Ancak, bazen bir resmi sadece göstermek yetmez, üzerine anlamlı bir yazı eklemek gerekebilir. İşte bu noktada, "Resim Üzerine Yazı Yazma Kodu" devreye girer. Bu kod sayesinde, görsellerinizi daha etkili ve açıklayıcı hale getirebilirsiniz.

Bu makalede, adım adım resim üzerine yazı yazma kodunu nasıl kullanabileceğinizi öğreneceksiniz. Hem HTML hem de CSS kullanarak resimlerinize metin eklemek, içeriklerinizin daha fazla anlam taşımasını sağlar. Okuyucularınızın görsellerinizin ne hakkında olduğunu hızlıca anlamasına yardımcı olabilirsiniz. Resimlerinizi daha çarpıcı ve bilgilendirici hale getirerek sitenizin etkisini artırın.

HTML ve CSS ile Resim Üzerine Yazı Yazma

Web sitenizdeki görselleri daha anlamlı hale getirmek ve ziyaretçilerinize daha fazla bilgi sunmak için resim üzerine yazı eklemek isteyebilirsiniz. Bu işlemi HTML ve CSS kodları kullanarak kolayca gerçekleştirebilirsiniz.

Adım 1: HTML Kodu ile Resmi Ekleyin Öncelikle, resminizi eklemek istediğiniz yere HTML kodu ile resmi ekleyin:

<div class="resim-kutusu"> <img src="resim-linki.jpg" alt="Açıklama" /> <div class="resim-yazi">Buraya Yazınız</div> </div> 

Adım 2: CSS ile Yazıyı Özelleştirin CSS kodu kullanarak yazının görünümünü özelleştirebilirsiniz:

.resim-kutusu { position: relative; display: inline-block; } .resim-yazi { position: absolute; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.7); color: #fff; padding: 5px 10px; font-size: 14px; } 

Bu kod örnekleriyle, görsellerinizi daha etkili hale getirebilirsiniz. Özelleştirilebilir CSS kodları sayesinde yazının rengini, boyutunu ve konumunu istediğiniz gibi ayarlayabilirsiniz.

Sonuç Resim üzerine yazı yazma kodu, görsellerinizi daha fazla bilgi ile donatmanın ve içeriklerinizi daha çekici hale getirmenin harika bir yoludur. HTML ve CSS kodlarıyla basitçe uygulayabileceğiniz bu yöntemle, web sitenizin görsel içerikleri daha etkili bir şekilde iletebilirsiniz.

Örnek

Açıklama

RESİM ÜZERİNE YAZI YAZ

İçerik ekle

Buton Ekle
Link Ekle


Örnek Kodlar

<style>
.resim-kutusu {
  position: relative;
  display: inline-block;
}

.resim-yazi {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 5px 10px;
  margin: 5%;
  font-size: 14px;
}</style>
<div class="resim-kutusu">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV9y0vqkDgvRE-334FkFsHIaFlWKpa84d6VXP2QsqeAyBixB2tNpiyEdFoeNTvmsokmF4IbtmRL6nVh-ri5KKQ4MTybDbQE5HUmNtaWllkLTL6srePjc3PtxhONJlT019WQrVmLbySL5Qp/s1600/havuz.jpg" alt="Açıklama"/>
<div class="resim-yazi">
  <strong><p>RESİM ÜZERİNE YAZI YAZ</p></strong>
<p>İçerik ekle</p>
<a href="#" rel="nofollow" target="_blank" class="button link">Buton Ekle</a><br/>
<a href="#" style="color:red;" target="_blank">Link Ekle</a>
</div>
</div>

1 Yorumlar

Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

  1. nereye saıl yerleştirileceğini biraz açıklasan iyi yapardın ama o zahmete girememişsin

    YanıtlaSil

Yorum Gönder

Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

Önceki Makale Sonraki Makale