Online Takip

css ile message box örneği

Posted on: 09 Şub 2009

css message box
css message box

Css ile (message box) mesaj kutularını bilmeyen yoktur , bu örnekte mesaj kutularını biçimlendirmeyi öğreneceksiniz.
kodlar hakkında kısa bir bilgi;

Clean message box (mesaj kutusunu temizlemek için bir tuş oluşturalım )

…bir DIV layer içerisinde bir kaç text kodu ile birlikte aşağıdaki gibi CSS kodları kullanılır:

.clean-gray{
border:solid 1px #DEDEDE;
background:#EFEFEF;
color:#222222;
padding:4px;
text-align:center;
}

Mesaj kutularımızı oluşturduktan sonra onları iconlaştırabiliriz, nasıl mı? Öncelikle küçük iconlara ihtiyacımız var, icon packleri buradan indirebilirsiniz. Bu küçük hoş iconlar mesaj kutularımızın sol köşelerine yerleştirilecek.

css message box icons
css message box icons

css dosyamızda iconları yerleştirmek için kullanacağımız kodlar:

mesaj iconları
mesaj iconları

.icon-heart{
border:solid 1px #DEDEDE;
background:#FFFFCC url(img/icon-heart.png) 8px 6px no-repeat;
color:#222222;
padding:4px;
text-align:center;
}

yukarıdaki gibi olacaktır… Backround için şeffaf renkler seçebilirsiniz. bir kaç css hilesi ile cursor mesaj kutunuzun üzerine geldiğinde iconların değişerek ortaya hoş bir tasarımın çıktığını göreceksiniz. Yazıyı sizler için türkçeleştirerek sunmaya çalıştım, detaylar için örneğin kaynağına bakabilrisiniz. Örnek kodlarını buradan indirebilirsiniz.

42 css hilesi ve örnekleri

Kaynak

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s

Web Tasarım

Oto Galeri Portalı = 200 $

Emlak Portalı = 200 $

Site Kurucu = 100 $

E Ticaret Sitesi = 250 $

İlan Sitesi = 200 $

Haber Portalı = 350 $

Arkadaşlık Sitesi = 200 $

E Katalog = 200 $

Flash Site Kurucu = 200 $

Kategoriler

Kategoriler

Takvim

Şubat 2009
P S Ç P C C P
« Oca   Mar »
 1
2345678
9101112131415
16171819202122
232425262728  

Arşiv

Blog İstatistikleri

  • 16,113 kişi

Popüler Yazılar

RSS Bay Bedava

  • Bir hata oluştu; besleme kapalı gibi görünüyor. Lütfen daha sonra tekrar deneyin.

RSS Bildirgec.org

  • Bir hata oluştu; besleme kapalı gibi görünüyor. Lütfen daha sonra tekrar deneyin.

RSS InternetHaber.com

  • Bir hata oluştu; besleme kapalı gibi görünüyor. Lütfen daha sonra tekrar deneyin.

Toplistler

News & Media Blogs - BlogCatalog Blog Directory
%d blogcu bunu beğendi: