{"id":37,"date":"2012-06-14T18:00:18","date_gmt":"2012-06-15T00:00:18","guid":{"rendered":"http:\/\/j35u5.com.mx\/blog\/?p=37"},"modified":"2014-10-31T12:00:06","modified_gmt":"2014-10-31T18:00:06","slug":"menu-basico-en-css3-2","status":"publish","type":"post","link":"https:\/\/daimonikos.com\/blog\/menu-basico-en-css3-2\/","title":{"rendered":"Men\u00fa b\u00e1sico en CSS3"},"content":{"rendered":"

La llegada de las hojas de estilo CSS3 ha facilitado la forma de convertir un dise\u00f1o gr\u00e1fico a c\u00f3digo HTML. Con las nuevas propiedades podemos a\u00f1adir bordes redondeados, sombras internas y externas, sombras para texto, etc.<\/p>\n

Ver ejemplo en funcionamiento<\/a><\/div>\n

Para poder ir descubriendo estas nuevas propiedades, vamos a generar un menu de navegaci\u00f3n con estilos en CSS3. Lo primero que necesitamos es la estructura HTML:<\/p>\n

\r\n<div id="container">\r\n\t<ul>\r\n\t\t<li><a href="#">Inicio<\/a><\/li>\r\n\t\t<li><a href="#">Blog<\/a><\/li>\r\n\t\t<li><a href="#">Contacto<\/a><\/li>\r\n\t<\/ul>\r\n<\/div>\r\n<\/pre>\n
Empezaremos dando estilo al contenedor del men\u00fa. El color de fondo lo colocamos en formato rgba<\/em> para que tenga transparencia de .1 (10% del color).<\/p>\n
Redondeamos las esquinas con border-radius<\/em>, el valor de 100px nos asegura que las esquinas superiores e inferiores se junten. Con box-shadow<\/em> aplicamos una sombra interna (inset) y un brillo externo, cada conjunto de valores separados por una coma.<\/p>\n
\r\n#container{\r\n\tbackground:rgba(0,0,0,0.1);\r\n\tborder-radius:100px;\r\n\tbox-shadow: inset 0 1px 2px 0 rgba(0,0,0,.5), 0 1px 1px 0 rgba(255,255,255,.1);\r\n\tfloat:left;\r\n\tmargin:0 auto;\r\n\tpadding:5px;\r\n}\r\n<\/pre>\n
Ahora quitamos los m\u00e1rgenes y estilo a la lista:<\/p>\n
\r\n#container ul{\r\n\tlist-style:none;\r\n\tmargin:0;\r\n\tpadding:0;\r\n}\r\n<\/pre>\n
A cada elemento de la lista le colocaremos un borde a la derecha de un color claro y uno a la izquierda un poco mas obscuro, al igual que un brillo interno y una sombra externa, adem\u00e1s de centrar el texto y cambiar el color de fondo cuando pasemos el puntero del mouse y hagamos click.<\/p>\n
\r\n#container ul li{\r\n\tbackground: rgba(255,255,255,.1);\r\n\tborder-right: 1px solid #666;\r\n\tborder-left: 1px solid #444;\r\n\tbox-shadow: inset 0px 1px 1px 0px rgba(255,255,255,.2), 0px 1px 2px 0px rgba(0,0,0,0.5);\r\n\tfloat:left;\r\n\ttext-align: center;\r\n}\r\n#container ul li:hover {\r\n\tbackground: rgba(255,255,255,.3);\r\n}\r\n#container ul li:active {\r\n\tbackground: rgba(255,255,255,.4);\r\n}\r\n<\/pre>\n
Con los pseudo-selectores :first-child y :last-child haremos que el primero y el \u00faltimo elemento de la lista s\u00f3lo tengan bordes con otro elemento contiguo, as\u00ed como redondear las esquinas externas.<\/p>\n
\r\n#container ul li:first-child {\r\n\tborder-left: none;\r\n\tborder-radius: 100px 0 0 100px;\r\n}\r\n#container ul li:last-child {\r\n\tborder-right: none;\r\n\tborder-radius: 0 100px 100px 0;\r\n}\r\n<\/pre>\n
Por \u00faltimo, los estilos para los v\u00ednculos dentro de cada elemento de la lista.<\/p>\n
\r\n#container ul li a {\r\n\tcolor: #ddd;\r\n\tfont: 11px Arial, sans-serif;\r\n\tfloat:left;\r\n\tpadding:10px 30px;\r\n\ttext-shadow: 0px 1px rgba(0,0,0,0.5);\r\n\ttext-decoration: none;\r\n}\r\n<\/pre>\n
Y as\u00ed de f\u00e1cil tenemos nuestro men\u00fa estilizado completamente en CSS.<\/p>\n","protected":false},"excerpt":{"rendered":"
La llegada de las hojas de estilo CSS3 ha facilitado la forma de convertir un dise\u00f1o gr\u00e1fico a c\u00f3digo HTML. Con las nuevas propiedades podemos a\u00f1adir bordes redondeados, sombras internas y externas, sombras para texto, etc. Ver ejemplo en funcionamiento Para poder ir descubriendo estas nuevas propiedades, vamos a generar un menu de navegaci\u00f3n con […]<\/p>\n","protected":false},"author":1,"featured_media":176,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[10,9],"class_list":["post-37","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","tag-css3","tag-menu"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_links":{"self":[{"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/posts\/37","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/comments?post=37"}],"version-history":[{"count":0,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/posts\/37\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/media\/176"}],"wp:attachment":[{"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/media?parent=37"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/categories?post=37"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/tags?post=37"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}