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'> 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; } 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 : blockquote#danger{ background-color:tomato; border-left:7px #dc3d21 solid; color:white; } HTML Kodumuz :  <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>