Caixas com título fofinho

<< Click to Display Table of Contents >>

Navigation:  Html >

Caixas com título fofinho

Previous pageReturn to chapter overviewNext page

Resultado final

 

caixas

 

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:

 

fundo_caixa