HTML ve CSS Kullanılarak Hazırlanmış 4 Bildirim Mesajı | Web Tasarım
Bildirim Formlarımızı Blockquote üzerinden tasarlayacağız.
CSS Kodlarımız:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
-webkit-transition: all 500ms ease-out ; |
-moz-transition: all 500ms ease-out ; |
-o-transition: all 500ms ease-out ; |
transition: all 500ms ease-out ; |
}
blockquote span{font-weight:600;} |
blockquote #close{float:right; color:inherit; text-decoration:none;}
Evet. Genel CSSlerimizi belirttik. Şimdi Gelelim Önizleme ve HTML Kodlarına.
Bildirim 1 ; Dikkat.
CSS Kodlarımız :
border-left:7px #dc3d21 solid; |
}
HTML Kodumuz :
<a id="close" title="Close" href="#"onClick="document.getElementById('danger').setAttribute('style','opacity:0; visibility:hidden;');">×</a> |
<span>Dikkat!</span> Bu bir hata mesajıdır. |
</blockquote>
Bildiri 2 : Uyarı
CSS Kodları
background-color:#ecdfb0; |
border-left:7px #e5c693 solid; |
HTML Kodları
<blockquote id="warning"> |
<a id="close" title="Close" href="#"onClick="document.getElementById('warning').setAttribute('style','opacity:0; visibility:hidden;');">×</a> |
<span>Uyarı!</span> Bu bir uyarı mesajıdır. |
Bildiri 3 : Bilgi
CSS Kodları
background-color:#bde9f7; |
border-left:7px #8bdaf4 solid; |
HTML Kodları
<a id="close" title="Close" href="#"onClick="document.getElementById('info').setAttribute('style','opacity:0; visibility:hidden;');">×</a> |
<span>Bilgi!</span> Bu bir bilgi mesajıdır. |
Bildiri 4 : Başarı
CSS Kodları
background-color:#cee0cf; |
border-left:7px #8eb589 solid; |
HTML Kodları
<blockquote id="success"> |
<a id="close" title="Close" href="#"onClick="document.getElementById('success').setAttribute('style','opacity:0; visibility:hidden;');">×</a> |
<span>Tebrikler!</span> Bu bir onay mesajıdır. |
|
|
|
|
|
![MD]()
MD Hakkında -
Bu bir blog, internet camiasında açılmış pek çok blogtan kendini ayıran tek yönü ise okurlara güncel haberler, olaylar hakkında bilgiler vermek samimi bir anlatım ile okurlarına "Nasıl Yapılır?" içeriğinde makaleler paylaşmak ve bunun gibi pek çok içeriği reklamsız ve yalın bir anlatımlarla sizlere sunmak.
