13 de ago. de 2014
Modelo de Data - Faixinha Virada + Faixinhas
Alguém me pediu modelos de data mas eu estava sem criatividade, então, resolvi postar esse que eu já usei muito...
Preview:
Eu simplesmente amo esse modelo de data, sem contar que dá pra colocar até mesmo em templates de duas sides, que não fica estranho nem atrapalha. Inclusive, estou colocando ele aqui no BC agora. -q Se quiserem usá-lo, é só seguir os passos:
Primeiro, abra o seu HTML e procure por .main-inner h2.date-header {. Apague esse código todo e substitua-o por este:
.main-inner h2.date-header {
position: absolute;
color: #fff; /* cor da fonte */
font-size: 10px; /* tamanho da fonte */
font-family: Tahoma; /* fonte */
text-shadow: 1px 1px 0px #ffb5b9; /* sombra da fonte */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoGRoEVVsiDuodDvRoPIP8K022ZWsYKQv2Fwvo6Rn6Sn1BD-4cRjgEO9lzlOSRLl0ysKe4oE34HpZhj_6IdJiGXzzSwbxtKv6MmZYsYiz_Zpfd3aF-tH_in-QKP6CRDyuHg0fcXzJRuU8G/s65/1.png) no-repeat; /* imagem da faixinha */
height: 32px; /* altura da faixinha */
width: 65px; /* largura da faixinha */
padding-top: 8px;
padding-left: 5px;
z-index: 1;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
margin-top: 11px; /* desce a faixinha */
margin-left: 555px; /* ajusta a faixinha à direita */
}
position: absolute;
color: #fff; /* cor da fonte */
font-size: 10px; /* tamanho da fonte */
font-family: Tahoma; /* fonte */
text-shadow: 1px 1px 0px #ffb5b9; /* sombra da fonte */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoGRoEVVsiDuodDvRoPIP8K022ZWsYKQv2Fwvo6Rn6Sn1BD-4cRjgEO9lzlOSRLl0ysKe4oE34HpZhj_6IdJiGXzzSwbxtKv6MmZYsYiz_Zpfd3aF-tH_in-QKP6CRDyuHg0fcXzJRuU8G/s65/1.png) no-repeat; /* imagem da faixinha */
height: 32px; /* altura da faixinha */
width: 65px; /* largura da faixinha */
padding-top: 8px;
padding-left: 5px;
z-index: 1;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
margin-top: 11px; /* desce a faixinha */
margin-left: 555px; /* ajusta a faixinha à direita */
}
Escolha a sua imagem dentre as que eu disponibilizei neste post e substitua o link no local indicado. Arrume a fonte e as cores como preferir, e utilizando as margins, posicione a faixinha à direita do seu post. Quando estiver bem posicionado, salve.
E pronto, sua data está prontinha. Lembrem-se de não modificar nada além do que foi indicado, certo? Senão, pode acabar ficando uma bagunça. As cores das faixinhas são variadas, mas caso nenhuma delas se adeque ao seu blog, podem ser mudadas à vontade no Photoshop ou em qualquer outro editor.
Faixinhas:
Assinar:
Postar comentários
(Atom)
0 comentários:
Postar um comentário