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;}
IMAGEM 1
Nenhum comentário:
Postar um comentário