hibycocuk
hibycocuk
cssshinymessageboxes
Css shiny message boxes
Yazar: Emre Çördükler | Yayın Tarihi: 07 Şubat 2011 | Yorum Kategori: Css Htm jQuery Menü
Htm
<div class="infosidebox">
<div class="infoboxhead">
<h2>
<div class="aa"><img src="https://img.webme.com/pic/h/hibycocuk/info.png" width="48" height="48" /></div>
<div class="bb">lorem ipsum dolar sit amet</div>
</h2>
</div>
<div class="infoboxbody">
<p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <a class="info" href="#">eiusmod</a> tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam
</p>
</div>
</div>
<!-- warning block -->
<div class="warningsidebox">
<div class="warningboxhead">
<h2>
<div class="aa"><img src="https://img.webme.com/pic/h/hibycocuk/warning.png" width="48" height="48" /></div>
<div class="bb">lorem ipsum dolar sit amet</div>
</h2>
</div>
<div class="warningboxbody">
<p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <a class="warning" href="#">eiusmod</a> tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam
</p>
</div>
</div>
<!-- accept block -->
<div class="acceptsidebox">
<div class="acceptboxhead">
<h2>
<div class="aa"><img src="https://img.webme.com/pic/h/hibycocuk/accept.png" width="48" height="48" /></div>
<div class="bb">lorem ipsum dolar sit amet</div>
</h2>
</div>
<div class="acceptboxbody">
<p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <a class="accept" href="#">eiusmod</a> tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam
</p>
</div>
</div>
<!-- delete block -->
<div class="deletesidebox">
<div class="deleteboxhead">
<h2>
<div class="aa"><img src="https://img.webme.com/pic/h/hibycocuk/delete.png" width="48" height="48" /></div>
<div class="bb">lorem ipsum dolar sit amet</div>
</h2>
</div>
<div class="deleteboxbody">
<p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <a class="delete" href="#">eiusmod</a> tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam
</p>
</div>
</div>
</body>
</html>
Css/* Show only to IE PC */ body { font:Georgia, "Times New Roman", Times, serif; } * html .infoboxhead h2, .warningboxhead h2, .acceptboxhead h2, .deleteboxhead h2 {height: 1%;} /* For IE 5 PC */ .infosidebox { margin: 0 auto; /* center for now */ width: 30em; /* ems so it will grow */ font-size: 100%; } .infoboxhead { background: url(https://img.webme.com/pic/h/hibycocuk/inforight.png) no-repeat top right; margin: 0; padding: 0; text-align: center; } .infoboxhead h2 { background: url(https://img.webme.com/pic/h/hibycocuk/infoleft.png) no-repeat top left; margin: 0; padding:0; color: #636363; font-weight: bold; font-size: 1.8em; font-style:italic; line-height: 1em; text-shadow: rgba(0,0,0,.4) 0px 2px 5px; /* Safari-only, but cool */ } .infoboxhead h2 img { margin:10px 0 0 0; } .infoboxbody { margin: 0; padding: 5px 30px 31px; font-size:1.3em; font-style:italic; color:#636363; } a:link.info, a:visited.info { text-decoration:none; color:#43b2c1; } a:hover.info, a:active.info { text-decoration:underline; } .warningsidebox { margin: 0 auto; /* center for now */ width: 30em; /* ems so it will grow */ font-size: 100%; } .warningboxhead { background: url(https://img.webme.com/pic/h/hibycocuk/warningright.png) no-repeat top right; margin: 0; padding: 0; text-align: center; } .warningboxhead h2 { background: url(https://img.webme.com/pic/h/hibycocuk/warningleft.png) no-repeat top left; margin: 0; padding:0; color: #636363; font-weight: bold; font-size: 1.8em; font-style:italic; line-height: 1em; text-shadow: rgba(0,0,0,.4) 0px 2px 5px; /* Safari-only, but cool */ } .warningboxhead h2 img { margin:10px 0 0 0; } .warningboxbody { margin: 0; padding: 5px 30px 31px; font-size:1.3em; font-style:italic; color:#636363; } a:link.warning, a:visited.warning { text-decoration:none; color:#e37c21; } a:hover.warning, a:active.warning { text-decoration:underline; } .acceptsidebox { margin: 0 auto; /* center for now */ width: 30em; /* ems so it will grow */ font-size: 100%; } .acceptboxhead { background: url(https://img.webme.com/pic/h/hibycocuk/acceptright.png) no-repeat top right; margin: 0; padding: 0; text-align: center; } .acceptboxhead h2 { background: url(https://img.webme.com/pic/h/hibycocuk/acceptleft.png) no-repeat top left; margin: 0; padding:0; color: #636363; font-weight: bold; font-size: 1.8em; font-style:italic; line-height: 1em; text-shadow: rgba(0,0,0,.4) 0px 2px 5px; /* Safari-only, but cool */ } .acceptboxhead h2 img { margin:10px 0 0 0; } .acceptboxbody { margin: 0; padding: 5px 30px 31px; font-size:1.3em; font-style:italic; color:#636363; } a:link.accept, a:visited.accept { text-decoration:none; color:#3f8a2d; } a:hover.accept, a:active.accept { text-decoration:underline; } .deletesidebox { margin: 0 auto; /* center for now */ width: 30em; /* ems so it will grow */ font-size: 100%; } .deleteboxhead { background: url(https://img.webme.com/pic/h/hibycocuk/deleteright.png) no-repeat top right; margin: 0; padding: 0; text-align: center; } .deleteboxhead h2 { background: url(https://img.webme.com/pic/h/hibycocuk/deleteleft.png) no-repeat top left; margin: 0; padding:0; color: #636363; font-weight: bold; font-size: 1.8em; font-style:italic; line-height: 1em; text-shadow: rgba(0,0,0,.4) 0px 2px 5px; /* Safari-only, but cool */ } .deleteboxhead h2 img { margin:10px 0 0 0; } .deleteboxbody { margin: 0; padding: 5px 30px 31px; font-size:1.3em; font-style:italic; color:#636363; } a:link.delete, a:visited.delete { text-decoration:none; color:#7c1e19; } a:hover.delete, a:active.delete { text-decoration:underline; }
Önizlemesi (Css shiny message boxes)
Css shiny message boxes Şifre: hibycocuk.tr.gg
Yardım isteklerinizi lütfen yorumlar kısmına yazmayın. İletişim formundan bana ulaşabilirsiniz.