Tasarımcı’nın Tasarıları

CSS ile 3 Resimli Yuvarlak Köşeli Kutular

Eylül2

Merhaba,

Css ile yuvarlak köşeli kutular yapmanın yöntemleri birden fazla. . Ö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:

<pre class="sh_php sh_sourceCode"><span class="sh_symbol">&lt;!</span><span class="sh_variable">DOCTYPE</span> <span class="sh_variable">html</span> <span class="sh_variable">PUBLIC</span> <span class="sh_string">"-//W3C//DTD XHTML 1.0 Transitional//EN"</span> <span class="sh_string">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span class="sh_symbol">&gt;</span>
<span class="sh_symbol">&lt;</span><span class="sh_variable">html</span> <span class="sh_variable">xmlns</span><span class="sh_symbol">=</span><span class="sh_string">"http://www.w3.org/1999/xhtml"</span><span class="sh_symbol">&gt;</span>
<span class="sh_symbol">&lt;</span><span class="sh_variable">head</span><span class="sh_symbol">&gt;</span>
<span class="sh_symbol">&lt;</span><span class="sh_variable">meta</span> <span class="sh_variable">http</span><span class="sh_symbol">-</span><span class="sh_variable">equiv</span><span class="sh_symbol">=</span><span class="sh_string">"Content-Type"</span> <span class="sh_variable">content</span><span class="sh_symbol">=</span><span class="sh_string">"text/html; charset=iso-8859-9"</span> <span class="sh_symbol">/&gt;</span>
<span class="sh_symbol">&lt;</span><span class="sh_variable">title</span><span class="sh_symbol">&gt;</span><span class="sh_number">3</span> <span class="sh_variable">Resimle</span> <span class="sh_variable">Yuvarlak</span> <span class="sh_variable">K</span>öş<span class="sh_variable">eli</span> <span class="sh_variable">Kutular</span><span class="sh_symbol">&lt;/</span><span class="sh_variable">title</span><span class="sh_symbol">&gt;</span>
<span class="sh_symbol">&lt;</span><span class="sh_variable">style</span> <span class="sh_variable">type</span><span class="sh_symbol">=</span><span class="sh_string">"text/css"</span><span class="sh_symbol">&gt;</span>
 
	<span class="sh_variable">body</span> <span class="sh_cbracket">{</span>
	<span class="sh_variable">background</span><span class="sh_symbol">:</span><span class="sh_comment">#000000;</span>
	<span class="sh_cbracket">}</span>
 
	<span class="sh_symbol">.</span><span class="sh_variable">ust</span> <span class="sh_cbracket">{</span>
	<span class="sh_variable">height</span><span class="sh_symbol">:</span> 10<span class="sh_variable">px</span><span class="sh_symbol">;</span>
	<span class="sh_variable">width</span><span class="sh_symbol">:</span> 800<span class="sh_variable">px</span><span class="sh_symbol">;</span>
	<span class="sh_variable">background</span><span class="sh_symbol">:</span> <span class="sh_function">url</span><span class="sh_symbol">(</span><span class="sh_variable">ust</span><span class="sh_symbol">.</span><span class="sh_variable">gif</span><span class="sh_symbol">)</span> <span class="sh_variable">no</span><span class="sh_symbol">-</span><span class="sh_variable">repeat</span><span class="sh_symbol">;</span>
	<span class="sh_variable">text</span><span class="sh_symbol">-</span><span class="sh_variable">align</span><span class="sh_symbol">:</span><span class="sh_variable">center</span><span class="sh_symbol">;</span>
	<span class="sh_variable">margin</span><span class="sh_symbol">:</span><span class="sh_variable">auto</span><span class="sh_symbol">;</span>
	<span class="sh_cbracket">}</span>
 
	<span class="sh_symbol">.</span><span class="sh_variable">ic</span> <span class="sh_cbracket">{</span>
	<span class="sh_variable">width</span><span class="sh_symbol">:</span> 800<span class="sh_variable">px</span><span class="sh_symbol">;</span>
	<span class="sh_variable">background</span><span class="sh_symbol">:</span> <span class="sh_function">url</span><span class="sh_symbol">(</span><span class="sh_variable">orta</span><span class="sh_symbol">.</span><span class="sh_variable">gif</span><span class="sh_symbol">)</span> <span class="sh_variable">repeat</span><span class="sh_symbol">-</span><span class="sh_variable">y</span><span class="sh_symbol">;</span>
	<span class="sh_variable">text</span><span class="sh_symbol">-</span><span class="sh_variable">align</span><span class="sh_symbol">:</span><span class="sh_variable">center</span><span class="sh_symbol">;</span>
	<span class="sh_variable">margin</span><span class="sh_symbol">:</span><span class="sh_variable">auto</span><span class="sh_symbol">;</span>
	<span class="sh_cbracket">}</span>
 
	<span class="sh_symbol">.</span><span class="sh_variable">alt</span> <span class="sh_cbracket">{</span>
	<span class="sh_variable">height</span><span class="sh_symbol">:</span> 10<span class="sh_variable">px</span><span class="sh_symbol">;</span>
	<span class="sh_variable">width</span><span class="sh_symbol">:</span> 800<span class="sh_variable">px</span><span class="sh_symbol">;</span>
	<span class="sh_variable">background</span><span class="sh_symbol">:</span> <span class="sh_function">url</span><span class="sh_symbol">(</span><span class="sh_variable">alt</span><span class="sh_symbol">.</span><span class="sh_variable">gif</span><span class="sh_symbol">)</span> <span class="sh_variable">no</span><span class="sh_symbol">-</span><span class="sh_variable">repeat</span><span class="sh_symbol">;</span>
	<span class="sh_variable">text</span><span class="sh_symbol">-</span><span class="sh_variable">align</span><span class="sh_symbol">:</span><span class="sh_variable">center</span><span class="sh_symbol">;</span>
	<span class="sh_variable">margin</span><span class="sh_symbol">:</span><span class="sh_variable">auto</span><span class="sh_symbol">;</span>
	<span class="sh_cbracket">}</span>
 
