Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom galera to até sem jeito de voltar aki denovo e abrir outro topico, achei que tinha resolvido mas na pratica mesmo, não consegui não, após mostrar para o meu cliente ela não gostou nada e falou que não queria isso...
O que ela quer é que tenha esse formato, só que com os icones do menu, que foi colocado no layout. Não sei o que faço pois o que eu consegui foi com a ajuda do Marcelo, preciso de algo que junta-se o do marcelo com o os icones do meu layout... será que alguem pode me ajudar??
a Imagem do site
abaixo segue o codigo que o Marcelo me ajudou
<!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-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-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-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-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;
}</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>>
Achei que fosse mais difícil já que não manjo muito de CSS3, mas foi bem fácil.
Primeiro você tem de adicionar os ícones, óbvio. Eu optei por uma tag IMG dentro de cada item do menu.
Depois você tem de desfazer a rotação. Apesar de none servir para isso, no Fiddle não funcionou, então eu copiei o valor do elemento pai (a DIV) e inverti o sinal.
Por fim, basta posicionar absolutamente e ajustar o top e o left
Fiz um no Fiddle para demonstrar.
Seja lá quem for o Marcelo que você mencionou, parabéns. :clap:/>
oh bruno desculpa eu estar incomodando cara, mas tento mudar aki e não acontece nada, já fiz o png com o tamanho do icone que você colocou mas não muda nada cara...
Posta como você fez então.
>
Posta como você fez então.
<!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>Untitled Document</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-quem-somos{
border-top-color:#CF3;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
transform: rotate(-80deg);
top:-235px;
left:-45px;
position:relative;
margin-top:3px;
}.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-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-contato{
border-top-color:#C03;
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
top:-938px;
left:45px;
position:relative;
margin-left:3px;
}div[class*="home"] img {
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
height: 64px; width: 64px;
position: absolute;
}-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(150deg);
height: 64px;
width: 64px;
position: absolute;
}-webkit-transform: rotate(80deg);
-moz-transform: rotate(80deg);
-ms-transform: rotate(80deg);
-o-transform: rotate(80deg);
transform: rotate(140deg);
height: 64px;
width: 64px;
position: absolute;
}-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(180deg);
height: 64px;
width: 64px;
position: absolute;
}-webkit-transform: rotate(40deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(150deg);
height: 64px;
width: 64px;
position: absolute;
}div.menu-home img {
top: -265px;
left: -28px;
}top: -305px;
left: -38px;
}top: -305px;
left: -38px;
}top: -305px;
left: -38px;
}top: -305px;
left: -38px;
}
.menu-contato1 {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-home1 {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-orcamento1 {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-produtos1 {width:0px;
height:0px;
border-left:80px solid transparent;
border-right:80px solid transparent;
border-top:300px solid transparent;
border-radius: 100%;
cursor:pointer;
}
</style>
</head>
<body>
<div id="cont-div">
<div class="menu-home">
<img src="images/home.png" />
</div>
<div class="menu-quem-somos">
<img src="images/quem_somos.png" />
</div>
<div class="menu-produtos">
<img src="images/produto.png" />
</div>
<div class="menu-orcamento">
<img src="images/orcamento.png" />
</div>
<div class="menu-contato">
<img src="images/contato.png" />
</div>
</div>
</body>
</html>Parece que pelo jeito você errou nas rotações.
Pela imagem que você postou, todas elas ficariam na mesma posição da primeira.
Então parta do princípio que todas elas são iguais e vá girando aos pouquinhos, pra esquerda ou pra direita.
>
Parece que pelo jeito você errou nas rotações.
Pela imagem que você postou, todas elas ficariam na mesma posição da primeira.
Então parta do princípio que todas elas são iguais e vá girando aos pouquinhos, pra esquerda ou pra direita.
eu não sei aonde gira, nem aonde move elas para o lado, tentei achar a função, mas aonde eu altero, não muda, nem gira.
Posicionar o elemento é coisa básica que qualquer um deve saber, mas em todo o caso, um tutorial ajuda.
Já a rotação é um pouquinho só mais complicado, e o Maujor arrebentou com a Tutorial Interativo de CSS3
Achei que fosse mais difícil já que não manjo muito de CSS3, mas foi bem fácil.
Primeiro você tem de adicionar os ícones, óbvio. Eu optei por uma tag IMG dentro de cada item do menu.
Depois você tem de desfazer a rotação. Apesar de none servir para isso, no Fiddle não funcionou, então eu copiei o valor do elemento pai (a DIV) e inverti o sinal.
Por fim, basta posicionar absolutamente e ajustar o top e o left
Fiz um no Fiddle para demonstrar.
Seja lá quem for o Marcelo que você mencionou, parabéns. :clap: