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.

