SIMPLE MENU CON CSS En el uso comn de usar una barra horizontal como men de un sitio web es comn

encontrarse sin suficiente ancho para agregar todas las partes de el sitio. Esto se suele solucionar ordenando el men en categoras y subcategoras, estas ltimas aparecen tan solo cuando pasamos el raton por encima de las categoras principales. Hoy aprenderemos a hacer esto sin necesidad de utilizar Java Script.

Autor: Jack Bach Bach es el autor principal de este blog. A los 15 aos le dio por hacer un juego en flash y eso le llev a hacer una web para mostrarlo al mundo. Ahora ya han pasado unos aos y ha aprendido sobre todo XHTML y CSS para maquetar sus diseos web.

Objetivo
Convertir un men horizontal de un solo nivel en uno de varios niveles. Queremos que al pasar por encima de un tem del primer nivel se vea un cuadro con las subcategoras. Tomaremos como base el men del antiguo tutorial sobre menus con css, aunque no es imprescindible haberlo ledo.

El HTML
Recordemos que el cdigo que tenamos era este:
<div id="contenido"> <div class="menu"> <div id="menu_i"></div> <div id="menu_d"></div> <ul> <li><a href="#">Blog</a></li>

<li><a href="#">Tutoriales</a></li> <li><a href="#">Tips</a></li> <li><a href="#">Freebies</a></li> <li><a href="#">Foro</a></li> </ul> </div><!-- fin Menu --> </div><!-- fin Contenido -->

Vamos a aadir las subcategoras del men. Para hacerlo, vamos a crear una lista dentro de otra lista. Dentro de las etiquetas <li> y </li> a las que van a pertenecer las subcategoras, despus del link que finaliza con </a> insertamos otras etiquetas de <ul> y dentro de ellas los distintos tems entre etiquetas <li>. Tenemos algo as:
<div id="contenido"> <div> <div id="menu_i"></div> <div id="menu_d"></div> <ul> <li><a href="#">Blog</a></li> <li><a href="#">Tutoriales</a> <ul> <li><a href="#">Clasicos</a></li> <li><a href="#">Screencasts</a></li> <li><a href="#">Tips</a></li> </ul> </li> ... </ul> </div><!-- fin Menu --> </div><!-- fin Contenido -->

Para las flechitas que salen encima de cada menu desplegable hemos aadido <span></span> al principio de cada submenu, en el cdigo anterior sera despus del <ul> de la lnea 7. El HTML fcil verdad? Vamos a por CSS que es un poco ms complicado

El CSS
Antes de empezar con lo de hoy vamos a modificar dos cositas del ejemplo anterior: 1. En vez de usar display inline para alinear los tems de la lista (li) usaremos el float left. El resultado es el mismo, pero hace que luego los submenus salgan en su sitio.
.menu li { float: left; }

2. A causa de esto, la altura del menu (.menu) se ve reducida. Se podra solucionar con un clear both, aunque nosotros simplemente definiremos la altura con height.
.menu {

height: 70px; }

Dicho lo dicho vamos a por lo importante. La bases de este men van a ser:

La propiedad display que nos va a permitir hacer desaparecer un elemento de la pgina (none) o hacerlo aparecer (block). Podemos acceder de la siguiente forma a los estilos que hay dentro de otro estilo cuando pasamos por encima de este ltimo:

.menu ul li:hover ul {...}

