CSS ile mesaj kutuları

CSS mesaj kutuları, web sitenize gelen ziyaretçilerin dikkatini belirlediğiniz özel notlara çekmek istediğinizde oldukça faydalı oluyor. Arka plan rengi, vermek istediğiniz mesajı özetleyen bir simge ve bir kaç CSS kodu ile hazırlaması oldukça kolay.

Bu yazıda bilgi, uyarı, onay ve hata mesajı olmak üzere toplam 4 adet mesaj kutusu tasarımına örnek vereceğim. Siz de kendi ihtiyacınıza yönelik tasarımlar geliştirebilirsiniz.

CSS mesaj kutuları;

Mesajınız başarılı bir şekilde gönderildi.
Veri kaybı yaşamamak için başvurunuzu belirli aralıklarla kaydetmeyi unutmayın.
Başvurular ekte sunulan formlar doldurularak yapılmalıdır. Forma uygun olarak yapılmayan veya eksik doldurulan başvurular kabul edilmeyecektir.
Hatalı bir işlem yaptınız. Geriye dönüp kontrol ediniz.

Bu tasarımları nasıl yapabileceğimizi kısaca özetleyelim. Aşağıda bulunan görselleri bilgisayarınıza kaydettikten sonra verilen CSS ve HTML kodlarını yerleştirerek işlemi tamamlayabilirsiniz. Örneğimizde görselleri “images” klasörü içerisinde barındırıyoruz, bu noktaya dikkat etmelisiniz.

Görseller

Kutuların tasarımı için kullanılan görseller aşağıda, resimlere sağ tuş tıklayarak kaydedebilir ya da bu linki tıklayarak indirebilirsiniz.

HTML Kodları

<div class="success">
    <span>Mesajınız başarılı bir şekilde gönderildi.</span>
</div>

<div class="warning">
    <span>Veri kaybı yaşamamak için başvurunuzu belirli aralıklarla kaydetmeyi unutmayın.</span>
</div>

<div class="info">
    <span>Başvurular ekte sunulan formlar doldurularak yapılmalıdır. Forma uygun olarak yapılmayan veya eksik doldurulan başvurular kabul edilmeyecektir.</span>
</div>

<div class="error">
    <span>Hatalı bir işlem yaptınız. Geriye dönüp kontrol ediniz.</span>
</div>

CSS Kodları

.warning, .error, .info, .success {
    padding: 20px 20px 20px 40px;
    margin-bottom: 15px;
    border-style: solid;
    border-width: 1px;
    background-position: 10px 10px;
    background-repeat: no-repeat;
}

.warning {
    background-color: #f8fad5;
    background-image: url(images/warning.png);
    border-color: #e5d35b;
}

.error {
    background-color: #f5dfdf;
    background-image: url(images/error.png);
    border-color: #ce9e9e;
}

.info {
    background-color: #dfeff5;
    background-image: url(images/info.png);
    border-color: #9ebcce;
}

.success {
    background-color: #e8f5df;
    background-image: url(images/success.png);
    border-color: #9ece9e;
}

Kaynak: http://launchspacemedia.com/css-message-boxes/

19. Ocak 2014 - Yazar: Hakan Yıldırım
Kategori: Web Tasarımı | Etiketler: , , , | 1 yorum

Yorum

  1. http:www.havasokulu.com adresinde kullandım css mesaj kutularını

Yorum Yaz

Gerekli alanlar * ile işaretlenmiş.