21 abril 2015

Efeito Picbox #1

| |
Olá! Nesse tempo em que o blog ficou em hiatus, eu não deixei o HTML de lado. Eu comecei a fazer a prestar mais atenção nos códigos que eu já conhecia e aprendi um pouco mais. Aprendi a fazer Picboxes \o/

Pra quem não sabe, picboxes são aqueles efeitos em imagens que geralmente usamos para mostrar o nome e o link do blog dos autores e moderadores do blog. Ainda não entendeu? Aqui vai um exemplo. Meu exemplo está sem sal, eu sei. Usei cores bem "seguras", então ficou meio... méh. Acredito que se vocês colocarem um pouco mais de cor, vai ficar bem melhor.

Espero que gostem :3



DICA: Você pode usar o HTMLedit para editar, pois é bem mais fácil visualizar. O que ficará acima de ]]>< tem que ser colocado entre < style > < / style > (sem espaço, é claro) e o que será colocado em um gadget deve se colocado entre < body > < / body > (sem espaço)

1 - Procure por ]]>< usando F3 e acima cole:

#box-isa {
width: 120px /* Coloque o tamanho da imagem */
height: 120px; /* Coloque o tamanho da imagem */
-webkit-transition: all 0.8s ease; -moz-transition: all 0.9s ease;-o-transition: all 0.s ease;}
.isa-box {
width: 120px /* Coloque o tamanho da imagem */
height: 120px /* Coloque o tamanho da imagem */
background: transparent;
-webkit-transition: all 0.8s ease; -moz-transition: all 0.9s ease;-o-transition: all 0.s ease;}
.nome-isa {
height: 120px; /* Coloque o tamanho da imagem */
width: 120px; /* Coloque o tamanho da imagem */
font: 13px trebuchet ms;
text-transform: uppercase;
background: transparent;
-webkit-transition: all 0.8s ease; -moz-transition: all 0.9s ease;-o-transition: all 0.s ease;}
.nome-isa b {
margin-right: -1px; /* Muda o título de posição */
color: #a7d7e9; /* Cor do negrito */
text-shadow: 1px 1px 1px #; /* sombra do negrito, se quiser */}
.nome-isa a {
background: transparent;
margin-right: -1px; /* Muda  link de posição */
color: #b3d6e9; /* Cor do link */
text-decoration: none;
font-size: 11px; /* Tamanho da fonte do link */
-webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease;-o-transition: all 0.s ease;}
#box-isa .isa-box {
text-align: center;
width: 120px; /* Coloque o tamanho da imagem */
height: 120px; /* Coloque o tamanho da imagem */
margin-top: -125px; /* Coloque a altura da imagem + 5px se for colocar no blogger */
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
opacity: 0;
-webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease;-o-transition: all 0.s ease;
}
#box-isa .isa-box:hover {
text-align: center;
width: 120px; /* Coloque o tamanho da imagem */
height: 120px; /* Coloque o tamanho da imagem */
margin-top: -125px;  /* Coloque a altura da imagem + 5px se for colocar no blogger */
opacity: 0.8;
background: #efefef; /* Cor sólida * /
-webkit-transform: scale(1);
-moz-transform: scale(1);
-webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease;-o-transition: all 0.s ease;
}

2 - Depois de mudar o que for necessário, vá em Layout > Adicionar Gadget > HTML/JavaScript

<div id="box-isa">
<img src="IMAGEM" style="-webkit-border-radius: BORDA-ARREDONDApx; -moz-border-radius: BORDA
-ARREDONDApx; -o-border-radius: BORDA
-ARREDONDApx; -ie-border-radius: BORDA
-ARREDONDApx;">
<div class="isa-box"><br><center><div class="nome-isa"><b>Isa Souza</b><br>
<a href="http://link">euamohtml</a></center></div>
</div></div>
Espero que tenham gostado. Se não der certo ou se tiver dúvidas, pergunte na minha ask.

7 comentários:

  1. Ficou muito lindo *uuuuu* amei, <3

    Mr-Exemplar.blogspot.com.br

    ResponderExcluir
  2. Que efeito perfeito! Um dos melhores blogs com efeitos exclusivos é esse <3 Amo demais UAHSKUHA'

    Saudades do cantinho e o layout, amei!

    Adolescente Nerd // Oficial [] 彡

    ResponderExcluir
  3. Adorei o efeito, vou usar assim que puder <33

    Kissus da Iza // ★*゚*☆*゚**゚*☆*゚*
    By || Hi Tokki 안녕하세요 맛있는 ||

    ResponderExcluir
  4. Que efeito mais top gente <3 .. amei pena que não sou boa em HTML :( .. que bom que voltou flor, voltei hoje :3
    Dani / http://snowing-in-london.blogspot.com.br/ *poderia visitar?*

    ResponderExcluir
  5. Socorro Isa, que saudades daqui <3
    Adorei esse layout também ♥
    Que efeito legal, gente. Adorei, eu usaria com certeza se no meu blog tivessem mais autores do que eu KKKKK'

    ~Isa, eu sou a antiga dona do Cherry Pump e vejo que o deixou nos afiliados, ele foi excluído, mas caso queira se afiliar com o Henndrauhl é só avisar <3
    Com carinho, Thai. {henndrauhl}

    ResponderExcluir
  6. Oe :3
    Eu não sabia o que era picbox até agora hsuhas ~~retards~~
    Gostei muito do modelinho, acho que vai fica super legal se tiver vários juntos *p*
    O tutorial é muito prático molier, tu ensina muito bem <33
    Besos!

    ||Crazy Cake ||

    ResponderExcluir

« »