Estilização de Cabeçalhos


Home
índice (CSS)
Página anterior

No Html:
<h1>Estilização de Cabeçalhos</h1>
Na folha de estilo ficaria assim:
h1{
width: 50%;
height: 49px;
margin: 0 auto;/*centraliza o box do cabeçalho*/
text-align: center;/*centraliza o texto do cabeçalho*/
border:60% solid beige; background-color: #A2B5CD; /*colocando background-color: ActiveBorder; fica com a cor da janela ativa*/
background-image:url(img/cssdraw.jpg); /*para colocar uma imagem*/
background-repeat: no-repeat; /*não repete a imagem*/
background-position: top right;/*posição que a imagem ocupará. Pode-se escolher uma das seguintes posições: center, center right, center left, bottom, bottom left, bottom right e também valores em porcentagens, ou ainda em pixels*/
box-shadow: 0.1em 0.5em 0.2em 0.2em #181818;
color: orangered;
text-align: left;
font-size: 3em;
font-weight: 800;
letter-spacing: 0.2em; /*espaçamento entre as letras*/
line-height: 40px;
padding-top:10px; /*aumenta o espaço do topo*/
padding-left:3em; /*aumenta o espaço à esquerda do texto*/
padding-bottom:10px; /*aumentando os pixels aumenta na vertical(com poucos pixels a imagem não aparece)*/
text-shadow: 10px 12px 3px #000; /*sombra no título*/
/*radius para arredondar as bordas - se quiser todas colocar bottom-left-radius, etc*/
border-top-left-radius: 1em;
border-bottom-right-radius: 1em;
webkit-border-top-left-radius: 1em;
webkit-border-bottom-right-radius: 1em;
}