Benim gibi css işinin esasını öğrenmeye çalışanlar için gerçekten faydalı kodlar.
Kullanım alanlarından birisi de "İlgili Aramalar Eklentisi". Bu sayede eklentiyi düzenleyerek blog temanızla uyumlu hale getirebiliyorsunuz.
Bu konuda size 4 farklı stilde css kutucuğu göstereceğim siz dilerseniz farklı resimler ve kodları ile kutucukları değiştirebilirsiniz.
Html-css kodları, resimler ve demolar aşağıda, güle güle kullanın :)
CSS KODLARI
.tamamdir, .olmadi, .bilgi, .uyari {
background-repeat: no-repeat;
background-position: 10px center;
height: 25px;
text-transform: uppercase;
font-size: 11px;
line-height: 22px;
margin-bottom: 20px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 50px;,
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px
}
.tamamdir {
background-color: #EBF8D6;
border: 1px solid #A6DD88;
color: #555555;
background-image: url(http://4.bp.blogspot.com/-biFKm3cEbog/T2t-NmBILXI/AAAAAAAADKM/9Se6RGJXwTE/s1600/tamam.png);
-webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
-moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset
}
.olmadi {
background-color: #FFECE6;
border: 1px solid #FF936F;
color: #555555;
background-image: url(http://1.bp.blogspot.com/-qqVi6UlRvag/T2t-MYLzTBI/AAAAAAAADKE/7ry8ttmJcw8/s1600/olmadi.png);
-webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
-moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset
}
.bilgi {
background-color: #D3EEF1;
border: 1px solid #81CDD8;
color: #555555;
background-image: url(http://4.bp.blogspot.com/-Qxtxt1oiOnY/T2t-Lyf6-8I/AAAAAAAADJ8/Qx-RbCyWbVU/s1600/bilgi.png);
-webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
-moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset
}
.uyari {
background-color: #FFFBCC;
border: 1px solid #FFF35E;
color: #555555;
background-image: url(http://2.bp.blogspot.com/-hPx3l7bOuSA/T2t-OzqfIOI/AAAAAAAADKQ/Wh2QwnbOHek/s1600/uyari.png);
-webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
-moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset
}
HTML KODLARI
<div class="uyari">Bu bir uyarı kutusudur.</div>
<div class="olmadi">Bu bir hata bildiri kutusudur.</div>
<div class="bilgi">Bu bir bilgi kutusudur.</div>
<div class="tamamdir">Bu bir ne yazacağımı bilemedim kutusudur.</div>
Güle güle kullanıın, kullandıkça beni hatırlayıın :)
Hiç yorum yok:
Yorum Gönder