[Resolvido] menu em arco CSS

[jokita18 0]

Olá gostava de saber como fazer um menu como este utilizando css/html .a minha duvida é como colocar o menu em arco. pois se fizer como sempre fiz (construído e formatando o menu pela ul/li)não é possível coloca-lo nesta forma.

Poder-me-iam dar algumas dicas de como faze-lo?

Desde já agradecido

jokita18

[angelorubin 142]

Boa noite,

 

Tem como fazer sim, veja - Clique aqui

 

CSS

#quem_somos {
box-shadow: 3px 3px 4px #000;
margin:35px 0 0 40px;
float:left;
overflow:hidden;
border-radius:20px;
width:200px;
height:auto;
min-height:300px;
border:1px solid #CCC;
background-color:#FFF;
/* Rotate a */
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /* Internet Explorer */
-moz-transform:rotate(-15deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
position:relative;
z-index:3;
}

#servicos {
box-shadow: 3px 3px 4px #000;;
margin:5px 0 0 0;
float:left;
overflow:hidden;
border-radius:20px;
width:200px;
height:auto;
min-height:300px;
border:1px solid #CCC;
background-color:#FFF;
/* Rotate a */
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /* Internet Explorer */
-moz-transform:rotate(-5deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
position:relative;
z-index:2;
}

#destaque {
box-shadow: 3px 3px 4px #000;
margin:10px 0 0 0;
float:left;
overflow:hidden;
border-radius:20px;
width:200px;
height:auto;
min-height:300px;
border:1px solid #CCC;
background-color:#FFF;
/* Rotate a */
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /* Internet Explorer */
-moz-transform:rotate(10deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
position:relative;
z-index:1;
}

#contactos {
box-shadow: 3px 3px 4px #000;
margin:55px 0 0 0;
float:left;
overflow:hidden;
border-radius:20px;
width:200px;
height:auto;
min-height:300px;
border:1px solid #CCC;
background-color:#FFF;
/* Rotate a */
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /* Internet Explorer */
-moz-transform:rotate(20deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
position:relative;
z-index:0;
}

.quem_somos{
background: -moz-linear-gradient(top, #FFF,  #0CF);
height:200px;
overflow:hidden;
border-radius:none;
margin:35px 20px 20px 20px;
text-align:center;
font-family:Verdana, Geneva, sans-serif;
font-size:1em;
text-decoration:none;
}

.quem_somos a {
text-shadow: 0.1em 0.1em 0.05em #333;
font-family:Verdana, Geneva, sans-serif;
font-size:1em;
text-decoration:none;
margin:20px;
display:inline-block;
color:#FFF;
}

.servicos{
background: -moz-linear-gradient(top, #FFF,  #6F0);
height:200px;
overflow:hidden;
border-radius:none;
margin:35px 20px 20px 20px;
text-align:center;
font-family:Verdana, Geneva, sans-serif;
font-size:1em;
text-decoration:none;;
}

.servicos a {
text-shadow: 0.1em 0.1em 0.05em #333;
font-family:Verdana, Geneva, sans-serif;
font-size:1em;
text-decoration:none;
margin:20px;
display:inline-block;
color:#FFF;
}

.destaque {
background: -moz-linear-gradient(top, #FFF,  #FC0);
height:200px;
overflow:hidden;
border-radius:none;
margin:35px 20px 20px 20px;
text-align:center;
font-family:Verdana, Geneva, sans-serif;
font-size:1em;
text-decoration:none;
}

.destaque a {
text-shadow: 0.1em 0.1em 0.05em #333;
font-family:Verdana, Geneva, sans-serif;
font-size:1em;
text-decoration:none;
margin:20px;
display:inline-block;
color:#FFF;
}

.contactos {
background: -moz-linear-gradient(top, #FFF,  #F0F);
height:200px;
overflow:hidden;
border-radius:none;
margin:35px 20px 20px 20px;
text-align:center;
font-family:Verdana, Geneva, sans-serif;
font-size:1em;
text-decoration:none;
}

.contactos a {
text-shadow: 0.1em 0.1em 0.05em #333;
font-family:Verdana, Geneva, sans-serif;
font-size:1em;
text-decoration:none;
margin:20px;
display:inline-block;
color:#FFF;
}

 

XHTML

   <div id="quem_somos" href="#"><div class="quem_somos"><a href="#">Quem Somos</a></div></div>
   <div id="servicos" href="#"><div class="servicos"><a href="#">Serviços</a></div></div>
   <div id="destaque" href="#"><div class="destaque"><a href="#">Destaque</a></div></div>
   <div id="contactos" href="#"><div class="contactos"><a href="#">Contactos</a></div></div>

 

Falta ajustes, fiz na correria, da para melhorar MUITO, esta rodando somente no FF, mas ai é contigo os ajustes !

 

Espero que ajude.

[Diéssica 140]

+ pra ti angelorubin! Muito bom!

 

Selecionei alguns links como sugestão:

:seta: http://css3please.com/

:seta: http://maujor.com/tutorial/abreviacss.php

:seta: http://css3shapes.com/

:seta: http://www.webdesignerdepot.com/2009/08/5-css3-design-enhancements-that-you-can-use-today/

 

:bye:

[jokita18 0]

Obrigado ao dois. Esta foi uma excelente ajuda.como você disse só esta a funcionar no ff tentei alterar alguns parâmetros para ficar compatível com os outros nevegadores. Mas não estou a conseguir . poderá dizer-me quais os parametrus que estão a causar esta incompatibilidade?

Muitíssimo obrigado

[Diéssica 140]

Nem todos os navegadores suportam totalmente o CSS3. Ainda é meio "experimental".

 

:seta: http://css3please.com/

:seta: http://maujor.com/tutorial/abreviacss.php

:seta: http://css3shapes.com/

:seta: http://www.webdesignerdepot.com/2009/08/5-css3-design-enhancements-that-you-can-use-today/

[jokita18 0]

obrigado! obrigado! Não tenho palavras para agradecer...problema resolvido (cortei cada botão e inclinei a imagem pelo código que o angelorubin indicou.

:thumbsup: