CSS ile resim üzerine yazı ekleme

17 / Ağustos / 2008 Author

İsa Engiz

Genel, javascript Tags

css, featured, galeri, javascript, resim Yorumlar

6 Yorum Yapilmis.

İnternette yapılan her site, ziyaretçisine belli bir konuda bilgi sunmak, hizmet sağlamak için yapılmakta. (kimileri sundukları bu bilgilerden para kazanmakta, kimileri ise kazanmamakta ama konumuz bu değil!) 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. Uygulamanın canlı örneğine buradan göz atabilir veya dosyaları buradan indirebilirsiniz.

HTML

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

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ç

Resim üzerine yazı eklemek için yapmanız gerekenler bu kadar. Aslında gördüğünüz gibi yaptığımız şey, resmin üzerine yazı eklemek değil de, resmi yazının altına eklemek! Artık resimler ile yazıları daha iyi harmanlayarak ziyaretçiler üzerinde daha etkili olabilirsiniz!

Not: uygulamanın canlı haline buradan erişebilir veya dosyaları buradan indiribilirsiniz.

- Bu blogda yer alan yazıları RSS ile takip edebilirsiniz. RSS aboneliği için tıklayın.

- Ya da bu blogda yer alan bütün yazıları içindekiler sayfasında görüntüleyebilirsiniz. Tıklayın!