Estilizar listas con jQuery y CSS
Algunas veces, ya sea por estética o para dar un mejor estilo a nuestros módulos, sistemas o páginas, resulta interesante reemplazar los estilos de los objetos HTML. Este post va ser el comienzo de una serie de posts para reemplazar la estica de estos elementos. Para nuestro objetivo nos valemos del framework jQuery y algo de CSS. Empezaremos con las listas, es totalmente aplicable, tanto a listas ordenadas como desordenadas.
Como hacer un Ribbon, Cinta o Stickers con CSS
En este pequeño pero interesante post intentaré explicar como hacer esas cintas o stickers que muchas veces vemos, por lo general en los blog en la esquina superior derecha. Para lograr este efecto, lo haremos con una sola linea de código CSS. Pero para comenzar, como primer paso tenemos que diseñar nuestro sticker. En mi caso lo hice con Corel X3, pero pueden utilizar la herramienta grafica que mejor dominen, entonces manos a la obra:
Resetear CSS (Hojas de Estilos)
Cuando empece a desarrollar sitios para la Red de redes, lo primero que pense es ¿por donde empiezo?, tenia una formación en análisis de sistemas, modelado y programación, pero nada para la Web. Esto me llevo a investigar y me quedo claro que era, Primero diseñar, luego maquetar (con CSS y Javascript) y luego la programacion con el lenguaje de servidor de turno. Y asi lo hice, empece con el diseño, una vez terminado pase a la maquetacion con hojas de estilo y es acá donde empezaron mis primeros problemas, y lo que nadie me dijo o por lo menos no encontre en los tutoriales que lei
Menu Drop Down con jQuery y CSS
Vamos a desarrollar un menu estilo Drop Down, de fácil mantenimeinto, usable y accesible con jQuery y CSS:
1º Paso: HTML
Comenzamos creando una lista desordenada con <ul> que luego será nuestro menu, de esta forma:
Diseño de Formularios con CSS
Si estas aburrido de trabajar siempre con las mismos inputs o cajas de texto, te presento una alternativa, que utilizando un poco de diseño y css podrías reemplazar por completo esos aburridos formularios de contacto.
La técnica conciste en primero ocultar el input mediante css, luego diseñamos con la aplicación de diseño gráfico que más te guste una caja de texto, como por ejemplo:
Centrar Div (capa) vertical y horizontalmente
Muchas veces nos encontramos con la necesidad de centrar en pantalla un div principal o centrar un capa dentro de otra, los desarrolladores lo usuamos habitualmente para que el contenido de un sitio aparezca siempre en el centro de pantalla, incluso en distintos navegadores.
Carrousel (jCarrousel) de Imagenes con jQuery
Desde el sitio de sorgalla.com me encontre como hacer una carrousel de imagenes interesante y simple a la vez con jQuery y css.