Identifícate...

...o regístrate

codeando.net

Categoría: CSS

vie, 15 oct 2010 - Archivado en Javascript, CSS, Libs, Diseño y Tutoriales

Una excelente recopilación de plugins, tutoriales y técnicas de jQuery:

All About jQuery: Plugins, Tutorials and Resources

http://www.noupe.com/jquery/all-about-jquery-plugins-tutorials-and-resources.html

Por Jose. Han entrado 4588 veces.  Comentarios
lun, 11 oct 2010 - Archivado en (X)HTML, CSS, Enlaces y Diseño

Desde ColorZilla nos traen un estupendo generador de gradientes CSS(3):

Disfrutadlo

Por Jose. Han entrado 4675 veces.  Comentarios
mar, 03 feb 2009 - Archivado en Javascript, CSS, Diseño y Tutoriales

Hola de nuevo, esta vez hemos estado más tiempo del que habríamos querido sin actualizar, pero aquí estamos de nuevo. Hoy vamos a explicar cómo hemos implementado el nuevo formulario de login (y de registro) que podéis ver si pulsais sobre el enlace que deberíais ver en la parte derecha de la cabecera y que está basado en el que podéis encontrar en este estupendo post de NETTUTS.

Bueno, para empezar crearemos la estructura HTML:

<div id="wrapper">
    <div id="panel">
        <div id="panel_contents">
        </div>
    </div>
    <div id="show_button"><a href="#">Login</a></div>
    <div id="hide_button"><a href="#">Esconder</a></div>
</div>

Como podéis ver, el código HTML es totalmente limpio, ni siquiera los enlaces llaman a funciones javascript (esto lo arreglamos luego gracias a las virtudes de jQuery). El contenido del panel irá, como ya habreis supuesto, en #panel_contents; en codeando.net hemos decidido incluir dos formularios, el de login y el de registro, pero cada uno puede colocar lo que desee.

El siguiente paso, será definir los estilos básicos (visibilidad, tamaño y posicionamiento):

#wrapper{
	text-align: center;
}
 
#toppanel {
	position: absolute;
	top: 134px;
	width: 612px;
	z-index: 25;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
 
#panel {
	width: 612px;
	position: relative;
	top: 1px;
	height: 400px;
	margin-left: auto;
	margin-right: auto;
	height: 0px;
	z-index: 10;
	overflow: hidden;
	text-align: left;
}
 
#panel_contents {
	height: 100%;
	width: 616px;
	position: absolute;
	z-index: -1;
}
 
#show_button {
	position: relative;
	top: -30px;
	left: 460px;
}
 
#hide_button {
	position: relative;
	font-size: 90%;
	font-weight: bold;
	z-index: 26;
	margin-top: -36px;
}

Por supuesto, el aspecto y el posicionamiento final dependerá de vuestras necesidades de diseño; este ejemplo está basado en la implementación que hemos hecho en codeando.net.

Y por último el código javascript que hará que funcione nuestro panel desplegable:

<script type="text/javascript"><!--
	$(document).ready(function() {
		$("div#show_button").click(function(){
			$("div#show_button").toggle();
			$("div#panel").animate({
				height: "460px"
			}, "fast", "swing", function() {$("div#hide_button").toggle();});
 
		});
 
		$("div#hide_button").click(function(){
			$("div#hide_button").toggle();
			$("div#panel").animate({
				height: "0px"
			}, "fast", "swing", function(){$("div#show_button").toggle();});
 
		});
 
	});
--></script>

Y con esto ya deberíamos tener nuestro panel funcionando, todo comentario será bien recibido. En otra entrega veremos cómo implementar un sistema de registro de usuarios con activación por email.

Por Jose. Han entrado 32398 veces. Hay 13 comentarios       
vie, 07 nov 2008 - Archivado en (X)HTML, CSS, Diseño y Tutoriales

Uno de los elementos clave en una página web es el menú de navegación. Hay muchos factores que influyen en el diseño de un menú, pero ante todo:

  • Debe ser bien visible a primera vista.
  • Debe ser claro.
  • Ha de estar bien formado y ser accesible.
  • Debe cumplir los estándares del W3C.

Bien, para construir nuestro menú, primero crearemos la estructura, usando una lista desordenada (<ul>). Muchos de vosotros direis ¿porqué todo el mundo se empeña en que tengo que utilizar listas para construir un menu? La respuesta es bien sencilla: el XHTML es un lenguaje diseñado para estructurar datos, y un menú no deja de ser una lista de enlaces, por lo que lo más natural sería representarlo como lo que es, una lista.

Como ejemplo real, cogeré una web que desarrollé hace poco, www.almirantelibros.com. Lo primero, como decíamos es crear la estructura del menú:

  1. <ul id="lmenu">
  2. <li id="lmenu1"><span class="selected">Inicio</span></li>
  3. <li id="lmenu2"><a href="http://www.almirantelibros.com/almirante/">Quienes somos</a></li>
  4. <li id="lmenu3"><a href="http://www.almirantelibros.com/coleccion/">La colecci&oacute;n</a></li>
  5. <li id="lmenu4"><a href="http://www.almirantelibros.com/blog/">El Blog</a></li>
  6. <li id="lmenu5"><a href="http://www.almirantelibros.com/noticias/">Noticias</a></li>
  7. <li id="lmenu6"><a href="http://www.almirantelibros.com/contacto/">Contacto</a></li>
  8. </ul>

Esto nos daría como resultado algo parecido a lo siguiente:

Ya tenemos un menú que, aunque completamente funcional, necesita que le demos forma, lo cual haremos a continuación utilizando CSS y una imagen que habremos preparado previamente. Lo primero es preparar la lista para mostrarla de forma horizontal:

  1. ul#lmenu {
  2. padding: 0;
  3. margin: 0;
  4. }
  5.  
  6. ul#lmenu li {
  7. list-style-type: none; /* Eliminamos el punto de los elementos de la lista */
  8. float: left; /* Con esta línea ya tenemos el menú en horizontal */
  9. height: 38px; /* Establecemos el alto, para adaptarlo a la imagen */
  10. }

Una vez tenemos el menú en horizontal, cargaremos la imagen del menú, y digo "la imagen" porque utilizaremos una técnica llamada "CSS Sprites" que ya revisaremos a fondo, y que consiste en cargar una sola imagen como si fuera un "mapa" con todas las imágenes que vamos a utilizar, en este caso en el menú:

 

 Y ahora vamos con el código CSS:

  1. ul#lmenu li a,
  2. ul#lmenu li span {
  3. display: block; /* Convertimos los enlaces y el "span" en bloques */
  4. background-image: url(/images/menu.jpg); /* Les asignamos a todos la misma imagen, así sólo la cargamos una vez */
  5. background-repeat: no-repeat;
  6. text-indent: -24000px; /* Escondemos el texto, indentándolo fuera de la página hacia la izquierda */
  7. }
  8.  
  9. /* A continuación, con "background-position" y "width", posicionamos la imagen de fondo para cada elemento del menú */
  10.  
  11. li#lmenu1 a {
  12. background-position: left 1px;
  13. width: 72px;
  14. }
  15.  
  16. li#lmenu1 a:hover {
  17. background-position: left -37px;
  18. }
  19.  
  20. li#lmenu1 span {
  21. background-position: left -75px;
  22. width: 72px;
  23. }
  24.  
  25. li#lmenu2 a {
  26. background-position: -100px 1px;
  27. width: 166px;
  28. }
  29.  
  30. li#lmenu2 a:hover {
  31. background-position: -100px -37px
  32. }
  33.  
  34. li#lmenu2 span {
  35. background-position: -100px -75px;
  36. width: 166px;
  37. }
  38.  
  39. li#lmenu3 a {
  40. background-position: -292px 1px;
  41. width: 105px;
  42. }
  43.  
  44. li#lmenu3 a:hover {
  45. background-position: -292px -37px
  46. }
  47.  
  48. li#lmenu3 span {
  49. background-position: -292px -75px;
  50. width: 105px;
  51. }
  52.  
  53. li#lmenu4 a {
  54. background-position: -423px 1px;
  55. width: 78px;
  56. }
  57.  
  58. li#lmenu4 a:hover {
  59. background-position: -423px -37px
  60. }
  61.  
  62. li#lmenu4 span {
  63. background-position: -423px -75px;
  64. width: 78px;
  65. }
  66.  
  67. li#lmenu5 a {
  68. background-position: -528px 1px;
  69. width: 92px;
  70. }
  71.  
  72. li#lmenu5 a:hover {
  73. background-position: -528px -37px
  74. }
  75.  
  76. li#lmenu5 span {
  77. background-position: -528px -75px;
  78. width: 92px;
  79. }
  80.  
  81. li#lmenu6 a {
  82. background-position: -645px 1px;
  83. width: 105px;
  84. }
  85.  
  86. li#lmenu6 a:hover {
  87. background-position: -645px -37px
  88. }
  89.  
  90. li#lmenu6 span {
  91. background-position: -645px -75px;
  92. width: 105px;
  93. }

Y con esto, ya tenemos terminado el menú, el ejemplo lo teneis en: www.almirantelibros.com

Por Jose. Han entrado 6173 veces.  Comentarios