14/06/2017

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
Códigos
.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

Códigos
.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
Códigos
.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
Códigos
.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
Códigos
.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:
Códigos
<img src="url-da-imagem" class="EFEITO" />s
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

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345