Menu desplegable

Hoy quiero compartir con vosotros como construir un menú desplegable como el que veis en la cabecera de este blog, o vertical como el que os muestro a continuación de ejemplo:
Bueno compañeros, no os asusteis que es muy sencillito, sólo tiene CSS. Veamos
  1. En primer lugar, construimos el código html de nuestro menú con listas convenientemente anidadas mediante las etiquetas <ul> y <li>, que añadiremos como elemento HTML a nuestra plantilla.

    Sirva como ejemplo el código correspondiente al menú del ejemplo anterior:


  2. Ahora le daremos de estilo para obtener un menú vertical como el del ejemplo, para ello empleamos el siguiente CSS que os presento:


    Como veis, excepto los campos display y position es completamente personalizable. Jugar con los márgenes puede permitirnos desplegar las opciones por un lateral, por abajo... la imaginación es cosa vuestra.

    Sin embargo, hay que tener mucho cuidado al cambiar width, porque tambien debemos aplicar el mismo cambio a la posicion relativa left de sus menus interiores para que no se superpongan.
Bueno, y eso es todo. Espero que os sea útil, si os queda alguna duda o os da problema pues deja un comentario y miramos de que se trata ;)

Sen máis...

New Template

Compañeros, por fin ha llegado el día Z y la hora X, se ha acabado la larga espera y el misterio se ha descubierto: como ya os había adelantado otro día, ya se ha estrenado mi nueva plantilla, esta que veis.

Como podeis observar, es bastante diferente a la anterior, principalmente porque he querido diseñar una plantilla que priorice el contenido sobre las demás cosas, y para ello he dismunuido la cantidad de colorines y ocultado o eliminado los chismes que no aportasen nada para que despisten a mis visitantes.

AntesDespués

    ¿Qué os parece el cambio?
Por favor, dejadme vuestra opinión porque es muy importante para mí, cualquier sugerencia o defecto que encontreis será bien recibida ;).

Sen máis...

New Blogger's Followers

Ya todos habrán observado la nueva maravilla con la que Blogger nos ha sorprendido: el nuevo gadget de seguidores. Y como no podía ser de otra manera, las reacciones no se han hecho esperar: un chisme feo, que no puede ser customizado y que no aporta nada nuevo.

Entonces... ¿a que viene el cambio? Pues según he leido, para integrar y promocionar a traves de este sistema su nueva red social: Google Friend Connect.

Si, lo voy a explicar otra vez: han sustituido un sistema que implementaron hace 2 meses escasos y que tuvo una gran acogida, aceptación, customizable y que aportaba algo nuevo; por otro chisme que la primera impresión que ha dejado es que es un horror, no se puede personalizar y no aporta ningún benefecio frente al anterior con el único motivo de promocionarse.

Y en esta tesitura yo ya me he posicionado, no he trabajado en hacer una plantilla nueva para que vengan estos señores y le pongan un pegote estandar como si mi blog fuese una vaca que hay que marcar. Así que he quitado el nuevo cacharro, me niego a que utilicen mi blog para promocionar su nueva red social a cambio de nada.

Sen máis...

Próximo estreno

Compañeros, por fin ha llegado el día: hoy tengo el placer darles un anuncio que puede cambiar sus vidas y, con ello, el rumbo de la humanidad:

¡Ya tengo la nueva plantilla!

Pues sí, habeis leido bien. Tras 5 días de trabajo y, sobre todo, peleas con códigos rebeldes y anárquicos, he conseguido terminar mi nueva plantilla, sólo faltan mínimos retoques que es preciso hacer en el blog principal.

Sin embargo, no la voy a estrenar así por las buenas y sin más, si no que voy a hacer como se merecen los hitos de esta magnitud. He programado la inauguración el viernes 27 de febrero a las 23:00 hora española, a la que está previsto que acudan medios de comunicación a informar de este gran acontecimiento.

Por ese motivo también quiero deciros que si me visitais un poco antes la hora prevista no os preocupeis si no podeis al blog, será que todavía estoy con la faena ;).

En resumen, que os quedan dos días para despediros de esta plantilla y darla bienvenida a la nueva versión del chimpín, que espero os guste mucho.

Sen máis...

Colores HTML

Últimamente estoy trabajando en una plantilla nueva y a menudo se me presenta la necesidad de consultar una tabla de colores en HTML, con lo que me he animado a hacer una para tenerla más a mano y compartirla con vosotros por si os ayuda.

Bueno, imagino que ya sabran que toda la escala cromática se puede obtener combinando los tres colores primarios aditivos: Red, Green y Blue. Pues empleando esta idea, podemos codificar todos los colores en un número hexadecimal de 6 bits #RRGGBB, donde cada par de bits representa la saturación del color primario correspondiente.

