Gimpci.Blogspot.Com: CSS İle Resmin Üzerine Yazı Yazma

İnternette yapılan her site, ziyaretçisine belli bir konuda bilgi sunmak, hizmet sağlamak için yapılmakta.Sunulan bilginin ziyaretçi tarafından anlaşılmasını sağlamak ve kolaylaştırmak için yapılabilecek en önemli unsur, resim ve yazıları birbirleri ile harmanlamak. Yapılan araştırmaların gösterdiği üzere birbirleri ile alakalı resim ve yazılar beraberce kişiye sunulduğunda öğrenme daha kolay gerçekleşmekte.

Bu ilkeden olsa gerek, haber içeriği sunan bütün sitelerde fotolar ile yazıların birbirleri ile harmanlanarak verildiğini görebiliriz.

Resimler le yazıları harmanlamanın bir yolu da, yazıyı resmin üzerine yazmaktır. Bunu, resim düzenleme programlarından biri ile de yapabilirsiniz ancak biz bu yazımızda, resmin üzerine CSS (javascript) ile yazıyı ekleyeceğiz.

HTML Kodları

Yazıyı resmin üzerine getirmek aslında çok kolay, html ile başlayalım:

<div id="arkaplan">
<div id="yazi"> Kapadokya, (Pers dilinde “Güzel Atlar Ülkesi” anlamına gelir). Bölge 60 milyon yıl önce; Erciyes, Hasandağı ve Güllüdağ’ın püskürttüğü lav ve küllerin oluşturduğu yumuşak tabakaların milyonlarca yıl boyunca yağmur ve rüzgar tarafından aşındırılmasıyla ortaya çıkmıştır. </div>
</div>

Yürüttüğümüz mantık şu şekilde, “arkaplan” id’li div etiketi, resmimizi arkaplan olarak tutacak, “yazi” id’li div etiketi ise, yazımızı resmin üzerinde istediğimiz yere yerleştirmemize yardımcı olacak.

CSS Kodları

CSS kodunda da işimiz yine hiç karmaşık değil, arkaplan id’li div etiketinin arkaplanına istediğimiz resmi koyacağız ve yazi id’li div etiketine biraz sitil vereceğiz:

#arkaplan {
               float:left;
               width:500px;
               height:345px;
               margin:5px 0px 0px 15px;
               background-image:url(urgupgoreme.jpg);
               background-repeat:no-repeat;
}
#yazi {
               position:relative;
               width:400px;
               height:90px;
               left: 0px;
               float:left;
               top:220px;
               filter:alpha(opacity=50);
              -moz-opacity:.50;
              opacity:.50;
              background-color:#000;
              color:#fff;
              font-size:11px;
              line-height:16px;
              font-family:Verdana, Arial, Helvetica, sans-serif;
              padding:10px;
}

#arkaplan için css kodu o kadar karmaşık değil, kendiliğinden anlaşılabilir durumda. #yazi bolumunde ise önemli olan noktalar şunlar:
- top:220px: yazı bölümünün üstten olan uzaklığı
- filter, -moz-opacity, opacity: arkaplanın saydamlığı

İşte, css kodu bu kadar!

Sonuç

Sonuç olarak ortaya böyle bir çalışma çıkıyor.

Css ile ilgili diğer yazılaramada göz atabilirsiniz: