- engindeniz.net - http://www.engindeniz.net/v3.0 -

CSS ile Mesaj Kutuları Hazırlamak

Bir süredir çeşitli forumlarda CSS mesaj kutuları yapımı ile ilgili sorulara rastlıyorum.

Arşivimdeki CSS ile hazırlanmış kutu modellerini buradan paylaşmak ve konu ile ilgili ufak bir bilgilendirme yazısı eklemek istedim. Umarım yararlı olur.

Önce CSS ile kutu tasarlamada temel bilgileri verelim.

CSS ile kutu yaparken, birkaç CSS komutunun ne anlama geldiğini bilmemiz gerekir. Aşağıda, katman olarak komutları ve kısa açıklamalarını belirttim.

Kutu içi: İstediğimiz içerikle ilgili yazı, resim vb.,
margin: genel olarak kutunun hizalamasında kullanılabilir,sayfa ve çevresindeki nesneler  arasında boşluk eklenmesini sağlar. Görünmezdir.
border: table’daki kullanımla aynıdır. Çerçeve oluşturmak için kullanılır
rengini, kalındığını, şeklini değiştirebiliriz.
padding : Margin ile aynı şekilde çalışır,ancak kutunun içi ile border arasında boşluklar oluşturabilirsiniz.

temel olarak bir kutu bu katmanlardan oluşabilir
bu örnekten yola çıkarak küçük bir kod deneyelim


Sayfanın üst kısmı
<div style="border: 10px solid ;
width: 300px;
margin-left: 25px;
margin-top: 25px;
padding-left: 15px"> test yazısı</div>

Ekran Çıktısı:

“Sayfanın üst kısmı” yazısından sonra siyah çerveye kadar olan boşluk ve siyah çerçevenin sol tarafındaki boşluk Margin-top ve margin-left ile 25 pixel olarak atandı.  Çervevenin içindeki sol boşluk ise padding-left ile atandı.
aslında görüldüğü gibi çok karmaşık değil. sadece biraz pratik ile kolayca CSS ile kutu yapmayı kavrayabilirsiniz.

Şimdi konumuzun başlığı olan mesaj kutuları ile ilgili örnekleri vereyim.

buradaki örnekleri online görmek istiyorsanız.  Aşağıdaki linkleri kullanabilirsiniz
Örnek 1 [1]
Örnek 2 [2]

zip olarak kaydetmek istiyorsanız

buraya basınız. [3]

(Kutu modellemeleri bana ait değildir, Zaman içerisinde gezdiğim sitelerde karşılaştığım modellerden oluşmaktadır. Adresleri elimde olmadığından kaynak olarak link veremedim.)

Be Sociable, Share!
  • [4]
  • [5]
  • [6]
  • [7]