CSS ile Şık Bildirimler

0 yorum

css bildiriler 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.
ornek goruntule CSS ile Şık Bildirimler

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 span{font-weight:600;}
blockquote #close{float:rightcolor:inherit; text-decoration:none;}
Taslaklarımız hazır. Şimdi biraz daha detaylandıralım.

Bildiri 1 : Dikkat

css bildiriler 1 CSS ile Şık Bildirimler
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 bildiriler 2 CSS ile Şık Bildirimler
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 bildiriler 3 CSS ile Şık Bildirimler
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 bildiriler 4 CSS ile Şık Bildirimler
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.

Adobewordpress
Bu Bilgiyi Paylaş :

Yorum Gönder

Sitemizde sizlere ilginç gelebileceğine inandığımız her konuda yazılar ve bilgiler paylaşıyoruz. Sitemizde bulabilecekleriniz şöyle:Otomobil,sağlık,blog,haber,backlink,site ekle,banner ekle,html kodlar,dizi,film,ilginç bloglar,blogger için temalar,internet için bilgiler,siyasi görüşler,anketler,yazılımlar,ilginç siteler,ilginç insanlar,mesleklerle ilgili ayrıntılar,forumlar,fikir paylaşımları,yorumlar
 
Siteler: Oyun58 | Kadın Ve Yaşam | Dizi İzle
Copyright © 2011. Bilgi Blog - Tüm Hakları Saklıdır
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger