prettify

baseline

Div based Infobox with CSS3

html:

<div class="infobox"
><div class="head">Titlos</div
><div class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam ut mi imperdiet nibh laoreet porta at ut felis. 
Etiam cursus diam a justo lobortis congue. 
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
Fusce ac pellentesque eros. 
Aenean porta sem id lectus cursus luctus. 
Maecenas sagittis augue non enim laoreet congue. 
Maecenas pretium varius nulla non molestie. 
</div></div>

css:

.infobox {
 float:right;
 margin-right:1em;
 margin-bottom:1em;
 border:1px;
 width:15em;
 border:1px solid #999;
 -moz-border-radius:.6em;
 border-radius:.6em;
 -webkit-box-shadow: .4em .4em .4em rgba(0,0,0,0.5);
 -moz-box-shadow: .4em .4em .4em rgba(0,0,0,0.5);
 box-shadow: .4em .4em .4em rgba(0,0,0,0.5);
}
.infobox>.head{
 text-align:center;
 background:#8ac; /* #ace; */
 background: -moz-linear-gradient(top,#eff,#ace 20%,#777 );
 background: -webkit-gradient(linear, left top, left bottom,  color-stop(0,#eff), color-stop(0.2, #ace), color-stop(1,#777));
 padding:.5em;
 -moz-border-radius:.6em .6em 0 0;
 border-radius:.6em .6em 0 0;
 text-shadow:-1px -1px 1px #000;
 font-weight:bold;
 font-size:1.1em;
 color:#fff;
}
.infobox >.body {
 padding:.5em;
 border-top:1px solid #999;
 background-color:#f4f4f4;
 -moz-border-radius:0 0 .6em .6em;
 border-radius:0 0 .6em .6em;
}

No comments:

Post a Comment