Caixa com cantos arredondados
Uma boa solução para estilizar seu site, gostaria de transforma-lo num plug-in, más ainda não tive tempo, quem sabe no próximo post.
Resultado:
Primeiro temos o html
<html>
<head>
<title>Caixa com cantos arredondados</title>
<meta name=“generator” content=“editplus” />
<link href=“caixa.css” media=“all” rel=“stylesheet” type=“text/css” />
</head>
<body>
<div class=“modulecontainer sidebar”>
<div class=“first”>
<span class=“first”></span>
<span class=“last”></span>
</div>
<div class=“conteudo”>
<!– é só preencher este espaço com o conteúdo que quiser –>
</div>
<div class=“last”>
<span class=“first”></span>
<span class=“last”></span>
</div>
</div>
</body>
</html>
Agora vamos ao CSS. Obs: Dê preferência a colocar o css em um arquivo separado, nem preciso dizer pq…
.modulecontainer {
width:180px;
height:auto;
border-width:1px;
padding:0 8px;
}
.modulecontainer div {
width:auto;
height:auto;
background-color:#ffc;
border-color:#630;
border-style:solid;
border-width:1px;
margin:-2px -8px;
}
.modulecontainer .first {
border-width:1px 0 0;
}
.modulecontainer .last {
border-width:0 0 1px;
}
div.first,div.last {
height:8px;
width:auto;
position:relative;
background-color:#c93;
border-color:#630;
margin:0;
}
.modulecontainer .first .first {
position:absolute;
background-image:url(top_left.gif);
background-repeat:no-repeat;
width:8px;
height:8px;
z-index:1;
margin-left:-8px;
border:0 none;
}
.modulecontainer .last .first {
position:absolute;
background-image:url(base_left.gif);
background-repeat:no-repeat;
width:8px;
height:8px;
z-index:1;
margin-left:-8px;
border:0 none;
}
.modulecontainer .first .last {
position:absolute;
background-image:url(top_right.gif);
background-repeat:no-repeat;
width:8px;
height:8px;
z-index:1;
margin-right:-8px;
border:0 none;
right:0;
}
.modulecontainer .last .last {
position:absolute;
background-image:url(base_right.gif);
background-repeat:no-repeat;
width:8px;
height:8px;
z-index:1;
margin-right:-8px;
border:0 none;
right:0;
}
.conteudo {
font:normal 11pt “Trebuchet MS”;
color:#F00;
padding:3px;
}
