26 Kasım 2015 Perşembe

HTML ve CSS Kullanılarak Hazırlanmış 4 Bildirim Mesajı | Web Tasarım

By kadir 08:42 , Leave a Comment





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-bildiriler-2
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 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 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>

0 yorum:

Yorum Gönder