31/03/2012, 11:07
|
| | | Fecha de Ingreso: marzo-2012
Mensajes: 77
Antigüedad: 13 años Puntos: 0 | |
| Menu circular CSS3
Hola a todos , estoy maquetando mi primera web en CSS3 y tengo una duda, ¿Alguien me puede decir como puedo insertar un menú en un DIV circular y que el menu se adapte al circulo?. Aquí os adjunto el código, el DIV "centro" es un circulo mas grande que el DIV centroencima que va encima del DIV centro. HTML
Código:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="style.css">
</HEAD>
<BODY>
<DIV id="centro">
<DIV id="centroencima">
</DIV>
</DIV>
</BODY>
</HTML>
Código:
#centro{
border: 1px solid black;
border-radius: 200px;
background-image: -webkit-gradient(linear, center top, center bottom, from(#bfbfbf), to(#fcfcfc), color-stop(10%, #d9d9d9), color-stop(88%, #f2f2f2), color-stop(97%, #f7f7f7));
background-image: -webkit-linear-gradient(top, #bfbfbf, #d9d9d9 10%, #f2f2f2 88%, #f7f7f7 97%, #fcfcfc);
background-image: -moz-linear-gradient(top, #bfbfbf, #d9d9d9 10%, #f2f2f2 88%, #f7f7f7 97%, #fcfcfc);
background-image: -o-linear-gradient(top, #bfbfbf, #d9d9d9 10%, #f2f2f2 88%, #f7f7f7 97%, #fcfcfc);
background-image: -ms-linear-gradient(top, #bfbfbf, #d9d9d9 10%, #f2f2f2 88%, #f7f7f7 97%, #fcfcfc);
background-image: linear-gradient(to bottom, #bfbfbf, #d9d9d9 10%, #f2f2f2 88%, #f7f7f7 97%, #fcfcfc);
-webkit-box-shadow: 0 1px 0 white, inset 0 1px 7px rgba(0,0,0,0.4);
-moz-box-shadow: 0 1px 0 white, inset 0 1px 7px rgba(0,0,0,0.4);
box-shadow: 0 1px 0 white, inset 0 1px 7px rgba(0,0,0,0.4);
height:400px;
width:400px;
margin:0 auto;
margin-top:120px;
}
#centroencima{
border: 1px solid black;
border-radius: 200px;
background-image: -webkit-gradient(linear, center top, center bottom, from(#d1ede9), to(#00bfa2), color-stop(3%, #c1e9e3), color-stop(12%, #b1e4dc), color-stop(90%, #59d2bf));
background-image: -webkit-linear-gradient(top, #d1ede9, #c1e9e3 3%, #b1e4dc 12%, #59d2bf 90%, #00bfa2);
background-image: -moz-linear-gradient(top, #d1ede9, #c1e9e3 3%, #b1e4dc 12%, #59d2bf 90%, #00bfa2);
background-image: -o-linear-gradient(top, #d1ede9, #c1e9e3 3%, #b1e4dc 12%, #59d2bf 90%, #00bfa2);
background-image: -ms-linear-gradient(top, #d1ede9, #c1e9e3 3%, #b1e4dc 12%, #59d2bf 90%, #00bfa2);
background-image: linear-gradient(to bottom, #d1ede9, #c1e9e3 3%, #b1e4dc 12%, #59d2bf 90%, #00bfa2);
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
box-shadow: 0 1px 5px rgba(0,0,0,0.75);
height:300px;
width:300px;
margin:0 auto;
position:relative;
top:50px;
}
body{
background-color:#d1ede9;
}
Gracias. |