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 dosyamızda iconları yerleştirmek için kullanacağımız kodlar:
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
Benzer 42 Css Hilesi ve Örnekleri için buraya göz atmanızı tavsiye ederim.