Y el resultado es el siguiente, espero que os resulte útil.

#FFCCCC#FF9999#FF6666#FF3333#FF0000#CC0000#990000#660000#330000
#FFC9CC#FFAB99#FF8366#FF5B33#FF3300#CC2900#991F00#661500#330B00
#FFDECC#FFC099#FFA266#FF8433#FF6600#CC5200#993E00#662A00#331600
#FFE9CC#FFE099#FFC146#FFAC33#FF9900#CC7B00#995C00#663F00#332100
#FFF4CC#FFEA99#FFE066#FFD633#FFCC00#CCA400#997C00#665C00#332C00
#FFFFCC#FFFF99#FFFF66#FFFF33#FFFF00#CCCC00#999900#666600#333300
#F4FFCC#EAFF99#E0FF66#D6FF33#CCFF00#A4CC00#7C9900#5C6600#2C3300
#E9FFCC#E0FF99#C1FF66#A2FF33#99FF00#7BCC00#5C9900#3F6600#213300
#DEFFCC#C0FF99#A2FF66#84FF33#66FF00#52CC00#3E9900#2A6600#163300
#C9FFCC#ABFF99#8CFF66#5BFF33#33FF00#29CC00#1F9900#156600#0B3300
#CCFFCC#99FF99#66FF66#3C1F33#00FF00#00CC00#009900#006600#003300
#CCFFC9#99FFAB#66FF83#3C1F5B#00FF33#00CC29#00991F#006615#00330B
#CCFFDE#99FFC0#66FFA2#3C1F84#00FF66#00CC52#00993E#00662A#003316
#CCFFE9#99FFE0#66FFC1#3C1FAC#00FF99#00CC7B#00995C#00663F#003321
#CCFFF4#99FFEA#66FFE0#3C1FD6#00FFCC#00CCA4#00997C#00665C#00332C
#CCFFFF#99FFFF#66FFFF#3C1FFF#00FFFF#00CCCC#009999#006666#003333
#CCF4FF#99EAFF#66E0FF#33D6FF#00CCFF#00A4CC#007C99#005C66#002C33
#CCE9FF#99E0FF#66C1FF#33A2FF#0099FF#007BCC#005C99#003F66#002133
#CCDEFF#99C0FF#66A2FF#3384FF#0066FF#0052CC#003E99#002A66#001633
#CCC9FF#99ABFF#668CFF#335BFF#0033FF#0029CC#001F99#001566#000B33
#CCCCFF#9999FF#6666FF#3333FF#0000FF#0000CC#000099#000066#000033
#C9CCFF#AB99FF#8366FF#5B33FF#3300FF#2900CC#1F0099#150066#0B0033
#DECCFF#C099FF#A266FF#8433FF#6600FF#5200CC#3E0099#2A0066#160033
#E9CCFF#E099FF#C146FF#AC33FF#9900FF#7B00CC#5C0099#3F0066#210033
#F4CCFF#EA99FF#E066FF#D633FF#CC00FF#A400CC#7C0099#5C0066#2C0033
#FFCCFF#FF99FF#FF66FF#FF33FF#FF00FF#CC00CC#990099#660066#330033
#FFCCF4#FF99EA#FF66E0#FF33D6#FF00CC#CC00A4#99007C#5C6600#33002C
#FFCCE9#FF99E0#FF66C1#FF33AC#FF0099#CC007B#99005C#66003F#330021
#FFCCDE#FF99C0#FF66A2#FF3384#FF0066#CC0052#99003E#66002A#330016
#FFCCC9#FF99AB#FF6683#FF335B#FF0033#CC0029#99001F#660015#33000B

Y aquí una pequeña escala de grises:

#FFFFFF#E0E0E0#C0C0C0#A0A0A0#808080#606060#404040#202020#000000

Sen máis...

¡Sorpresa!

Si compañeros, soy yo y sigo vivo, o ha sido mucho tiempo sin escribir ni presentarme por aquí y es posible que alguno haya pensado lo contrario. Y debo añadir que aquello que se rumoreaba de que me habían criogenizado con Walt Disney es pura falacia.

Y os preguntareis qué hice si no estuve metido en una nevera, pues muchas cosas: entre las vacaciones de navidad y que luego estuve bastente ocupado con los exámenes... Pero afortunadamente para mí, hoy se han acabado esos exámenes y, para vuestra desgracia, todo volverá a la normalidad (imaginemos que lo de antes era normal).

Espero que hayais disfrutado mi ausencia, porque ahora estoy aquí otra vez y pienso seguir dando la lata como antes, espero que por mucho tiempo (eso será que no hay exámenes, jeje).

Sen máis...

 
Fogar do Chimpín, 2008
Plantilla de diseño propio.