<span class="sh_symbol">&lt;/</span><span class="sh_variable">style</span><span class="sh_symbol">&gt;</span>
<span class="sh_symbol">&lt;/</span><span class="sh_variable">head</span><span class="sh_symbol">&gt;</span>
<span class="sh_symbol">&lt;</span><span class="sh_variable">body</span><span class="sh_symbol">&gt;</span>
 
<span class="sh_symbol">&lt;</span><span class="sh_variable">div</span> <span class="sh_keyword">class</span><span class="sh_symbol">=</span><span class="sh_string">"ust"</span><span class="sh_symbol">&gt;&lt;/</span><span class="sh_variable">div</span><span class="sh_symbol">&gt;</span>
 
<span class="sh_symbol">&lt;</span><span class="sh_variable">div</span> <span class="sh_keyword">class</span><span class="sh_symbol">=</span><span class="sh_string">"ic"</span><span class="sh_symbol">&gt;</span>
İç<span class="sh_variable">erik</span> <span class="sh_variable">buraya</span>
<span class="sh_symbol">&lt;/</span><span class="sh_variable">div</span><span class="sh_symbol">&gt;</span>
 
<span class="sh_symbol">&lt;</span><span class="sh_variable">div</span> <span class="sh_keyword">class</span><span class="sh_symbol">=</span><span class="sh_string">"alt"</span><span class="sh_symbol">&gt;&lt;/</span><span class="sh_variable">div</span><span class="sh_symbol">&gt;</span>
 
<span class="sh_symbol">&lt;/</span><span class="sh_variable">body</span><span class="sh_symbol">&gt;</span>
<span class="sh_symbol">&lt;/</span><span class="sh_variable">html</span><span class="sh_symbol">&gt;</span>

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…

Alıntı’nın Kaynağı

CSS

Blogumuzdaki Son Konulardan Haberdar Olmak İçin RSS Servisimize Abone Olabilirsiniz
Blogumuzda Yayınlanan Son Konuların Mailinize Gelmesini İstiyorsanız Mail Servisimize Abone Olabilirsiniz

Yazar ismi : Gues
Yazarın Websitesi : http://www.guesworld.com
Yazarın E-posta Adresi : info@guesworld.com
Yazarın Biyografisi : Adım utku 15 yaşındayım grafikle uğraşıyorum şuanda photoshop , css , html biliyorum ileriki zamanlarda After effects , 3dsmax , Illustrator , Flash programlarını daha detaylı şekilde inceleyerek öğrenmek istiyorum :) Guesworld.Com blogum ilede kullanıcılara orjinal bilgiler vermek istiyorum.. Görüşmek Üzere ;)

Bu yaziyi paylasin.