CSS ile 3 Resimli Yuvarlak Köşeli Kutular

Önemli Siteler

Anasayfa » CSS (77 ders)

CSS ile 3 Resimli Yuvarlak Köşeli Kutular

Yazar: Emir Savranoğulları
Eklenme: 12.08.2008 Okunma: 2596 Puan: 3.2 Seviyesi: Başlangıç

Merhaba,

Css ile yuvarlak köşeli kutular yapmanın yöntemleri birden fazla. Daha önce 4 tane resimle esnek kutular yapmayı anlatmıştım. Bu derste ise 3 resimle sabit genişlikli kutular yapmayı anlatacağım. Öncelikle 3 tane, bu şekillerde resimlere ihtiyacımız var:

Bunlar benim Photoshop'da 800px genişlik için hazırladığım resimlerin nasıl hazırlandığını görmek isterseniz PSD'yi buraya tıklayarak indirebilirsiniz.

Şimdi de örnek sayfamızın kodlarını verelim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>3 Resimle Yuvarlak Köşeli Kutular</title>
<style type="text/css">

	body {
	background:#000000;
	}

	.ust {
	height: 10px;
	width: 800px;
	background: url(ust.gif) no-repeat;
	text-align:center;
	margin:auto;
	}

	.ic {
	width: 800px;
	background: url(orta.gif) repeat-y;
	text-align:center;
	margin:auto;
	}
	
	.alt {
	height: 10px;
	width: 800px;
	background: url(alt.gif) no-repeat;
	text-align:center;
	margin:auto;
	}

</style>
</head>
<body>

<div class="ust"></div>

<div class="ic">
İçerik buraya
</div>

<div class="alt"></div>

</body>
</html>

Sayfamla resimlerim aynı dizinde olduğu için url'leri direkt resim adları olarak verdim. Kendinize göre düzenleyebilirsiniz. Sayfanızın içeriğini "İçerik buraya" yazan kısma koyun. Ust ve alt divlerinin arasına hiçbirşey koymayın çünkü sayfanın kaymasına yol açabilir.

Hoşçakalın...

"CSS ile 3 Resimli Yuvarlak Köşeli Kutular" dersi için 4 yorum var

26.08.2008

streetw1se diyor ki:

çok güzel bir anlatım fakat kaynak dosyayıda nasıl hazırladığını anlatan bi kısım yapsaydın çok daha faydalı olurdu bence hazır şeyler beklemektense kendileri yaparlardı bence..

19.10.2008

cannurbey diyor ki:

teşekkürler çok güzel bir yazı, işime yarayacak bu

13.11.2008

KBNB diyor ki:

PSD dosyası silinmiş. Yenidne eklemeniz mümkün mü?

04.01.2009

yilmaz_ars diyor ki:

Öncelikle paylaşım için teşekkürler. Benim bir sıkıntım var. Bu oval köşeli kutuların sabit genişliği var. Ben kutuların duruma göre boyutlarının değişmesini istersem nasıl bir şey yapmam gerekir. O zaman Köşeler için ayrı orta kısımlar için ayrı resimler hazırlayıp (örneğin üst kısmı) 3 parçada mı hazırlamam gerekir. Yada daha kısa bir yolu varmıdır? Şimdiden tşkkrlr.

BU DERSE YORUM EKLEYİN

Üye olmadan yorum ekleyemezsiniz !

UYARI: SANALKURS.net'te yer alan materyaller ile ilgili her türlü sorumluluk hazırlayan veya gönderene aittir. Yazarlar, gönderdikleri makale ve derslerle başkalarını yanıltıcı bilgi veremezler. SANALKURS.net bilgilerin kullanımı sonucunda doğacak hata ve zararlardan sorumlu tutulamaz. SANALKURS.net'te yer alan bir makale link vermek ve kaynak göstermek şartıyla başka bir sitede yayınlanabilir. SANALKURS.net kullanıcıları ve üyeleri, üçüncü kişilerin telif hakkı sahibi bulunduğu hiçbir yazı, fotoğraf, resim vb. materyal ve ürünü kullanamazlar. SANALKURS.net kullanıcı ve yazarlarının, üçüncü kişilerin telif hakkı sahibi olduğu yazı, resim vb. ürünleri izinsiz kullanması durumunda, her türlü hukuki ve cezai sorumluluk kendilerine aittir.

İSTATİSTİKLER
	ÇEVRİMİÇİ 170 Ziyaretçi, 13 Üye ramones1982, sanalusta, Keremel, s-R-c, Charisma_47, ertughaskan, deliler, hacoban, kerasus, mocaco3, siracel, BuRRaK, mhmt35 Bugün: 611, Dün: 10154, Bu Ay: 20978, Toplam Ziyaret: 7226790, Toplam Üye: 216260, Son Üye: nur_cihan Yazılı Dersler: 2459, Video Dersler: 407, Toplam Yazar: 64, Toplam Dosya: 53, Toplam Link: 26

ana sayfa | künye | forum | iletişim