CSS ile Şık Bildirimler

Web sayfanız için özel bildiri kutucukları hazırladınız mı? Cevabınız hayır ise doğru yerdesiniz.

Bugün 4 klasik uyarı için bildiri kutucuğu tasarlayacağız. Hata, uyarı, bilgi ve başarı bildirimleriniz artık daha şık ve kontrol edilebilir olacaklar.

Ekleyeceğimiz inline JavaScript kodları da bu kutucukların kapatılabilir olmasını sağlayacak. Tasarımı daha ilgi çekici hale getirmek için de CSS-transition kullanacağız.

Nasıl yapılır?

Uyarı pencerelerini blockquote elemanı üzerinden tasarlayacağız. İlk olarak genel tanımlamalarımızı yapalım. Biz font tercihimizi Open Sans’dan yana kullandık. O yüzden ilk olarak bu fontu Google Web Fonts‘dan çekelim.

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

Şimdi genel CSS tanımlamalarımızı ekleyelim.

blockquote
-webkit-transition: all 500ms ease-out ;
-moz-transition: all 500ms ease-out ;
-o-transition: all 500ms ease-out ;
transition: all 500ms ease-out ;
font:16px 'Open Sans';
padding:15px;

Ayrıca bildirim başlıklarımız ve kapatma düğmesini de ekleyelim.

blockquote spanfont-weight:600;
blockquote #closefloat:right; color:inherit; text-decoration:none;

Taslaklarımız hazır. Şimdi biraz daha detaylandıralım.

Bildiri 1 : Dikkat

CSS Kodları

blockquote#danger
background-color:tomato;
border-left:7px #dc3d21 solid;
color:white;

HTML Kodları

<blockquote id="danger">
<a id="close" title="Close" href="#" onClick="document.getElementById('danger').setAttribute('style','opacity:0; visibility:hidden;');">&times;</a>
<span>Dikkat!</span> Bu bir hata mesajıdır.
</blockquote>

Bildiri 2 : Uyarı

CSS Kodları

blockquote#warning
background-color:#ecdfb0;
border-left:7px #e5c693 solid;
color:#6b6d31;

HTML Kodları

<blockquote id="warning">
<a id="close" title="Close" href="#" onClick="document.getElementById('warning').setAttribute('style','opacity:0; visibility:hidden;');">&times;</a>
<span>Uyarı!</span> Bu bir uyarı mesajıdır.
</blockquote>

Bildiri 3 : Bilgi

CSS Kodları

blockquote#info
background-color:#bde9f7;
border-left:7px #8bdaf4 solid;
color:#3c7e94;

HTML Kodları

<blockquote id="info">
<a id="close" title="Close" href="#" onClick="document.getElementById('info').setAttribute('style','opacity:0; visibility:hidden;');">&times;</a>
<span>Bilgi!</span> Bu bir bilgi mesajıdır.
</blockquote>

Bildiri 4 : Başarı

CSS Kodları

blockquote#success
background-color:#cee0cf;
border-left:7px #8eb589 solid;
color:#296829;

HTML Kodları

<blockquote id="success">
<a id="close" title="Close" href="#" onClick="document.getElementById('success').setAttribute('style','opacity:0; visibility:hidden;');">&times;</a>
<span>Tebrikler!</span> Bu bir onay mesajıdır.
</blockquote>

Kapanış

CSS ve az biraz JavaScript ile bildiri kutucuklarını yeniden tasarlamak bu kadar basit!

Bir sonraki dersimizde görüşmek üzere, iyi çalışmalar.

CSS ile Şık Bildirimler