|
<< Click to Display Table of Contents >> Caixas com título fofinho |
  
|
|
<< Click to Display Table of Contents >> Caixas com título fofinho |
|
Resultado final
Para fazer é relativamente simples
Html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="boxes.css" />
</head>
<body>
<div class="box">
<h2 class="box-azul">
Janela Azul</h2>
<div class="box-inner">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquet vehicula dolor,
eu suscipit nulla mollis id. Integer pellentesque lacinia fringilla. Duis feugiat
ornare dignissim. Aenean felis dolor, lobortis et fringilla nec, viverra non massa.
Ut vestibulum adipiscing arcu id viverra. Vivamus metus quam, feugiat at molestie
eget, rutrum ac mi. Sed consequat dui a magna hendrerit elementum. Praesent mollis
erat quis eros convallis sit amet bibendum eros ullamcorper. Cras at est massa,
a dapibus leo. Maecenas eu lacus erat. Duis cursus ante eu sapien hendrerit vel
condimentum sem vehicula. Nunc vel dolor mi.
</p>
</div>
<div class="box-rodape">
<a href="/software/antimalware/">Leia mais...</a>
</div>
</div>
<div class="box">
<h2 class="box-amarelo">
Janela amarela</h2>
<div class="box-inner">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquet vehicula dolor,
eu suscipit nulla mollis id. Nam aliquet vehicula dolor, eu suscipit nulla mollis
id.
</p>
</div>
<div class="box-rodape">
<a href="/software/antimalware/">Leia mais...</a>
</div>
</div>
<div class="box">
<h2 class="box-vermelho">
Titulo janela</h2>
<div class="box-inner">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquet vehicula dolor,
eu suscipit nulla mollis id. Integer pellentesque lacinia fringilla. Duis feugiat
ornare dignissim. Aenean felis dolor, lobortis et fringilla nec, viverra non massa.
Ut vestibulum adipiscing arcu id viverra. Vivamus metus quam, feugiat at molestie
eget, rutrum ac mi. Sed consequat dui a magna hendrerit elementum. Praesent mollis
erat quis eros convallis sit amet bibendum eros ullamcorper. Cras at est massa,
a dapibus leo. Maecenas eu lacus erat. Duis cursus ante eu sapien hendrerit vel
condimentum sem vehicula. Nunc vel dolor mi.
</p>
<p>
<a href="/download_ad-aware/">Ad-Aware 9.0.5.0</a>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquet vehicula dolor,
eu suscipit nulla mollis id. Integer pellentesque lacinia fringilla. Duis feugiat
ornare dignissim. Aenean felis dolor, lobortis et fringilla nec, viverra non massa.
Ut vestibulum adipiscing arcu id viverra. Vivamus metus quam, feugiat at molestie
eget, rutrum ac mi. Sed consequat dui a magna hendrerit elementum. Praesent mollis
erat quis eros convallis sit amet bibendum eros ullamcorper. Cras at est massa,
a dapibus leo. Maecenas eu lacus erat. Duis cursus ante eu sapien hendrerit vel
condimentum sem vehicula. Nunc vel dolor mi.
</p>
</div>
<div class="box-rodape">
<a href="/software/antimalware/">Leia mais...</a>
</div>
</div>
<div class="box">
<h2 class="box-verde">
Janela verde</h2>
<div class="box-inner">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquet vehicula dolor,
eu suscipit nulla mollis id. Integer pellentesque lacinia fringilla. Duis feugiat
ornare dignissim. Aenean felis dolor, lobortis et fringilla nec, viverra non massa.
Ut vestibulum adipiscing arcu id viverra. Vivamus metus quam, feugiat at molestie
eget, rutrum ac mi. Sed consequat dui a magna hendrerit elementum. Praesent mollis
erat quis eros convallis sit amet bibendum eros ullamcorper. Cras at est massa,
a dapibus leo. Maecenas eu lacus erat. Duis cursus ante eu sapien hendrerit vel
condimentum sem vehicula. Nunc vel dolor mi.
</p>
</div>
<div class="box-rodape">
<a href="/software/antimalware/">Leia mais...</a>
</div>
</div>
</body>
</html>
CSS
body
{
margin: 20px;
padding: 0;
font-family: Arial,Helvetica,sans-serif;
font-size: 10pt;
}
/* -------------------------------- links -------------------------------- */
a:link
{
color:#025eb3;
text-decoration:none;
}
a:visited
{
color:#025eb3;
text-decoration:none;
}
a:hover
{
color:#025eb3;
text-decoration:underline;
}
/* -------------------------------- boxes -------------------------------- */
.box{
font-size:12px;
margin:0 10px 10px 10px;
padding:0;
background-color:#fff;
}
html>body .box h2{ /* Not IE6 */
background:url(fundo_caixa.png) 0px repeat-x;
}
.box p
{
margin: 0;
padding: 8px 8px 8px 8px;
}
.box .box-inner
{
border-left:1px solid #ababab;
border-right:1px solid #ababab;
}
.box h2
{
font-size:1.1em;
color: #eee;
margin:0;
padding:8px;
font-weight:bold;
font-family:Trebuchet MS,Arial;
background:#e8e6df;
padding:3px 0 2px 8px
}
.box h2.box-azul
{
background-color:#497cd1;
border: solid 1px #3c69bd;
}
.box h2.box-amarelo
{
background-color:#df9f23;
border: solid 1px #9d6c0c;
}
.box h2.box-vermelho
{
background-color:#d04e4e;
border: solid 1px #9d4141;
}
.box h2.box-verde
{
background-color:#689352;
border: solid 1px #537442;
}
.box .box-rodape
{
text-align:right;
margin:0;
padding:3px 10px 3px 22px;
background-color: #e6e8eb;
border-left:1px solid #ababab;
border-right:1px solid #ababab;
border-bottom:1px solid #ababab;
}
.box .box-rodape a
{
color: #025eb3;
_text-decoration: underline;
}
Imagem
Atenção: essa imagem é um png com a parte de cima com faixa em branco com transparência de 50% e a parte de baixo 100% transparente.
Isso cria o efeito de mais claro e mais escuro conforme a imagem acima. Clique com botão direito e salve essa imagem:
|
