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.

Yorum ve Görüşlerinizi Eksik etmeniz (:






Bu sayfa hakkında yorum ekle:
İsmin:
E-mail adresin:
Siten:
Mesajınız:

=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=