Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

RoBINHoDC

[Resolvido] div geométrica

Por , em Desenvolvimento frontend

Recommended Posts

RoBINHoDC    1

RoBINHoDC
Postado

e ai galera, to precisando de uma ajuda,

não sei se existe isso, li um artigo mas não entendi muito bem, vou vou começar falando o que eu preciso.

Eu tenho um menu e esse menu se encaixaria certinho se eu consegui-se fazer as divs com formato geométrico.

vou postar uma foto para melhor compreensão, quem souber algo e puder me dar uma ajuda, ficarei muito grato.

 

(Projeto do meu site)

 

 

(Menu do meu site)

 

 

(desenho das divs geometricas)

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

Faz assim mano,

cria essas imagens no PS, AI, Corel qual software desejar.

Depois utiliza CSS para posicionar elas onde deseja com position:absolute ou position:relative

Compartilhar este post

Link para o post
Compartilhar em outros sites

RoBINHoDC    1

RoBINHoDC
Postado

até colocar é de boa a imagem lá, mas se a div fosse nesse formato eu conseguiria fazer uma interpolação de menu.

assim conseguiria mudar a cor quando a pessoa passa o mouse, quando ela clica, o treta é que o cliente quer isso.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcelo Garbin    30

Marcelo Garbin
Postado

Faz um sprite com todas as imagens do menu e depois faz um hover via CSS...

 

Talvez isso ajude =)

 

 

P.S.: Tenta ver algo com "Curvy Corners" ou se não algo em CSS3 mesmo...

Compartilhar este post

Link para o post
Compartilhar em outros sites

RoBINHoDC    1

RoBINHoDC
Postado

Faz um sprite com todas as imagens do menu e depois faz um hover via CSS...

 

Talvez isso ajude =)

 

 

P.S.: Tenta ver algo com "Curvy Corners" ou se não algo em CSS3 mesmo...

 

talvez isso ajude, mas simplifica ae que num entendi nada :s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

CSS Sprite é quando você coloca todas as imagens em apenas uma imagem,

e define o que mostrar com position, faz isso que o rapaz de cima informou, acho mais viável e muito mais fácil.

 

com CSS Sprite seu site carrega muito mais rápido, pois ele carrega apenas uma imagem ao invés de carregar várias ..

 

http://tableless.com.br/css-sprites/

 

Boa Sorte ! :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcelo Garbin    30

Marcelo Garbin
Postado

Pedaaaaaalaa Robinho... zuera man :rolleyes:

 

Seguinte, eu fiz um modelo aqui em CSS da uma conferida me diga o que você acha, se é mais ou menos isso, pode usar esse código e modificar do jeito que você achar necessário.

 

Não ficou muito bom, até por que ainda eu não manjo muito de CSS3, mas acredito que possa lhe ajudar um pouco mais.... :thumbsup:

 

Copie e cole esse código em um HTML e veja se é mais ou menos isso... vai funcionar nos browser mais novos...

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Border</title>
<style type="text/css">

#cont-div{
position:relative;
margin-left:200px;
}

.menu-home, .menu-quem-somos, .menu-produtos, .menu-orcamento, .menu-contato{
width:0px;
height:0px;
border-left:80px solid transparent; 
border-right:80px solid transparent;
border-top:300px solid transparent; 
border-radius: 100%;
cursor:pointer;
}

