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 by Hakan
Categories: Web Tasarımı | Tags: , , , | 1 comment

One Comment

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

Leave a Reply

Required fields are marked *