Esse mês é o aniversário da Hello Kitty (na verdade, foi, dia 1º de novembro), a gatinha fofa da Sanrio. Então resolvi compartilhar o código de uma caixinha que usei em layouts passados e uso no atual, feita com css, onde se pode adicionar o que quiser, como texto, imagem, vídeo, links, menus, itens/plugins/widgets de redes sociais, como essa caixa de curtir a página do facebook que ela está dando uma mordidinha com carinho, minha sugestão. Para chegar ao resultado que compartilho tive como base esse código de Stephanie.
Se você quiser usar, copie o código que deixei aqui e cole em um novo gadget Html/Javascript ou em uma área de html onde preferir. Talvez seja necessário editar para que se adapte melhor ao seu template, como tive que fazer aqui no meu, ficando com um resultado um pouco diferente do da página de visualização; mas cada parte da gatinha já está especificada no código, como olhos, orelhas, laço, nariz... basta mudar cores e valores e adicionar alguma coisa que desejar onde indiquei no html. Algumas coisinhas básicas para quem for personalizar:
1 - .hkbox{ = área toda da hello;
2 - onde houver height e width = altura e largura;
3 - top, left, right, margin-top, margin-left... = posicionar com relação ao topo, direita, esquerda;
4 - background = cores da gatinha; as que usei mais são branco (white/whitesmoke), azul (lightblue), rosa (pink/hotpink), amarelo (#edb93b)...
5 - border e border-radius = definir bordas, cores das bordas, arredondar;
6 - .hkhead{ = área da carinha, ela toda é uma carinha arredondada neh :3;
7 - .miu{ = personaliza a área onde vc insere textos, imagem...
8 - Onde diz #laco2{display: none;... é que eu ia adicionar mais um laço e depois mudei de ideia, se apagar o display: none; ele vai aparecer e ela terá 2 laços;
9 - Para quem for adicionar o plugin de página do facebook, poderá mudar o valor de height (altura) para, por exemplo, height='70'... para que apareça apenas o nome da página com quantas curtidas mais foto do perfil. Obtenha o plugin de página do face aqui. Também deixe marcado a opção usar cabeçalho pequeno.
Como eu disse, tive que dar uma ajeitadinha na minha kitty box, usei o CSS abaixo, e, caso queira usá-lo, substitua tudo o que houver no código original que disponibilizei e estiver entre <style> e </style> por isso:
.hkbox{
position: relative;
width: 280px;
}
.orelha1{
position: absolute;
top: 0;
left: 12px;
background: white;
width: 60px;
height: 60px;
border-radius: 38% 30% 0% 50%;
border: 10px solid white;
transform: rotate(10deg);
}
.orelha2{
position: absolute;
top: -3px;
right: 12px;
background: white;
width: 60px;
height: 60px;
border-radius: 38% 30% 0% 50%;
border: 10px solid white;
transform: rotate(80deg);
}
.hkhead{
z-index: 4;
width: 100%;
border-radius: 35% 35% 20% 20%;
background: white;
border-left: 15px solid white;
border-bottom: 10px dotted whitesmoke;
border-right: 14px solid white;
}
.olho1{
position: absolute;
width: 30px;
height: 40px;
border-radius: 50%;
border-top: 10px solid lightblue;
top: 32%;
left: 24%;
transform: rotate(-10deg);
}
.olho2{
position: absolute;
width: 30px;
height: 40px;
border-radius: 50%;
border-top: 10px solid lightblue;
top: 32%;
right: 25%;
transform: rotate(10deg);
}
.nariz{
position: absolute;
top: 38%;
left: 45%;
z-index: 6;
background: pink;
border: 6px solid white;
width: 25px;
height: 20px;
border-radius: 50% 50% 45% 45%;
}
#laco{
position: absolute;
top: -1%;
right: 2%;
width: 130px;
height: 90px;
}
.cnt-laco{
position: relative;
}
.circulo{
background: hotpink;
width: 40px;
height: 40px;
border: 8px solid hotpink;
border-radius: 50%;
z-index: 999;
position: absolute;
margin-top: 25px;
left: 40%;
}
.circulo-pequeno-r{
background: hotpink;
width: 20px;
height: 20px;
border: 6px solid hotpink;
border-radius: 50%;
z-index: 998;
position: absolute;
margin-top: 51px;
right: 8%;
}
.circulo-pequeno-l{
background: hotpink;
width: 20px;
height: 20px;
border: 6px solid hotpink;
border-radius: 50%;
z-index: 998;
position: absolute;
margin-top: 24px;
left: 30%;
}
.lazo-1
.lazo-1:after{
position: absolute;
top: -30%;
left: 18%;
content: '';
display: block;
background: hotpink;
width: 47px;
height: 55px;
border-radius: 50%;
z-index: 99;
}
.lazo-1:before{
position: absolute;
margin-top: 2px;
left: 15%;
content: '';
display: block;
background: hotpink;
width: 50px;
height: 60px;
border-radius: 50%;
transform: rotate(38deg);
z-index: 99;
}
.lazo-1-sombra
.lazo-1-sombra:after{
position: absolute;
top: -8px;
left: 10%;
content: '';
display: block;
background: hotpink;
width: 67px;
height: 65px;
border-radius: 50%;
z-index: 9;
}
.lazo-1-sombra:before{
position: absolute;
margin-top: -1px;
left: 8%;
content: '';
display: block;
background: hotpink;
width: 65px;
height: 70px;
border-radius: 50%;
transform: rotate(38deg);
z-index: 9;
}
.lazo-2
.lazo-2:after{
position: absolute;
margin-top: 40px;
right: -17%;
content: '';
display: block;
background: hotpink;
width: 55px;
height: 60px;
transform: rotate(38deg);
border-radius: 50%;
z-index: 99;
}
.lazo-2:before{
position: absolute;
margin-top: 45px;
right: -13%;
content: '';
display: block;
background: hotpink;
width: 60px;
height: 60px;
border-radius: 50%;
transform: rotate(40deg);
z-index: 99;
}
.lazo-2-sombra
.lazo-2-sombra:after{
position: absolute;
margin-top: 50px;
right: -14%;
content: '';
display: block;
background: hotpink;
width: 73px;
height: 60px;
transform: rotate(38deg);
border-radius: 50%;
z-index: 9;
}
.lazo-2-sombra:before{
position: absolute;
margin-top: 30px;
right: -14%;
content: '';
display: block;
background: hotpink;
width: 69px;
height: 70px;
border-radius: 50%;
transform: rotate(38deg);
z-index: 9;
}
.corpim{
position: relative;
top: -190px;
height: 200px;
}
.mao-1{
position: absolute;
width: 60px;
height: 100px;
background: white;
border: 9px solid whitesmoke;
border-radius: 48% 48% 48% 48%;
top: 136px;
right: -3%;
transform: rotate(150deg);
}
.mao-1:after{
content: '';
position: absolute;
top: 40px;
left: -13px;
display: block;
width: 40px;
height: 50px;
background: white;
transform: rotate(-100deg);
border-radius: 50%;
border-top: 10px solid whitesmoke;
}
.mao-2{
position: absolute;
width: 60px;
height: 100px;
background: white;
border: 9px solid whitesmoke;
border-radius: 48% 48% 48% 48%;
top: 106px;
left: -6%;
transform: rotate(190deg);
}
.mao-2:after{
content: '';
position: absolute;
top: 40px;
left: -13px;
display: block;
width: 40px;
height: 50px;
background: white;
transform: rotate(-100deg);
border-radius: 50%;
border-top: 10px solid whitesmoke;
}
.miu{
width: 250px;
border-radius: 50%;
margin-top: -75px;
background: white;
color: pink;
font-family: 'Delius', cursive;
font-size: 14px;
}
#laco2{
display: none;
position: absolute;
top: -1%;
left: 2%;
width: 130px;
height: 90px;
}
.cnt-laco2{
position: relative;
}
.circulo2{
background: hotpink;
width: 40px;
height: 40px;
border: 8px solid hotpink;
border-radius: 50%;
z-index: 999;
position: absolute;
margin-top: 25px;
right: 40%;
}
.circulo-pequeno-r2{
background: pink;
width: 20px;
height: 20px;
border: 6px solid hotpink;
border-radius: 50%;
z-index: 998;
position: absolute;
margin-top: 51px;
left: 8%;
}
.circulo-pequeno-l2{
background: pink;
width: 20px;
height: 20px;
border: 6px solid hotpink;
border-radius: 50%;
z-index: 998;
position: absolute;
margin-top: 24px;
right: 30%;
}
.lazo-12
.lazo-12:after{
position: absolute;
top: -30%;
right: 18%;
content: '';
display: block;
background: hotpink;
width: 47px;
height: 55px;
border-radius: 50%;
z-index: 99;
}
.lazo-12:before{
position: absolute;
margin-top: 2px;
right: 15%;
content: '';
display: block;
background: hotpink;
width: 50px;
height: 60px;
border-radius: 50%;
transform: rotate(38deg);
z-index: 99;
}
.lazo-12-sombra
.lazo-12-sombra:after{
position: absolute;
top: -8px;
right: 10%;
content: '';
display: block;
background: hotpink;
width: 67px;
height: 65px;
border-radius: 50%;
z-index: 9;
}
.lazo-12-sombra:before{
position: absolute;
margin-top: -1px;
right: 8%;
content: '';
display: block;
background: hotpink;
width: 75px;
height: 80px;
border-radius: 50%;
transform: rotate(38deg);
z-index: 9;
}
.lazo-22
.lazo-22:after{
position: absolute;
margin-top: 40px;
left: -17%;
content: '';
display: block;
background: hotpink;
width: 55px;
height: 60px;
transform: rotate(38deg);
border-radius: 50%;
z-index: 99;
}
.lazo-22:before{
position: absolute;
margin-top: 45px;
left: -13%;
content: '';
display: block;
background: hotpink;
width: 60px;
height: 60px;
border-radius: 50%;
transform: rotate(38deg);
z-index: 99;
}
.lazo-22-sombra
.lazo-22-sombra:after{
position: absolute;
margin-top: 50px;
left: -14%;
content: '';
display: block;
background: hotpink;
width: 73px;
height: 60px;
transform: rotate(38deg);
border-radius: 50%;
z-index: 9;
}
.lazo-22-sombra:before{
position: absolute;
margin-top: 33px;
left: -24%;
content: '';
display: block;
background: hotpink;
width: 69px;
height: 70px;
border-radius: 50%;
transform: rotate(38deg);
z-index: 9;
}
E se vc curte outros bichinhos kawaii, dá uma olhadinha nos tutoriais aqui do blog em que há códigos para criar caixinhas do Rilakkuma, alpacasso, de coelho... E é isso :)
Omg the box is so cute!
ResponderExcluir