Efeito kawaii

Tadaima, leitores e leitoras do blogue ^^

Para não parecer uma blogueira demasiado negligente, hoje trago mais um efeito exclusivo, mas que acaba por não ter nada de especial, pois só reúne alguns atributos básicos, incluindo no hover. Apesar de tudo, eu achei bem kawaii, o que me levou a dar-lhe esse nome, por muito vulgar que seja. Tem um toque bem delicado e acho que se ajusta facilmente em blog em tons pastel e tal, a não ser que mudem o fundo, mas nesse caso já não ficaria kawaii e sim com outro ar. Além disso, serve para imagens de vários tamanhos. Enfim, estou a tagarelar com sempre, vejam a prévia e creditem se usarem ;)

Prévia (www):

Código:

.kawaii {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHWapRFJLkAZ4xLT9pg04P18fMjXsExD97-qy6gpCdLVnDaZGOs4JAQcXYzOHGf5UuOHdNe3ib4GDU2oF7zjGFS_afcsQnym_uTVTL0S-YxzMtiTKazrJK66wARREGWcAuCp-XozPo4JpP/s200/teste2.png)repeat;
box-shadow: 0px 0px 3px #cccccc;
border: 0px solid #ffffff;
border-radius: 1px;
opacity: 1.0;
padding: 8px;
-webkit-transition-duration: .50s;
}
.kawaii:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidILcvIiPS4AzMbwQCzn8kTXqTz-8HbUdMulNkDy1Te23mbgaH42IG5OM0sWL6K1CHg5smwOmFRtescxngq7gBVJ3DffokiqvmM8XffwuHdLP_jIrIEdhlG8Dbp2wFT2p32t0d3WzZCvUq/s1600/teste1.png) repeat;
border-radius: 5px;
opacity: 0.60;
-webkit-transform: scale(-1) rotate(-360deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(-1) rotate(-360deg) translate(0px, 0px) skew(0deg, 0deg);
-webkit-transition-duration: .50s;
}

Para aplicar, é bem simples, tal como para todos os efeitos escreva:

<img src="URLDAIMAGEM" class="kawaii" />

Só isto. Um fundo listrado com cores suaves, padding, arredondamento ligeiro, rotação e opacidade no hover... Mas e então, o nome foi bem escolhido?