El estilo que pongamos entre las dos llaves afectar al ltimo ul cuando el ratn pase por encima del li que lo contiene. Combinando esto podemos hacer que por defecto el display de .menu ul li ul sea none es decir, que los submenus por defecto no se vean pero que cuando pasemos por encima de un tem de la primera lista aparezca este submenu el display ser block. Nos queda algo as:
.menu ul li ul { display: none; /* De lo que hablbamos */ background: #cac99e ; padding: 10px 0; position: absolute; /* Muy importante */ margin: -12px -20px; /* Lo colocamos donde queremos */ .margin: 69px -170px; /* Hacks para colocarlo bien en ie */ _margin: 69px -170px; } .menu ul li:hover ul { display: block; }

Como hemos hecho que los li de .menu se alineen con float left, la lista del submen tambin se alineear. Para hacer que cada tem salga en una lnea usaremos float none.
.menu ul li ul li { display: block; float: none; position: relative; color: #fff; padding: 0 20px; line-height: 30px; }

Para la flecha de arriba emos usado <span></span> en el html. El cdigo css es realmente sencillo: le damos un alto, un ancho, un fondo y posicionamos.
.menu ul li ul span { background: url('img/flecha.png');

margin: -20px 50px; width: 20px; height: 10px; position: absolute; }

Y esto es ms o menos todo. Lo dems son detalles que podis ver descargandos el cdigo. Cualquier duda o comentario, abajo tenis un formulario, Animaros! Si os ha gustado el tutorial acordaros de suscribiros al feed o seguirme en twitter.

2.- CLASE TARGET ENGLISH Today, CSS3 has become a buzzword of modern web designers and developers around the globe. With its ground-breaking features, CSS3 has made a profound impact on the web designer community by making the lives of web designers easier and fun filled. Here in this post I am going to explain such a cool CSS3 feature called :target Pseudo Class. By playing around and experimenting with the :target pseudo class, I have developed a cool looking pure CSS dropdown menu. This menu is developed wholly using CSS and HTML, no images or javascripts used. Hence it is easily customizable for anyone with very basic css/html knowledge. Before we continue about how to create the menu, lets take a look at the fully-functional menu here
VIEW DEMO

CSS Pseudo Classes

CSS pseudo-classes are used to add a special state or relation to a selector. A pseudo class normally starts with a colon (:) and is appended to a type selector or universal selector without any whitespace in between the selector name and the pseudo class. Pseudo-class names are case-insensitive. Some pseudo-classes are mutually exclusive, while others can be applied simultaneously to the same element. Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document. So, in simple words pseudo classes are really helpful to pick a CSS element in its various states.
Syntax
1 selector:pseudo-class { property:value; }

Example
1 a.navigation:hover { color: #ff0000; }

:target Pseudo Class

CSS3 offers many more pseudo-classes than CSS2, :target pseudo class is a key structural pseudo-class in the list. Some URIs refers to a location within a resource. This kind of URI ends with a hash (#) sign followed by an anchor identifier (called the fragment identifier). URIs with fragment identifiers link to a certain element within the document, known as the target element. A target element can be represented by the :target pseudo-class.
Example
1 .wrapper ul li:target { color: #ff0000; }

Pure CSS DropDown Menu

A highly customizable pure CSS dropdown menu shaped using :target pseudo class. This menu is fully compatible on all modern browsers including IE9. This cool looking menu is created completely using CSS, no images or javascript in it. I have tried a comination of :target and :hover pseudo classes here to get the menu effect. The menu have a cool animation whch can only be seen on webkit browsers.
VIEW DEMO

A trimmed down version code of the above example is given below for easy understanding. You can download the fully functional cross-browser compatible version of this menu from the download link at the bottom part of this post.

The HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <div class="wrapper"> <ul> <li id="a"><a href="#a">Web Design</a> <div> <hr/><b>HTML:</b> <a href="#">Tutorials</a> | <a href="#">Resources</a> <hr/><b>CSS:</b> <a href="#">Tutorials</a> | <a href="#">Examples</a> <hr/><b>CMS:</b> <a href="#">Drupal</a> | <a href="#">Wordpress</a> </div> </li> <li id="b"><a href="#b">Graphic Design</a> <div> <hr/><b><a href="#">Printmaking</a></b> <hr/><b><a href="#">Visual Arts</a></b> </div> </li> <li id="c"><a href="#c">Animation &amp; Graphics</a> <div> <hr/><b>2D Animation:</b><br /> <a href="#">Analog animation</a> | <a href="#">Flash animation</a> <hr/><b>3D Animation:</b><br /> <a href="#">Motion capture</a> | <a href="#">Photo realistic</a>

25 26 27 28 29 30

</div> </li> <li id="d"><a href="#d">Design Resources</a> <div> <hr/><b><a href="#">w3schools.com</a></b> <hr/><b><a href="#">alistapart.com</a></b> <hr/><b><a href="#">smashingmagazine.com</a></b> </div> </li> </ul> </div>

The CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 .wrapper { width: 600px; position: absolute; } .wrapper ul { list-style: none; } .wrapper ul li { background-color: #F8F8F8; border: 1px solid #a9a9a9; display: block; float: left; font: bold 12px arial; height: 30px; line-height: 30px; overflow: hidden; padding-left: 15px; position: absolute; width: 135px; z-index: 10000; -webkit-box-shadow:0px 3px 5px #cacaca; -moz-box-shadow:0px 3px 5px #cacaca; box-shadow:0px 3px 5px #cacaca; background: linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);} .wrapper ul li:hover { background: linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);} .wrapper ul li:first-child { -moz-border-radius: 4px 0 0 4px; -webkit-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; } .wrapper ul li:last-child { -moz-border-radius: 0 4px 4px 0; -webkit-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; } .wrapper ul li#b { margin-left: 151px; } .wrapper ul li#c { margin-left: 302px; } .wrapper ul li#d { margin-left: 453px; } .wrapper ul li a {

42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83

display: block; text-decoration: none; color: #303030; } .wrapper ul li div { text-align: left; font: normal 11px arial; line-height: 19px; margin: 10px 0; } .wrapper ul li div a { display: inline; } .wrapper ul li div a:hover { text-decoration: underline; } .wrapper ul li div hr { border: none; border-top: 1px dotted #a0a0a0; margin: 5px 0; width: 95%; } .wrapper ul li:hover:target { display: inherit; padding: 0px; padding-left:15px; opacity: .97; -moz-opacity: .97; -webkit-transition: height 0.4s ease-in; } .wrapper ul li#a:hover:target { height: 130px; width: 350px; background: #f0f9ff; } .wrapper ul li#b:hover:target { height: 105px; background: #ffffd6; } .wrapper ul li#c:hover:target { height: 145px; width: 200px; background: #f8ffe8; } .wrapper ul li#d:hover:target { height: 140px; width: 165px; position: relative; float: right; margin-right: -5px; z-index: 0; text-align: center; background: #f9f286; }

Browser Compatibility

This menu is fully compatible on all major modern browser versions including IE9.

Internet Explorer Version 6 to 8

The CSS3 pseudo class support can be obtained in Internet Explorer versions 6 to 8 with a cool award winning javascript library called selectivizr. selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest. Selectivizr works automatically so you dont need any JavaScript knowledge to use it you wont even have to modify your style sheets. Just start writing CSS3 selectors and they will work in IE. Selectivizr requires a JavaScript library to work. If your website already uses one of the 7 supported libraries you just need to add the selectivizr script to your pages. If not, you will need to pick a library too.

Possible Concerns
1. Need to click the main menu to initiate the dropdown menu for the first time. 2. Since this technique uses :target pseudo class based in-page referencing, each time the menu is clicked on a page that has scrolling, the menu moves to the top of the page. 3. Lack of support from older browser versions.

Download

You can use these menus for personal and commercial projects at free of charge. What I only expect in return is your comments and backlinks, if you like it. You are not allowed to sell or redistribute these menus anywhere else. If you like to share this menu please link to this article. Do not provide the direct download link nor upload these menus onto other servers for your own share, without my permission. If you want to spread the words, just link to this article. 1. CLASE TARGET ESPAOL Hoy en da, CSS3 se ha convertido en una palabra de moda de diseadores y desarrolladores web modernos de todo el mundo. Con sus innovadoras caractersticas, CSS3 ha hecho un profundo impacto en la comunidad de diseador de pginas web al hacer las vidas de los diseadores de pginas web ms fcil y lleno de diversin. Aqu, en este post voy a explicar una caracterstica llamada fra CSS3: Clase de destino Pseudo. Al jugar y experimentar con el: pseudo-clase de destino, he desarrollado un men fresco buscando puro CSS desplegable. Este men se desarrolla por completo el uso de CSS y HTML, sin imgenes o javascripts utilizados. Por lo tanto, es fcilmente personalizable para cualquier persona con muy bsico CSS / HTML conocimiento.

Antes de continuar sobre cmo crear el men, vamos a echar un vistazo al men con todas las funciones aqu ...
VER DEMO

CSS pseudo-clases
CSS pseudo-clases se utilizan para agregar un estado especial o relacin con un selector. Una pseudo clase normalmente comienza con dos puntos (:) y se aade a un selector de tipo de seleccin o universal sin ningn tipo de espacios en blanco entre el nombre y el selector de pseudo clase. Pseudo-clase los nombres distinguen entre maysculas y minsculas. Algunas pseudo-clases son mutuamente excluyentes, mientras que otros pueden aplicarse simultneamente al mismo elemento. Las pseudo-clases pueden ser dinmicas, en el sentido de que un elemento puede adquirir o perder una pseudo-clase, mientras que un usuario interacta con el documento. As, en palabras simples pseudo clases son muy tiles para elegir un elemento de CSS en sus diversos estados.
Sintaxis
1 selector de pseudo-clase: {propiedad: valor;}

Ejemplo
1 una navegacin: hover {color: # ff0000;}.

: Clase de destino Pseudo

CSS3 ofrece muchas ms pseudo-clases de CSS2,: pseudo-clase de destino es un problema estructural clave de la pseudo-clase en la lista. Algunos URI se refiere a una ubicacin dentro de un recurso. Este tipo de URI termina con un "hash (#) signo seguido de un identificador de ancla (llamado identificador de fragmento). URI con identificadores de fragmentos enlazar a un cierto elemento dentro del documento, conocido como el elemento de destino. Un elemento de destino puede ser representado por el: diana pseudo-clase.
Ejemplo
1 . Envoltorio ul li: target {color: # ff0000;}

Pure CSS Menu DropDown

Un men de pura altamente personalizable con CSS desplegable en forma de: pseudo-clase de destino. Este men es totalmente compatible en todos los navegadores modernos, incluyendo IE9. Este men de aspecto atractivo se crea por completo el uso de CSS, imgenes o javascript no en ella. He intentado un comination de: objetivo y: hover pseudo clases aqu para obtener el efecto del men. El men tiene una apartada de animacin fresca slo puede ser visto en los navegadores WebKit.

VER DEMO

Un cdigo de versin reducida del ejemplo anterior se da a continuacin para una fcil comprensin. Puede descargar el pleno funcionamiento de cross-browser compatible con la versin de este men desde el enlace de descarga en la parte inferior de este post.

El cdigo HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<Div class = "wrapper"> <Ul> <Li id = "a"> <a href = "# un"> Diseo Web </ a> <Div> <Hr /> <b> HTML: </ b> <a href = "#"> Tutoriales </ a> | <a href = "#"> Recursos </ a> <HR /> <b> CSS: </ b> <a href = "#"> Tutoriales </ a> | <a href = "#"> Ejemplos </ a> <Hr /> <b> CMS: </ b> <a href = "#"> Drupal </ a> | <a href = "#"> Wordpress </ a> </ Div> </ Li> <Li id = "b"> <a href = "# b"> Diseo grfico </ a> <Div> <Hr /> <b> <a href = "#"> Grabado </ a> </ b> <Hr /> <b> <a href = "#"> Artes Visuales </ a> </ b> </ Div> </ Li> <Li id = "c"> <a href = "# c"> Animacin y grficos </ a> <Div> <Hr /> <b> Animacin 2D: </ b> <br /> <a href = "#"> la animacin analgica </ a> | <a href = "#"> Animacin Flash </ a> <Hr /> <b> Animacin 3D: </ b> <br /> <a href = "#"> La captura de movimiento </ a> | <a href = "#"> Foto realista </ a> </ Div> </ Li> <Li id = "d"> <a href = "# d"> Recursos de Diseo </ a> <Div> <Hr /> <b> <a href = "#"> w3schools.com </ a> </ b> <Hr /> <b> <a href = "#"> alistapart.com </ a> </ b> <Hr /> <b> <a href = "#"> smashingmagazine.com </ a> </ b> </ Div> </ Li> </ Ul> </ Div>

28 29 30

El CSS
. Contenedor { ancho: 600px; position: absolute;} . Envoltorio ul { list-style: none;} . Envoltorio ul li { background-color: # F8F8F8; border: 1px solid # a9a9a9; display: block; float: left; fuente: Arial negrita 12px; altura: 30px; line-height: 30px; overflow: hidden; padding-left: 15px; position: absolute; ancho: 135px; z-index: 10000; -Webkit-box-shadow: 3px 0px 5px # cacaca; -Moz-box-shadow: 3px 0px 5px # cacaca; box-shadow: 3px 0px 5px # cacaca; fondo: linealgradiente (arriba, # ffffff 0%, # f1f1f1 50%, # e1e1e1 51%, # f6f6f6 100%);} . Envoltorio ul li: hover { fondo: linealgradiente (arriba, # ffffff 0%, # f3f3f3 50%, # ededed 51%, # ffffff 100%);} . Envoltorio ul li: first-child { -Moz-border-radius: 4px 0 0 4px; -Webkit-borderradius: 4px 0 0 4px; border-radius: 4px

1 19 34 49 64 79

2 3 4 20 21 35 36 50 51 65 66 80 81

5 6 7 22 23 37 38 52 53 67 68 82 83

8 9 10 11 12 13 14 15 16 17 18 24 25 26 27 28 29 30 31 32 33 39 40 41 42 43 44 45 46 47 48 54 55 56 57 58 59 60 61 62 63 69 70 71 72 73 74 75 76 77 78

4px 0 0;} . Envoltorio ul li: lastchild { -Moz-border-radius: 0 4px 4px 0; -Webkit-borderradius: 0 4px 4px 0; border-radius: 0 4px 4px 0;} . Envoltorio ul li {# b margin-left: 151px;} . Envoltorio ul li {c # margin-left: 302px;} . Envoltorio ul li {d # margin-left: 453px;} . Envoltorio ul li a { display: block; text-decoration: none; color: # 303030;} . Envoltorio ul li {p text-align: left; fuente: Arial normal de 11px; line-height: 19px; margin: 10px 0;} . Envoltorio ul li a {p display: inline;} . Contenedor div ul li a: hover { text-decoration: underline;} . Envoltorio ul li {div h la frontera: none; border-top: 1px # a0a0a0 puntos; margin: 5px 0; ancho: 95%;} . Envoltorio ul li: hover: el destino { visualizar: heredar; padding: 0px; padding-left: 15px; opacidad: 0,97; -Moz-opacity: 0.97; -Webkit-transicin: altura de 0,4 s facilidad en el;} . Envoltorio ul li # a: hover: el destino { altura: 130px; ancho: 350px; background: # f0f9ff;} . Envoltorio ul li # b: hover: el destino { altura: 105px;

background: # ffffd6;} . Envoltorio ul li # c: hover: el destino { altura: 145px; ancho: 200px; background: # f8ffe8;} . Envoltorio ul li # d: hover: el destino { altura: 140px; ancho: 165px; position: relative; float: right; margin-right:-5px; z-index: 0; text-align: center; background: # f9f286;}

Compatibilidad del navegador

Este men es totalmente compatible en todas las versiones de los navegadores modernos, incluyendo las principales IE9.
Internet Explorer versin 6 a 8

El soporte de CSS3 pseudo clase se puede obtener en Internet Explorer versiones 6 a 8 con un premio genial ganar Javascript biblioteca llamada selectivizr . selectivizr es una utilidad de JavaScript que emula CSS3 pseudo-clases y selectores de atributos en Internet Explorer 8.6. Basta con incluir el script en sus pginas y selectivizr har el resto. Selectivizr funciona de forma automtica por lo que no es necesario ningn conocimiento de JavaScript para usar - puede que ni siquiera tendr que modificar sus hojas de estilo. Simplemente comienza a escribir selectores CSS3 y que van a trabajar en el IE. Selectivizr requiere una biblioteca JavaScript para trabajar. Si su sitio web ya utiliza una de las 7 bibliotecas apoyadas slo tiene que agregar el script selectivizr a sus pginas. Si no, usted tendr que elegir una biblioteca tambin.

Las preocupaciones posibles

1. Necesitas hacer clic en el men principal para iniciar el men desplegable, por primera vez. 2. Dado que esta tcnica utiliza: pseudo-clase de destino con base en la pgina de

referencias, cada vez se hace clic en el men en una pgina que tiene el desplazamiento, el men se traslada a la parte superior de la pgina. 3. La falta de apoyo de las versiones anteriores del navegador.

Descargar

Usted puede usar estos mens para proyectos personales y comerciales en forma gratuita. Lo que slo esperan a cambio es sus comentarios y vnculos de retroceso, si te gusta. No est permitido vender o redistribuir estos mens en cualquier otro lugar. Si te gusta compartir este men por favor enlace a este artculo. No proporcione el enlace de descarga directa ni cargar estos mens en los servidores de otros para su propia cuota, sin mi permiso. Si desea difundir las palabras, slo un enlace a este artculo.

Pure CSS Menu DropDown con: pseudo-clase de destino por Deepu Balan est bajo una licencia Creative Commons Attribution 2.5 License la India . Basado en un trabajo en deepubalan.com .
Artculos Relacionados

Texto de desbordamiento de la propiedad de CSS3 explic - Pure solucin CSS para conseguir puntos suspensivos El principio DRY en el diseo web RGBA vs Opacidad: La diferencia se debe CSS Corazn - Una forma de diseador de pginas web que deseen Da de San Valentn ... Sprites Cool - Free superpuesta men CSS con CSS Sprites

2.. OTRO MENU DESPLEGABLE

Crear un men desplegable con CSS pero sin Javascript

el septiembre 15, 2010 en Tips y codigos

menu desplegable CSS Hoy en da los mens desplegables son muy populares, en especial por el ahorro de espacio, y la comodidad que le ofrecen al usuario, ademas en la mayora de los casos resulta ser una buena opcin para el SEO debido a su la organizacin del HTML como elementos de lista. Sin embargo cuando buscamos en Internet un men desplegable para implementar en nuestro sitio web casi siempre damos con opciones basadas en javascript, lo que no es muy optimo para SEO y consume mas ancho de banda, ademas de ser difcil su instalacin y configuracin. Es por eso que decid escribir este pequeo tutorial para dar una opcin a la construccin de mens desplegables pero basados nicamente en CSS (sin javascript). Lo primero que tenemos que hacer es definir el HTML del men y es aqu donde se entiende porque un men desplegable es tan bueno para SEO (El men se genera en HTML como una lista de enlaces que el Googlebot detecta como el men de navegacin de la pagina y asi identifica las secciones del sitio que son importantes). Menu en HTML <ul id=menu> <li><a href=#>Home</a></li> <li><a href=#>Seccion uno</a></li> <li><a href=#>Seccion dos</a> <ul> <li><a href=#>Subseccion uno</a></li> <li><a href=#>Subseccion dos</a></li> <li><a href=#>Subseccion tres</a></li> </ul> </li> <li><a href=#>Seccion tres</a></li> </ul> Y asi se veria el menu antes de aplicarle CSS

Home Seccion uno

Seccion dos o Subseccion uno o Subseccion dos o Subseccion tres Seccion tres

Como ven el primer UL que abre el menu tiene asignado un ID menu es el identificador que utilizaremos para asignarle las propiedades en CSS. Ahora el cdigo CSS del men desplegable. /*Menu CSS */ #menu { font:Verdana, Arial, Helvetica, sans-serif; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:11px; margin:0px; padding:0px; top: 70px; display:block; } #menu > li { list-style-type:none; float:left; display:block; margin:0; position:relative; padding:0; width:150px; background-repeat:no-repeat; } #menu > li:hover ul { display:block; } #menu > li:hover { -moz-border-radius:10px; -webkit-border-radius:10px; } #menu li ul { margin:0px; padding:0px; display:none; } #menu li ul li { list-style-type:none; margin:0; } #menu li ul li a {

text-decoration:none; padding:10px 30px 10px 30px; .padding:9px 30px 5px 30px; width:170px; display:block; border-left:4px solid #000066; background-position:left; color:#851818; border:none; } #menu li ul li:hover a { background-position:left; color:#FFFF00; } #menu li span { cursor:pointer; margin:0; font-weight:normal; display:block; padding:13px 13px 13px 35px; } Eso es todo, tendra que escribir varias paginas para explicar todas las propiedades que se usan en este CSS as que si quieren saber que pasa exactamente simplemente busquen en la referencia de CSS. Lo importante es el anidamiento de los UL dentro de los LI para generar los desplegables, de manera que una vez que se carga empieza con un valor de display: none y cuando se posa encima de cada LI (a:hover) se cambia por un display:block.

33.OTRO DESPLEGABLE

Mens desplegables con CSS

Vamos a hacer slo con CSS un men desplegable. Este men, al ser slo con CSS, no funcionar en Internet Explorer con versin 6 o menor. Quizs en la 7 si vaya, no lo s. El men, simple, sin ningn tipo de estilo adicional que vamos a contar aqu es el siguiente.

opcion 1 opcion 2

Al final lo tienes con algo ms de color. Si le das a "opcion 2", "una c" vers que hay tres niveles. El estilo aqu propuesto en principio vale para cualquier nmero de niveles que pongamos. Empezamos haciendo el cdigo html, que es ms sencillo. Simplemente unas etiquetas <ul> y <li> convenientemente anidadas: <ul class="menu"> <li>opcion 1 <ul> <li>una a</li> <li>una b</li> </ul> </li> <li>opcion 2 <ul> <li>una c <ul> <li>otra</li> <li>mas</li> </ul> </li> <li>una d</li> </ul> </li> </ul> Por supuesto, podramos poner enlaces <a> en las opciones del men. Ocultar los submens Lo primero que vamos a hacer es ocultar los submens para no se vean. Para ello, a los <ul> por debajo de los <li> les ponemos un display:none. Tambin hay que quitarles los puntitos que salen con list-style-type:none; ul.menu { list-style:none; } ul.menu ul /* Para todos los ul debajo del ul.menu */ { display:none; list-style:none; } Ahora deberamos hacerlos visibles cuando el ratn se coloca encima del <li> correspondiente. Para ello usamos li:hover y esto es el motivo por el que no funciona en

Internet Explorer, porque no hace caso de los hover salvo que vayan sobre una etiqueta <a>. El estilo CSS sera /* Esto afecta a todos los ul inmediatamente debajo (el > ) de un li que a su vez est dentro de un ul.menu */ ul.menu li:hover > ul { display:block; } Hacindolo de esta forma, con el >, slo afecta a los <ul> que estn justo dentro de un <li>, visualizndose slo las subopciones de la opcin actual. Con esto, el men quedara as

opcion 1 opcion 2

Si jugamos un poco, vemos que segn van apareciendo los submens, se mueve todo. Tambin vemos (por el borde que le he puesto), que los elementos ocupan casi el 100% de la pgina. Lo segundo es fcil de solucionar, basta ponerles un width. Adems, es necesario fijar un ancho para saber dnde dibujar los submenus, a la distancia justa. Lo del movimiento es algo ms complejo de evitar. Para evitar esto, tenemos que sacar los submens del flujo normal de html. Les daremos una posicin absoluta, para que aparezcan donde nosotros queramos. No es bonito poner una posicin absoluta global respecto a la pgina, porque tendramos que calcularla cada vez que toquemos el texto o modifiquemos la pgina. Afortunadamente, position:absolute situa un elemento en una posicin absoluta "respecto al componente padre que tambin est posicionado, entre otras con position:relative". Esto es estupendo. Si a cada <li> le ponemos position:relative, no altera su posicin en la pgina, pero podemos calcular la posicin de sus submens con position:absolute y las coordenadas son relativas a las del <li> en cuestin. En fin, que haciendo todo esto y jugando un poco con las medidas de pixels para que todo cuadre, el estilo CSS queda as ul.menu { list-style:none; } ul.menu li

{ position:relative; /* Las coordenadas de los ul inferiores sern relativas al <li> que los contiene */ width:70px; } ul.menu ul { position:absolute; /* Esta posicin es relativa al <li> que contiene a este <ul> */ left:30px; /* Para que no monte sobre el <li> */ top:-1px; display:none; list-style:none; } ul.menu li:hover > ul { display:block; } Listo, con esto tenemos el men hecho como lo vimos al principio. Dndole un poco de color Aunque nunca me he distinguido por mi gusto artstico, el men de arriba a pelo queda feo. Le doy aqu un poco de color, pero seguro que puedes hacerlo ms mejor con poco esfuerzo.

opcion 1 > opcion 2 >

Aqu tienes un ejemplo mucho ms bonito y si indagas, encontrars el javascript necesario para hacerlo funcionar en Internet Explorer. Poniendo horizontal el primer men Si queremos el primer men horizontal, se puede hacer con realativa facilidad, aunque debemos complicar un poco el CSS si queremos varios niveles. Los <li> de primer nivel los tenemos que poner con display:inline (quizs tambin display:float, aunque no he probado). Los <ul> debajo de los <li> de primer nivel llevan unas posiciones absolutas distintas, ya que deben salir debajo de los <li> y no a su derecha. El resto de los <ul> siguen como hasta ahora. El CSS resultante es lo que tenamos antes ms este aadido para tratar distinto los primeros <ul>

ul.menu> li > ul /* Solo para los ul debajo de los li de primer nivel. */ { position:absolute; left:-41px; top:19px; display:none; list-style:none; } ul.menu > li /* Slo para li de primer nivel */ { display:inline; } Y este es el resultado

opcion 1 v opcion 2 v

Flujo normal de html En html, cuando vamos poniendo distintos tags, el navegador los dibuja consecutivamente, en el mismo orden que los hemos puesto. Esto es lo que se llama flujo normal de html. Si mediante CSS usamos tcnicas de posicionamiento de bloques, como position, float, etc, los elementos afectados se salen del flujo normal. El navegador los siturar donde los hayamos posicionado e ir poniendo consecutivamente el resto. Podemos incluso ponerlos superpuestos. Estadsticas y comentarios
Numero de visitas desde el 4 Feb 2007:

Esta pagina este mes: 1450 Total de esta pagina: 205681 Total del sitio: 9386739

4. OTRO MENU

While I was coding the Notepad theme, I've learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multilevel dropdown menu that I've created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered.
View Demo CSS3 Dropdown
Preview

The image below shows how the menu will look if CSS3 is not supported.

One Gradient Image is Used

A white-transparent image is used to achieve the gradient effect. Because the new CSS3 gradient feature is not supported by all browsers yet, it is safer to use a gradient background image.

The instensitiy of the gradient can be changed by shifting the background image up or down. Also, the gradient color can be easily adjusted by changing the background color.

CSS Code

I'm not going to explain the CSS line by line. The images below explain the key points on how this dropdown is coded.

Update Apr 13 2010: Pure CSS Dropdown (No Image Used)

The following demo used CSS gradient and IE gradient filter instead of the gradient image. It works for Webkit browsers, Firefox 3.6+, and IE.

5. OTRO MENU

Men animado desplegable con CSS y jquery

Tras el inesperado xito de mi artculo Men animado con CSS y jquery, me he decidido a escribir un nuevo tutorial sobre creacin de mens: cmo hacer un men horizontal animado desplegable con CSS y jquery. Cada elemento del men horizontal contendr un submen vertical que se desplegar con una animacin. A su vez, al pasar el ratn sobre cada entrada del submen ste cambiar de color de forma gradual. El resultado lo puedes ver aqu: Ver demo
Imgenes

La nica imagen que vamos a utilizar es este gradiente para el fondo de los submens, que adems del efecto relieve que proporciona, nos ayudar a realizar las transiciones del hover.

HTML

El html empleado es una simple lista con otra lista anidada para cada submen:
<ul id="nav"> <li><a href="#">Menu 1</a> <ul class="submenu"> <li><a href="#">Submenu <li><a href="#">Submenu <li><a href="#">Submenu </ul> </li> <li><a href="#">Menu 2</a> <ul class="submenu"> <li><a href="#">Submenu <li><a href="#">Submenu <li><a href="#">Submenu </ul> </li> <li><a href="#">Menu 3</a> <ul class="submenu"> <li><a href="#">Submenu <li><a href="#">Submenu <li><a href="#">Submenu </ul> </li> <li><a href="#">Menu 4</a> <ul class="submenu"> <li><a href="#">Submenu <li><a href="#">Submenu <li><a href="#">Submenu </ul> </li> </ul>

1</a></li> 2</a></li> 3</a></li>

1</a></li> 2</a></li> 3</a></li>

1</a></li> 2</a></li> 3</a></li>

1</a></li> 2</a></li> 3</a></li>

Aadiendo el CSS

La mayor parte del css son para mejorar el aspecto visual del men. Funcionalmente, podemos destacar varias cosas. Los elementos de la lista principal (#nav) se encuentran flotados a la izquierda, para formar el men horizontal, y tienen position: relative para que sirva de referencia a cada submen. A la lista del submen le asignamos position: absolute, para que cuando se despliegue est situada bajo su men correspondiente. Este submen lo ocultamos por defecto con display: none para despus mostrarlo con javascript cuando

pasemos el ratn por encima de su men padre. A cada enlace del elemento del submen aadiremos la imagen del gradiente como background.
a{ display: block; text-decoration: none; color: #004a80; padding: 5px; } ul{ width: 500px; height: 28px; } ul,li{ list-style: none; margin:0; padding:0; } #nav{ font-family: 'Century Gothic', sans-serif; } #nav li{ float:left; position: relative; width: 125px; font-size: 14px; font-variant: small-caps; border-top:1px solid #004a80; border-bottom:1px solid #004A80; } .submenu{ display: none; position: absolute; left: -1px; border:none; height: auto; background: none; } #nav .submenu li{ float: none; position: static; margin: 0; font-size: 11px; font-variant: normal; border: 1px solid #004a80; border-top: none; width: 124px; } #nav .submenu li a{

color: #FFFFFF; background: #004a80 url('fondo_menu_vertical.png') repeat-x 0 0; width: 114px; height: 16px; }

Javascript y jQuery

Ahora aadiremos la funcionalidad del men. Para ello necesitaremos primero incluir la librera jQuery, que podemos hacerlo cargndola directamente desde el repositorio de Google:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>

Tambin necesitaremos aadir el plugin backgroundPosition para jQuery, ya que ste no soporta de serie la animacin de la propiedad background-position. Lo descargaremos y aadiremos as:
<script type="text/javascript" src="jquery.backgroundPosition.js"></script>

Finalmente, con unas pocas lneas de cdigo, usando la funcin slideDown/slideUp y el evento hover mostraremos el submen correspondiente cuando pasemos el ratn por uno de los elementos del men principal. Usando la funcin animate, al pasar el ratn por encima de cada entrada del submen se cambiar la propiedad background-position, deslizando la imagen del gradiente y creando un efecto de fundido rpido, para que la transicin sea ms suave que si utilizramos simplemente a:hover para cambiar el color de fondo del enlace activo.
<script type="text/javascript"> $(function(){ $('#nav>li').hover( function(){ $('.submenu',this).stop(true,true).slideDown('fast'); }, function(){ $('.submenu',this).slideUp('fast'); } ); $('.submenu li a').css( {backgroundPosition: "0px 0px"} ).hover( function(){ $(this).stop().animate({backgroundPosition: "(0px 99px)"}, 250); }, function(){ $(this).stop().animate({backgroundPosition: "(0px 0px)"}, 250); } );

}); </script>

Compartir:

inShare1

Creado el Jueves, 9 de julio, 2009 a las 10:54 PM y archivado en CSS, Desarrollo Web, Diseo Web, jQuery. Puedes seguir los comentarios de esta entrada a travs del feed RSS 2.0. Tambin puedes dejar un comentario, o trackback desde tu propia web.
La larga cola, o cmo menos es ms Videotutorial: Introduccin a Codeigniter

Enlaces
Mesothelioma Trust Fund Peritoneal Mesothelioma Cancer ashburn

8.- NO MAMES GALERYA HECHA To open an image gallery simply: Create a link (). Add the rel attribute prettyPhoto to it and add your gallery name in square brakets (rel=prettyPhoto). Change the href of your link so it points to the full size image. Read more about jQuery lightbox for images, videos, YouTube, iframes, ajax | Stphane Caron No Margin For Errors on: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightboxclone/#!prettyPhoto?utm_source=INK&utm_medium=copy&utm_campaign=share&
"Para abrir una galera de imgenes simple: Crear un enlace (). Agregar el atributo rel "PrettyPhoto" a l y agregar su nombre de la galera de brakets cuadrados (rel = "PrettyPhoto").

Cambiar el href del enlace para que apunte a la imagen a tamao completo. "

<a href="images/fullscreen/1.jpg" rel="prettyPhoto[pp_gal]" title="You can add caption to pictures."><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Red round shape" /></a> <a href="images/fullscreen/2.jpg" rel="prettyPhoto[pp_gal]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="Nice building" /></a> <a href="images/fullscreen/3.jpg" rel="prettyPhoto[pp_gal]"><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="Fire!" /></a> <a href="images/fullscreen/4.jpg" rel="prettyPhoto[pp_gal]"><img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="Rock climbing" /></a> <a href="images/fullscreen/5.jpg" rel="prettyPhoto[pp_gal]"><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="Fly kite, fly!" /></a>

10.-PURE ACORDEON CSS INGLES

Pure CSS3 accordion

A while ago, I wrote about the CSS3 :target pseudo-class and how can that help you achieve cool results. Today youll learn how to create a pretty simple animated CSS3 accordion with its help.

View demo

What is an accordion

If youre designing with usability in mind, then an accordion can be very useful when willing to organize content. The main advantage is packing a lot of content in a reduced space.
HTML5 part

For this experiment Ill use one of the new HTML5 elements, its about the section element. When using new HTML5 elements like this one, for older browsers, you need to use the following trick:
<script>document.createElement('section');</script>

John Resig HTML5 Shiv To simplify things here, I just used the de facto script for enabling HTML5 elements in Internet Explorer. Its about Remy Sharps html5shiv:
<!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

Markup

Enough with theory, lets see how this actually works:

<div class="accordion"> <section id="one"> <h2><a href="#one">Heading 1</a></h2> <div> <p>content</p> </div> </section> </div>

The accordion div wraps the sections that compose the proper accordion. Each section panel contains a title and of course its content.

CSS
section { display: block; } .accordion { background-color: #eee; border: 1px solid #ccc; width: 600px; padding: 10px;

margin: 50px auto; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 0 1px 0 #999; -webkit-box-shadow: 0 1px 0 #999; box-shadow: 0 1px 0 #999; } .accordion section { border-bottom: 1px solid #ccc; margin: 5px; background-color: #fff; background-image: -webkit-gradient(linear, left top, from(#fff), to(#eee)); background-image: -webkit-linear-gradient(top, #fff, background-image: -moz-linear-gradient(top, #fff, background-image: -ms-linear-gradient(top, #fff, background-image: -o-linear-gradient(top, #fff, background-image: linear-gradient(top, #fff, -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .accordion h2, .accordion p { margin: 0; } .accordion p { padding: 10px; } .accordion h2 a { display: block; position: relative; font: 14px/1 'Trebuchet MS', 'Lucida Sans'; padding: 10px; color: #333; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .accordion h2 a:hover { background: #fff; } .accordion h2 + div {

left bottom, #eee); #eee); #eee); #eee); #eee);

height: 0; overflow: hidden; -moz-transition: height 0.3s ease-in-out; -webkit-transition: height 0.3s ease-in-out; -o-transition: height 0.3s ease-in-out; transition: height 0.3s ease-in-out; } .accordion :target h2 a:after { content: ''; position: absolute; right: 10px; top: 50%; margin-top: -3px; border-top: 5px solid #333; border-left: 5px solid transparent; border-right: 5px solid transparent; } .accordion :target h2 + div { height: 100px; }

Result

View demo
10 PURO ACORDEON CSS ESPAOL

Pura acorden CSS3

Hace un tiempo, escrib acerca de la CSS3 :target pseudo-clase y cmo puede ayudarle a lograr resultados interesantes . Hoy vas a aprender a crear una animacin bastante simple CSS3 acorden con su ayuda.

Ver demostracin
Qu es un acorden

Si usted est diseando con la facilidad de uso en mente, entonces un acorden puede ser muy til cuando se quiere organizar el contenido. La principal ventaja est empacando una gran cantidad de contenido en un espacio reducido.
HTML5 parte

Para este experimento, voy a utilizar uno de los elementos HTML5 nuevos, se trata de la section elemento. Cuando se utilizan los nuevos elementos de HTML5 como ste, para exploradores ms antiguos, es necesario utilizar el siguiente truco:
<script> document.createElement ('seccin'); </ script>

John Resig HTML5 Shiv Para simplificar las cosas aqu, acabo de utilizar el script de facto, para permitir que los elementos de HTML5 en Internet Explorer. Se trata de Remy Sharp html5shiv :
<- [If lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"> </ script> <[Endif] ->

Marcado

Basta con la teora, vamos a ver cmo funciona realmente:

<div class="accordion"> <section id="one"> <h2> <a href="#one"> Ttulo 1 </ a> </ h2> <div

el contenido </ p> </ Div> </ Seccion> </ Div>

El accordion div envuelve las secciones que componen el acorden adecuado. Cada section del panel contiene un ttulo y por supuesto su contenido.

CSS
seccin { display: block; } . Acorden { background-color: # eee; border: 1px solid # ccc; ancho: 600px; padding: 10px; margin: auto 50px; -Moz-border-radius: 3px; -Webkit-border-radius: 3px; border-radius: 3px; -Moz-box-shadow: 0 0 1px # 999; -Webkit-box-shadow: 0 0 1px # 999; box-shadow: 0 0 1px # 999; } . Seccin de acorden { border-bottom: 1px solid # ccc; margin: 5px; background-color: # FFF; background-image:-webkit-gradiente (lineal, abajo a la izquierda arriba, izquierda, de (# fff), a (# eee)); background-image:-webkit-lineal de gradiente (arriba, # fff, # eee); background-image:-moz-lineal de gradiente (arriba, # fff, # eee); background-image:-ms-lineal de gradiente (arriba, # fff, # eee); background-image:-o lineal de gradiente (arriba, # fff, # eee); background-image: lineal de gradiente (arriba, # fff, # eee); -Moz-border-radius: 5px; -Webkit-border-radius: 5px; border-radius: 5px; } . Acorden, h2, . Acorden p { margin: 0; } . Acorden p {

padding: 10px; } . Acorden h2 un { display: block; position: relative; fuente: 14px / 1 'Trebuchet MS', 'Lucida Sans'; padding: 10px; color: # 333; text-decoration: none; -Moz-border-radius: 5px; -Webkit-border-radius: 5px; border-radius: 5px; } . Acorden h2 a: hover { background: # FFF; } . Acorden h2 + div { altura: 0; overflow: hidden; -Moz-transicin: la altura de 0.3s facilidad de entrada-salida; -Webkit-transicin: la altura de 0.3s facilidad de entradasalida; -O-transicin: la altura de 0.3s facilidad de entrada-salida; transicin: la altura de 0.3s facilidad de entrada-salida; } . Acorden: un objetivo de H2: despus de { contenido:''; position: absolute; derecha: 10px; superior: 50%; margin-top:-3px; border-top: 5px slida # 333; border-left: 5px transparente y slida; border-right: 5px transparente y slida; } . Acorden: meta h2 + div { height: 100px; }

Resultado

12. FORMULARIO DE CONCTAO PERSONALIZADO CSS

Designing Contact form in CSS3 and HTML5

Wednesday, 04 May 2011 16:17 Terrence

1digg inShare8

Designing with CSS3 become a trend in web design world. The options for fun in CSS3 is the modern design elements that can be created without graphics. Most of the modern

browsers now support for CSS3. Today I will show you how to design a contact form in CSS3.
Demo

Let start with HTML

Markup
01.<div class="box"> 02.<div class="rectangle"> 03.<h2>Contact Us</h2> 04.</div> 05.<div class="triangle-l"></div> 06.<div class="triangle-r"></div> 07.<div class="form"> 08.<!--form Element--> 09.</div> 10.</div>

Styling with CSS

Basic Styles
1.body 2.{ 3.font-family:Tahoma, Geneva, sans-serif; 4.background-color:#f0f0f0; 5.}

Rounded Corners
01..box 02.{ 03.background-color: #9b9a98; 04.-moz-border-radius: 15px; 05.-webkit-border-radius: 15px;

06.padding: 10px; 07.width:300px; 08.height:470px; 09.margin-left:50px; 10.position:relative; 11.clear:both; 12.}

Ribbon Rectangle
01..rectangle { 02.background: #424242; 03.height: 50px; 04.width: 360px; 05.position: relative; 06.left:-30px; 07.top: 30px; 08.float: left; 09.-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55); 10.-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55); 11.-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55); 12.z-index: 100; 13.}

box-shadow accepts four parameters

x-offset y-offset blur shadow color

In my example x-offset: 0

y-offset: 0 blur: 4px shadow color: rgba(0,0,0,0.55); Triangles

01..triangle-l { 02.border-color: transparent #424242 transparent transparent; 03.border-style:solid; 04.border-width:20px; 05.height:0px; 06.width:0px; 07.position: relative; 08.left: -50px; 09.top: 10px; 10.z-index: -1; /* displayed under box */ 11.} 12..triangle-r { 13.border-color: transparent transparent transparent #424242; 14.border-style:solid; 15.border-width:20px; 16.height:0px; 17.width:0px; 18.position: relative; 19.left: 310px; 20.top: -30px; 21.z-index: -1; /* displayed under box */ 22.}

For deeper view please visit my previous tutorial: How to Draw Speech Bubble and Shapes with CSS3

Letterpress Text Effect with Text-Shadow

1..rectangle h2 { 2.font-size: 30px; 3.color: #222; 4.margin-top:5px; 5.text-shadow: 0px 2px 3px #555; 6.text-align: center; 7.}

Form Element
01..form{ 02.padding: 30px 25px 35px 25px; 03.} 04..form ul{ 05.list-style: none; 06.padding:0; 07.margin:2px; 08.} 09..form ul li{ 10.margin:0 0 9px 0; 11.padding:0; 12.} 13./* Make inputs go to their own line */ 14..form input{ 15.display:block; 16.}

Add Form Element in HTML

01.<div class="form"> 02.<!--form Element--> 03.<ul> 04.<li> 05.<label for="first_name">First Name</label> 06.<input id="first_name" type="text" 07.autofocus="true" 08.name="first_name" placeholder="'John'" > 09.</li> 10.<li> 11.<label for="last_name">Last Name</label> 12.<input id="last_name" type="text" 13.name="last_name" placeholder="'Smith'" > 14.</li> 15.<li> 16.<label for="email">Email</label> 17.<input id="email" type="email" 18.name="email" placeholder="Email address" > 19.</li> 20.<li> 21.<label for="url">Website</label> 22.<input id="url" type="url" 23.name="url" placeholder="www.example.com"> 24.</li> 25.<li> 26.<label for="password">Password</label> 27.<input id="password" type="password" name="password" value=""

28.autocomplete="off" placeholder="8-10 characters" /> 29.</li> 30.<li> 31.<label for="password_confirmation">Password Confirmation</label> 32.<input id="password_confirmation" type="password" 33.name="password_confirmation" value="" 34.autocomplete="off" placeholder="Type your password again" /> 35.</li> 36.<li><input type="submit" value="Sign Up"></li> 37.</ul 38.</div>

We are making this form with labels.This is essential when creating accessible forms. The

for attribute of the label references the ID of its associated form element. I used <ul> to reduce the complex tables or DIV structures.
Email

The email input type is designed to hold either a single email address or an email address list, so thats the perfect candidate for our email field.
1.<label for="email">Email contact</label> 2.<input type="email" name="email" id="email">

Mobile devices get the most benefit from this type of form field, because the virtual keyboard layouts will change making entering email addresses easier. URL

This is more useful if your visitor uses an iPhone, because it displays a different keyboard layout, displaying helper buttons for quickly entering web addresses, similar to the keyboard displayed when entering a URL into Mobile Safaris address bar.
1.<label for="url">Website</label> 2.<input type="url" name="url" id="url">

Autofocus

You can really speed up data entry if you place the users cursor in the first field on the form when they load the page. Now HTML5 provides this capability as part of the language. you can add the autofocus attribute to any form field.
1.<label for="first_name">First Name</label> 2.<input id="first_name" type="text" > name="first_name" autofocus="true"

PlaceHolder

Placeholder text provides users with instructions on how they should fill the fields. To add placeholder text, you just add the placeholder attribute to each input field. Like this:
1.<input id="first_name" type="text" placeholder="'John'" > name="first_name"

Preventing Autocompletion

HTML5 introduces an autocomplete attribute that tells web browsers that they should not attempt to automatically fill in data for the field. Some browsers remember data that users have previously typed in, and in some cases, we want to tell the browsers that we rather not let users do that. We have added the attribute to the password fields on this form.
1.<label for="password">Password</label> 2.<input id="password" type="password" name="password" value="" autocomplete="off" />

1digg inShare8 Last Updated on Sunday, 13 November 2011 02:59

15.-MENU SEXY CON CSS INGLES

One of the most common elements when talking about a website or an application design is definitely the menu navigation. No matter if vertical or horizontal, simple or complex, a menu is essential and it has to look that way.

In todays article, youll learn how to create a good looking menu using some CSS3 magic.

View demo

The idea
If you are a web developer you may have heard of tools called CSS pre-processors. Less is probably the most well known CSS preprocessor, but that is another story. While visiting LESSs site, I noticed their download button, which is an image, and I thought to myself: I can do it using CSS only.

LESS download button at this time

The HTML
<nav> <ul> <li><a <li><a <li><a <li><a <li><a href="#"><span>Home</span></a></li> href="#"><span>Categories</span></a></li> href="#"><span>About</span></a></li> href="#"><span>Portfolio</span></a></li> href="#"><span>Contact</span></a></li>

</ul> </nav>

Pretty clean, except for the span element. Youll see further why we need that span.

The CSS
The demo example contains also a header and a logo (so, extra styles), but Ill list here only the styles used for this menu. Removing the default list styles
nav ul { padding: 0; margin: 0; list-style: none; } nav li { float: left; }

Style the anchor

nav a { float: left; color: #eee; margin: 0 5px; padding: 3px; text-decoration: none; border: 1px solid #831608; font: bold 14px Arial, Helvetica; background-color: #831608; background-image: -moz-linear-gradient(#bb413b, #831608); background-image: -webkit-gradient(linear, left top, left bottom, from(#bb413b), to(#831608));

background-image: -webkit-linear-gradient(#bb413b, #831608); background-image: -o-linear-gradient(#bb413b, #831608); background-image: -ms-linear-gradient(#bb413b, #831608); background-image: linear-gradient(#bb413b, #831608); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; text-shadow: 0 -1px 0 rgba(0,0,0,.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset; } nav a:hover { background-color: #bb413b; background-image: -moz-linear-gradient(#831608, #bb413b); background-image: -webkit-gradient(linear, left top, left bottom, from(#831608), to(#bb413b)); background-image: -webkit-linear-gradient(#831608, #bb413b); background-image: -o-linear-gradient(#831608, #bb413b); background-image: -ms-linear-gradient(#831608, #bb413b); background-image: linear-gradient(#831608, #bb413b); } nav a:active { background: #bb413b; position: relative; top: 2px; -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset; box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset; }

Multiple CSS3 properties were used to create the above.

Style the span element

nav span { border: 1px dashed #eba1a3; display: inline-block; padding: 4px 15px; cursor: pointer; background-color: #bb413b; background-image: -moz-linear-gradient(#d4463c, #aa2618); background-image: -webkit-gradient(linear, left top, left bottom, from(#d4463c), to(#aa2618)); background-image: -webkit-linear-gradient(#d4463c, #aa2618); background-image: -o-linear-gradient(#d4463c, #aa2618); background-image: -ms-linear-gradient(#d4463c, #aa2618); background-image: linear-gradient(#d4463c, #aa2618); } nav a:hover span { background-color: #bb413b; background-image: -moz-linear-gradient(#aa2618, #d4463c); background-image: -webkit-gradient(linear, left top, left bottom, from(#aa2618), to(#d4463c)); background-image: -webkit-linear-gradient(#aa2618, #d4463c); background-image: -o-linear-gradient(#aa2618, #d4463c); background-image: -ms-linear-gradient(#aa2618, #d4463c); background-image: linear-gradient(#aa2618, #d4463c); }

View demo Browser support If above you have seen how the menu looks in modern browsers, heres how the menu look in older browsers:

Fallback styles for older browsers Advantages

Scalability You can simply adjust its size by updating the anchors font-size:
font: bold 14px Arial, Helvetica;

No images, so there are less HTTP image requests, also easy to maintain and update. You could easily transform this menu into a nice dropdown menu.

Conclusion
The menu we created using this tutorial isnt a Sci-Fi one or a super mega complex one. The main purpose is to see how CSS3 can help us achieve interesting effects without needing images anymore. I hope you enjoyed this tutorial, thanks for reading it!
15.- MENU SEXY ESPAOL

Sexy men de CSS3

Uno de los elementos ms comunes cuando se habla de un sitio web o una aplicacin de diseo es sin duda la navegacin por los mens. No importa si es vertical u horizontal, simple o complejo, un men que es esencial y que tiene que mirar de esa manera. En el artculo de hoy, usted aprender cmo crear un men de buen aspecto con un poco de magia CSS3.

Ver demostracin

La idea
Si eres un desarrollador web usted puede haber odo de herramientas denominado CSS preprocesadores. Menos es probablemente el ms conocido preprocesador CSS, pero esa es otra historia. Durante su visita a MENOS el sitio, me di cuenta de su botn de descarga, que es una imagen, y me dije a m mismo: yo puedo hacerlo usando slo CSS.

MENOS botn de descarga - en este momento

El cdigo HTML
<nav> <ul> <li> <a href="#"> <span> Inicio </ span> </ a> </ li> <li> <a href="#"> <span> Categoras </ span> </ a> </ li> <li> <a href="#"> <span> Acerca de </ span> </ a> </ li> <li> <a href="#"> <span> cartera </ span> </ a> </ li> <li> <a href="#"> <span> Contacto </ span> </ a> </ li>

</ Ul> </ Nav>

Bastante limpiar , excepto por el span elemento. Vers por qu necesitamos ms que span .

El CSS
En el ejemplo de demostracin tambin contiene un encabezado y un logotipo (as, estilos adicionales), pero voy a enumerar aqu slo los estilos que se usan para este men. Eliminacin de los estilos de lista por defecto
nav ul { padding: 0; margin: 0; list-style: none; } nav li { float: left; }

Estilo del ancla

una navegacin { float: left; color: # eee; margin: 0 5px; padding: 3px; text-decoration: none; border: 1px solid # 831608; fuente: Arial negrita 14px, Helvetica; background-color: # 831608; background-image:-moz-lineal de gradiente (# bb413b, # 831608); background-image:-webkit-gradiente (lineal, abajo a la izquierda arriba, izquierda, de (# bb413b), a (# 831608));

background-image:-webkit-lineal de gradiente (# bb413b, # 831608); background-image:-o lineal de gradiente (# bb413b, # 831608); background-image:-ms-lineal de gradiente (# bb413b, # 831608); background-image: lineal de gradiente (# bb413b, # 831608); -Moz-border-radius: 5px; -Webkit-border-radius: 5px; border-radius: 5px; text-shadow: 0-0 1px RGBA (0,0,0, 0,8); -Moz-box-shadow: 0 1px rgba 0 (255, 255, 255, 0,3), 0 3px 0 RGBA (0, 0, 0, 0,7), 0 2px 2px RGBA (0, 0, 0, 0,5), 0 1px rgba 0 (255, 255, 255, 0,5) la insercin; -Webkit-box-shadow: 0 1px rgba 0 (255, 255, 255, 0,3), 0 3px 0 RGBA (0, 0, 0, 0,7), 0 2px 2px RGBA (0, 0, 0, 0,5), 0 1px rgba 0 (255, 255, 255, 0,5) la insercin; box-shadow: 0 1px rgba 0 (255, 255, 255, 0,3), 0 3px 0 RGBA (0, 0, 0, 0,7), 0 2px 2px RGBA (0, 0, 0, 0,5), 0 1px 0 rgba (255, 255, 255, 0,5) la insercin; } nav a: hover { background-color: # bb413b; background-image:-moz-lineal de gradiente (# 831608, # bb413b); background-image:-webkit-gradiente (lineal, abajo a la izquierda arriba, izquierda, de (# 831608), a (# bb413b)); background-image:-webkit-lineal de gradiente (# 831608, # bb413b); background-image:-o lineal de gradiente (# 831608, # bb413b); background-image:-ms-lineal de gradiente (# 831608, # bb413b); background-image: lineal de gradiente (# 831608, # bb413b); } navegacin a: active { background: # bb413b; position: relative; top: 2px; -Moz-box-shadow: 0 0 3px RGBA (0, 0, 0, 0,7) la insercin; -Webkit-box-shadow: 0 0 3px RGBA (0, 0, 0, 0,7) la insercin; box-shadow: 0 0 3px RGBA (0, 0, 0, 0,7) la insercin; }

Mltiples propiedades CSS3 se utiliza para crear el anterior.

Estilo del elemento span

lapso de navegacin { border: 1px dashed # eba1a3; display: inline-block; padding: 15px 4px; cursor: pointer; background-color: # bb413b; background-image:-moz-lineal de gradiente (# d4463c, # aa2618); background-image:-webkit-gradiente (lineal, abajo a la izquierda arriba, izquierda, de (# d4463c), a (# aa2618)); background-image:-webkit-lineal de gradiente (# d4463c, # aa2618); background-image:-o lineal de gradiente (# d4463c, # aa2618); background-image:-ms-lineal de gradiente (# d4463c, # aa2618); background-image: lineal de gradiente (# d4463c, # aa2618); } nav a: hover perodo { background-color: # bb413b; background-image:-moz-lineal de gradiente (# aa2618, # d4463c); background-image:-webkit-gradiente (lineal, abajo a la izquierda arriba, izquierda, de (# aa2618), a (# d4463c)); background-image:-webkit-lineal de gradiente (# aa2618, # d4463c); background-image:-o lineal de gradiente (# aa2618, # d4463c); background-image:-ms-lineal de gradiente (# aa2618, # d4463c); background-image: lineal de gradiente (# aa2618, # d4463c); }

Ver demostracin Compatibilidad con navegadores Si lo anterior hemos visto cmo se ve el men en los navegadores modernos, as es como el aspecto del men en los navegadores ms antiguos :

Estilos de reserva para los navegadores ms antiguos Ventajas

Escalabilidad Usted puede simplemente ajustar su tamao mediante la actualizacin del anchor 's font-size:
fuente: negrita 14px Arial, Helvetica;

No hay imgenes, por lo que hay menos peticiones HTTP de imgenes, tambin fcil de mantener y actualizar. Desde aqu se puede transformar este men en un bonito men desplegable .

Conclusin
El men que hemos creado con este tutorial no es una ciencia ficcin o una super mega complejo. El objetivo principal es ver cmo CSS3 nos puede ayudar a lograr efectos interesantes sin necesidad de imgenes ms. Espero que hayan disfrutado este tutorial, gracias por leerlo!