.menu-home{  
border-top-color:#060;
-webkit-transform: rotate(-40deg);  
-moz-transform:    rotate(-40deg);  
-ms-transform:     rotate(-40deg); 
-o-transform: 		rotate(-40deg); 
transform: 		rotate(-40deg); 
}
.menu-home:hover{border-top-color:#090;}

.menu-quem-somos{
border-top-color:#CF3;
-webkit-transform: rotate(-70deg);  
-moz-transform:    rotate(-70deg);  
-ms-transform:     rotate(-70deg); 
-o-transform: 		rotate(-70deg); 
transform: 		rotate(-70deg); 
top:-235px;
left:-45px;
position:relative;
margin-top:3px;
}
.menu-quem-somos:hover{border-top-color:#9F6;}

.menu-produtos{
border-top-color:#06F;
-webkit-transform: rotate(-100deg);  
-moz-transform:    rotate(-100deg);  
-ms-transform:     rotate(-100deg); 
-o-transform: 		rotate(-100deg); 
transform: 		rotate(-100deg); 
top:-457px;
left:-50px;
position:relative;
margin-top:3px;
}
.menu-produtos:hover{border-top-color:#06C;}

.menu-orcamento{
border-top-color:#C3F;
-webkit-transform: rotate(-130deg);  
-moz-transform:    rotate(-130deg);  
-ms-transform:     rotate(-130deg); 
-o-transform: 	   rotate(-130deg); 
transform: 		   rotate(-130deg); 
top:-686px;
left:-17px;
position:relative;
margin-top:3px;
}
.menu-orcamento:hover{border-top-color:#C6F;}

.menu-contato{
border-top-color:#C03;
-webkit-transform: rotate(-160deg);  
-moz-transform:    rotate(-160deg);  
-ms-transform:     rotate(-160deg); 
-o-transform: 	   rotate(-160deg); 
transform: 		   rotate(-160deg); 
top:-938px;
left:45px;
position:relative;
margin-left:3px;
}
.menu-contato:hover{border-top-color:#C06;}


</style>
</head>
<body>

<div id="cont-div">
<div class="menu-home"></div>
   <div class="menu-quem-somos"></div>
   <div class="menu-produtos"></div>
   <div class="menu-orcamento"></div>
   <div class="menu-contato"></div>
</div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

Pedaaaaaalaa Robinho... zuera man :rolleyes:/>

 

Seguinte, eu fiz um modelo aqui em CSS da uma conferida me diga o que você acha, se é mais ou menos isso, pode usar esse código e modificar do jeito que você achar necessário.

 

Não ficou muito bom, até por que ainda eu não manjo muito de CSS3, mas acredito que possa lhe ajudar um pouco mais.... :thumbsup:/>

 

Copie e cole esse código em um HTML e veja se é mais ou menos isso... vai funcionar nos browser mais novos...

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Border</title>
<style type="text/css">

#cont-div{
position:relative;
margin-left:200px;
}

.menu-home, .menu-quem-somos, .menu-produtos, .menu-orcamento, .menu-contato{
width:0px;
height:0px;
border-left:80px solid transparent; 
border-right:80px solid transparent;
border-top:300px solid transparent; 
border-radius: 100%;
cursor:pointer;
}

.menu-home{  
border-top-color:#060;
-webkit-transform: rotate(-40deg);  
-moz-transform:    rotate(-40deg);  
-ms-transform:     rotate(-40deg); 
-o-transform: 		rotate(-40deg); 
transform: 		rotate(-40deg); 
}
.menu-home:hover{border-top-color:#090;}

.menu-quem-somos{
border-top-color:#CF3;
-webkit-transform: rotate(-70deg);  
-moz-transform:    rotate(-70deg);  
-ms-transform:     rotate(-70deg); 
-o-transform: 		rotate(-70deg); 
transform: 		rotate(-70deg); 
top:-235px;
left:-45px;
position:relative;
margin-top:3px;
}
.menu-quem-somos:hover{border-top-color:#9F6;}

.menu-produtos{
border-top-color:#06F;
-webkit-transform: rotate(-100deg);  
-moz-transform:    rotate(-100deg);  
-ms-transform:     rotate(-100deg); 
-o-transform: 		rotate(-100deg); 
transform: 		rotate(-100deg); 
top:-457px;
left:-50px;
position:relative;
margin-top:3px;
}
.menu-produtos:hover{border-top-color:#06C;}

.menu-orcamento{
border-top-color:#C3F;
-webkit-transform: rotate(-130deg);  
-moz-transform:    rotate(-130deg);  
-ms-transform:     rotate(-130deg); 
-o-transform: 	   rotate(-130deg); 
transform: 		   rotate(-130deg); 
top:-686px;
left:-17px;
position:relative;
margin-top:3px;
}
.menu-orcamento:hover{border-top-color:#C6F;}

.menu-contato{
border-top-color:#C03;
-webkit-transform: rotate(-160deg);  
-moz-transform:    rotate(-160deg);  
-ms-transform:     rotate(-160deg); 
-o-transform: 	   rotate(-160deg); 
transform: 		   rotate(-160deg); 
top:-938px;
left:45px;
position:relative;
margin-left:3px;
}
.menu-contato:hover{border-top-color:#C06;}


</style>
</head>
<body>

<div id="cont-div">
<div class="menu-home"></div>
   <div class="menu-quem-somos"></div>
   <div class="menu-produtos"></div>
   <div class="menu-orcamento"></div>
   <div class="menu-contato"></div>
</div>

</body>
</html>

 

Ficou muito bom Marcelo, parabéns ! :clap:

Compartilhar este post

Link para o post
Compartilhar em outros sites

RoBINHoDC    1

RoBINHoDC
Postado

Pedaaaaaalaa Robinho... zuera man :rolleyes:/>

 

Seguinte, eu fiz um modelo aqui em CSS da uma conferida me diga o que você acha, se é mais ou menos isso, pode usar esse código e modificar do jeito que você achar necessário.

 

Não ficou muito bom, até por que ainda eu não manjo muito de CSS3, mas acredito que possa lhe ajudar um pouco mais.... :thumbsup:/>

 

Copie e cole esse código em um HTML e veja se é mais ou menos isso... vai funcionar nos browser mais novos...

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Border</title>
<style type="text/css">

#cont-div{
position:relative;
margin-left:200px;
}

.menu-home, .menu-quem-somos, .menu-produtos, .menu-orcamento, .menu-contato{
width:0px;
height:0px;
border-left:80px solid transparent; 
border-right:80px solid transparent;
border-top:300px solid transparent; 
border-radius: 100%;
cursor:pointer;
}

.menu-home{  
border-top-color:#060;
-webkit-transform: rotate(-40deg);  
-moz-transform:    rotate(-40deg);  
-ms-transform:     rotate(-40deg); 
-o-transform: 		rotate(-40deg); 
transform: 		rotate(-40deg); 
}
.menu-home:hover{border-top-color:#090;}

.menu-quem-somos{
border-top-color:#CF3;
-webkit-transform: rotate(-70deg);  
-moz-transform:    rotate(-70deg);  
-ms-transform:     rotate(-70deg); 
-o-transform: 		rotate(-70deg); 
transform: 		rotate(-70deg); 
top:-235px;
left:-45px;
position:relative;
margin-top:3px;
}
.menu-quem-somos:hover{border-top-color:#9F6;}

.menu-produtos{
border-top-color:#06F;
-webkit-transform: rotate(-100deg);  
-moz-transform:    rotate(-100deg);  
-ms-transform:     rotate(-100deg); 
-o-transform: 		rotate(-100deg); 
transform: 		rotate(-100deg); 
top:-457px;
left:-50px;
position:relative;
margin-top:3px;
}
.menu-produtos:hover{border-top-color:#06C;}

.menu-orcamento{
border-top-color:#C3F;
-webkit-transform: rotate(-130deg);  
-moz-transform:    rotate(-130deg);  
-ms-transform:     rotate(-130deg); 
-o-transform: 	   rotate(-130deg); 
transform: 		   rotate(-130deg); 
top:-686px;
left:-17px;
position:relative;
margin-top:3px;
}
.menu-orcamento:hover{border-top-color:#C6F;}

.menu-contato{
border-top-color:#C03;
-webkit-transform: rotate(-160deg);  
-moz-transform:    rotate(-160deg);  
-ms-transform:     rotate(-160deg); 
-o-transform: 	   rotate(-160deg); 
transform: 		   rotate(-160deg); 
top:-938px;
left:45px;
position:relative;
margin-left:3px;
}
.menu-contato:hover{border-top-color:#C06;}


</style>
</head>
<body>

<div id="cont-div">
<div class="menu-home"></div>
   <div class="menu-quem-somos"></div>
   <div class="menu-produtos"></div>
   <div class="menu-orcamento"></div>
   <div class="menu-contato"></div>
</div>

</body>
</html>

Marcelo ficou top demais! , to desde manhã pesquisando sobre sass mas mano é embassado, num consegui nem configurar pra você ter uma ideia. mano me fala como você fez, pq ficou muito bom!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcelo Garbin    30

Marcelo Garbin
Postado

Cara como te falei usei CSS...

 

Como você pode ver o que mais fica em destaque é o triangulo, eu peguei e moldei a div até formar o triangulo com a propriedade "border" e depois usei "border-radius" para arredondar as bordas do triangulo (não ficou 100%) e para ir encaixando uma na outra eu fui usando, "top" e "left" juntamente com a propriedade "transform: rotate(Xdeg)".

 

Foi basicamente isso, ele não ta 100%, não ta muito bem alinhado, fiz mais pra você dar uma olhada de como pode ser feito em CSS, acredito que tem galera aqui no fórum 1.000 vezes melhor que eu pra fazer isso hehehe...

 

Qualquer coisa prende o grito aew :thumbsup:/>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito