Foros del Web » Creando para Internet » CSS »

Menu circular CSS3

Estas en el tema de Menu circular CSS3 en el foro de CSS en Foros del Web. Hola a todos , estoy maquetando mi primera web en CSS3 y tengo una duda, ¿Alguien me puede decir como puedo insertar un menú en ...
  #1 (permalink)  
Antiguo 31/03/2012, 11:07
 
Fecha de Ingreso: marzo-2012
Mensajes: 77
Antigüedad: 10 años, 3 meses
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>
CSS
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.

Etiquetas: circular, css3, html, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:15.