Mais um post: personalizar o leiam mais.
Neste caso, será o modelo que uso aqui no blog, onde podem utilizar uma imagem, mas personalizá-la, com hover e colocando onde quiserem - o que fica muito melhor, acho eu. É quase como personalizar e ajustar uma ribbon, sendo que a fonte é personalizada à parte. Ah, eu falei no Cherry Bom porque hoje fui lá, para verificar se eu tinha adaptado este tuto do que lá ensinam - eu já uso faz muito tempo, por isso não me lembrava. Mas sim, é parecidinho com o que lá está. Vamos ver?
Prévia:
Tutorial:
Procure por:
/b:skin
Acima cole:
.jump-link {
background: url(URLDAIMAGEM) no-repeat;
margin: 10px 0px -7px 250px;width: 200px;
height: 50px;
-webkit-transition-duration: .60s;
}
.jump-link:hover {
background: url(URLDAIMAGEMEMHOVER) no-repeat;
-webkit-transition-duration: .60s;
}
.jump-link a {
width: 200px;
height: 50px;
padding: 30px 0px -30px 30px;font-family: silkscreen;
font-size: 30px;
text-align: center;
color: transparent;}
Ok, agora explicando:
A fonte, personalizada em "jump-link a", está transparente porque eu já tinha escrito a palavra na imagem, mas se você não escreveu, use alguma cor, nem que seja preto, #cccccc.
A altura e largura da imagem estão de acordo com a minha, e a margem foi a que eu escolhi para centrar o leia mais. O padding, na última chaveta, também. Altere conforme precisar.
woow nunca vi um lay tão lindo na minha vida (*O*)
ResponderEliminarli alguns tutoriais seus e vou usá-los no meu lay do dia dos namorados.
Se quiser visitar meu blog eis aqui o link
meuladojapones.blogspot.com não sou tão boa quanto você mas faço o que posso hehe
ja ne!