14/06/2017

Tutorial: Efeito polígono (sem máscara)

||

Yo queridos! Hoje venho trazer o famoso efeito polígono, geralmente é necessário uma mascara para dar forma, mas com esse modo é possível fazer sem a mascara o que é bem pratico. Ah! É possível ver o efeito no link abaixo, espero que gostem. 


1) Vejo os exemplos de efeito polígono na brevia, e escolha um dos modelos. Vá até o HTML e ative a pesquisa pressionando Ctrl+F e procure por ]]></b:skin>, de acordo com qual modelo escolheu copie o código abaixo e cole acima de ]]></b:skin>.


Primeiro do exemplo
.penta {
width: 100px;
margin: 5px 5px 5px 5px;
-webkit-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
-moz-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
-ms-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
-o-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
}

Segundo do exemplo
.hexa {
width: 100px;
margin: 5px 5px 5px 5px;
-webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
-moz-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
-ms-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
-o-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

Terceiro do exemplo
.hepta {
width: 100px;
margin: 5px 5px 5px 5px;
-webkit-clip-path: polygon(50% 0, 90% 19%, 100% 62%, 72% 100%, 28% 100%, 0 62%, 10% 19%);
-moz-clip-path: polygon(50% 0, 90% 19%, 100% 62%, 72% 100%, 28% 100%, 0 62%, 10% 19%);
-ms-clip-path: polygon(50% 0, 90% 19%, 100% 62%, 72% 100%, 28% 100%, 0 62%, 10% 19%);
-o-clip-path: polygon(50% 0, 90% 19%, 100% 62%, 72% 100%, 28% 100%, 0 62%, 10% 19%);
clip-path: polygon(50% 0, 90% 19%, 100% 62%, 72% 100%, 28% 100%, 0 62%, 10% 19%);
}

Quarto do exemplo
.octa {
width: 100px;
margin: 5px 5px 5px 5px;
-webkit-clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%);
-moz-clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%);
-ms-clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%);
-o-clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%);
clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%);
}

Quinto do exemplo
.nona {
width: 100px;
margin: 5px 5px 5px 5px;
-webkit-clip-path: polygon(50% 0, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
-moz-clip-path: polygon(50% 0, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
-ms-clip-path: polygon(50% 0, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
-o-clip-path: polygon(50% 0, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
clip-path: polygon(50% 0, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
}


2) Salve! E agora vá em Layout abra um novo gadget e dentro dele cole:
<img src="url-da-imagem" class="EFEITO" />
Onde diz efeito, substitua pelo nome do efeito do código que escolheu. Por exemplo, se escolheu a primeira caixinha, então substitua as letras maiúsculas por penta.

Nenhum comentário:

Postar um comentário

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram