Banner propaganda da DevMedia - Cursos de desenvolvimento web

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]

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo