Efeitos CSS em cabeçalhos - Parte 1

Publicado em: 17/09/2003

[Parte 2]

Introdução

Com CSS você pode obter variados efeitos nos cabeçalhos de sua página. Apresento a seguir alguns exemplos com a finalidade de mostrar as definições básicas para este processo. As possibilidades são ilimitadas, bastando um pouco de criatividade para se obter efeitos bastante interessantes e decorativos.

Para cada efeito apresento o resultado visual final do efeito e logo a seguir a regra CSS para obtê-lo. Vamos a eles:

Cabeçalho: Efeito 1

Efeitos CSS em Cabeçalhos

Este é o primeiro parágrafo e lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

h1 {
	font-family: Verdana, Arial, Sans-serif;
	font-size:150%;
	color:#03c;
	margin-bottom:0;
	padding-left: 2px;
	border-top: 3px solid #00f;
	border-bottom: 2px solid #00f;
	}
p {
	font-family: Verdana, Arial, Sans-serif;
	color: #000;
	}

Cabeçalho: Efeito 2

Efeitos CSS em Cabeçalhos

Este é o primeiro parágrafo e lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

h1 {
	font-family: Verdana, Arial, Sans-serif;
	font-size:150%;
	color:#f00;
	padding-left: 2px;
	border-top: 2px solid #c36;
	border-bottom: 2px dotted #c36;
	}
p {
	font-family: Verdana, Arial, Sans-serif;
	color: #000;
	}

Cabeçalho: Efeito 3

Efeitos CSS em Cabeçalhos

Este é o primeiro parágrafo e lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

h1 {
	float:left;
	font-size:150%;
	color:#999;
	padding-left: 2px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	margin:0 10px 0 0;
	}
p {
	font-family: Verdana, Arial, Sans-serif;
	color: #000;
	}

Cabeçalho: Efeito 4

Efeitos CSS em Cabeçalhos

Este é o primeiro parágrafo e lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

h1 {
	color:#fff;
	font-size:150%;
	background:#999;
	padding:5px 0px 5px 10px;
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
	border-left: 20px solid #000; 
	border-right: 2px solid #000;
	width:18.0em;
	}
p {
	font-family: Verdana, Arial, Sans-serif;
	color: #000;
	}

Cabeçalho: Efeito 5

Efeitos CSS em Cabeçalhos

Este é o primeiro parágrafo e lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

h1 {
	font-family: Verdana, Arial, Sans-serif;
	font-size:150%;
	color:#039;
	padding: 8px 0 10px 12px;
	border-left: 1px solid #039;
	border-top: 1px solid #039;
	margin-bottom:0;
	}
p {
	font-family: Verdana, Arial, Sans-serif;
	color: #000;
	border-left:1px solid #069;
	padding: 0 0 12px 12px;
	margin-top:0;
	}

Cabeçalho: Efeito 6

Efeitos CSS em Cabeçalhos

Este é o primeiro parágrafo e lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

h1 {
	font-family: Verdana, Arial, Sans-serif;
	text-align:left;
	color:#fff;
	font-size:150%;
	background:#fff url(fcabecalho.gif)
 left center no-repeat;
	padding: 5px  0 5px  80px;
	border:0;
	margin-bottom:10px;
	}
p {
	font-family: Verdana, Arial, Sans-serif;
	color: #000;
	}

Cabeçalho: Efeito 7

Efeitos CSS em Cabeçalhos

Este é o primeiro parágrafo e lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

h1 {
	font-family: Verdana, Arial, Sans-serif;
	color:#fff;
	font-size:150%;
	background:#548b54;
	padding:5px 0px 5px 10px;
	border: 3px outset #ccc;
	margin-bottom:10px;
	width:22.0em;
	}
p {
	font-family: Verdana, Arial, Sans-serif;
	color: #000;
	}

[Parte 2]