30/12/2014

Colocando backgrounds no título de post

Sempre quis tomar um desses!
Entãoo,gostaram do layout free?? Bom, achei um tutorial bem legal no blog GNMH, de colocando backgrounds no título do pots!
Vamos lá!



MODO DE COR NO FUNDO:
/* Posts----------------------------------------------- */.post h3 {z-index:600px;padding: 10px;width: VALORpx;   TAMANHO DA SUA ÁREA DE POSTmargin-left: -VALORpx;    MARGEM DA ESQUERDA DO FUNDOmargin-top: VALORpx;    MARGEM DO TOPO DO FUNDOmargin-bottom: VALORpx;  MARGEM DA PARTE DE BAIXO DO FUNDObackground: #COR;   COR DO FUNDOborder: 1px solid #COR;   COR DA BORDA EN VOLTA DA FUNDObox-shadow: inset 1px 1px 0px #COR;   SOMBREADO DO FUNDO-webkit-border-radius: VALORpx;  SE QUISER MAIS ARRENDONDADO É SÓ AUMENTAR O VALOR}h3.post-title {padding: 8px 0 8px 8px;text-transform: UPPERCASE;letter-spacing: .1em;font-family: 'SUA FONTE;font-weight: 300;font-size: VALORpx;  TAMANHO DA FONTEcolor:#COR;line-height: 8px;margin-top: 3px;text-align:left;  OU PODE COLOCAR RIGHT OU CENTER.-webkit-transition-duration: .80s;}h3.post-title a {text-transform: capitalize;letter-spacing: .1em;font-family: 'SUA FONTE;font-weight: 300;font-size: VALORpx;  TAMANHO DA FONTEcolor:#COR;text-align: left;  OU PODE COLOCAR RIGHT OU CENTER.-webkit-transition-duration: .80s;}h3.post-title a:hover {color:#COR;   COR DO TÍTULO EM HOVER-webkit-transition-duration: .80s;}



MODO DE IMAGEM NO FUNDO:
/* Posts----------------------------------------------- */.post h3 {background:#COR url("IMAGEM QUE VAI NO FUNDO")no-repeat; FAÇA O TAMANHO QUE FIQUE BOM NA SUA ÁREA DE POSTborder:solid #COR 1px;   COR DA BORDA EM VOLTA DA IMAGEMz-index:500px;width: TAMANHOpx;   TAMANHO DA IMAGEMmargin-left: VALORpx;   MARGEM DA ESQUERDA DA IMAGEMheight:10px;line-height:10px;padding: 10px;font-family:'FONTE QUE QUER';margin-bottom: 5px;border-radius: 1px;  SE QUISER ARRENDONDAR MAIS AUMENTE O VALOR}h3.post-title {margin-top:4px;padding-bottom: 8px;padding-top: 8px;padding-left: 8px;letter-spacing: 0;font-family:'FONTE QUE QUER';font-weight: 300;font-size: TAMANHOpx;color:#COR;text-align:center;-webkit-transition-duration: .80s;}h3.post-title a {letter-spacing: 0;font-family:'FONTE QUE QUER';font-weight: 300;font-size: TAMANHOpx;color:#COR;text-align: center;-webkit-transition-duration: .80s;}h3.post-title a: hover {letter-spacing: 0;font-family:'FONTE QUE QUER';font-weight: 300;font-size: TAMANHOpx;color:#COR;text-align: center;-webkit-transition-duration: .80s;}

-                                       Quem quiser as imagens iguais a das sidebar:

                                                                      IMAGEM 1




 O resultado do título de post com imagem foi este:  (★^O^★)

Nenhum comentário:

Postar um comentário