elWebmaster.com

Diseño | CSS | recursos

CSS Sticky Footer: un footer fijo con estilos CSS

CSS Sticky Footer: un footer fijo con estilos CSSEs un efecto muy bueno y no hay muchos sitios que lo implementen. El uso de un footer fijo tiene muchas utilidades además de ser algo muy bonito ^_^. Piensen que tendrán una cantidad de opciones, enlaces y demás todo el tiempo al alcance del usuario.

CSS Sticky Footer es un script de CSS listo para que copies y pegues en tu proyecto web. La mayor ventaja es que funciona con Internet Explorer 5, 6, 7 y 8, además de Firefox, Opera y Safari, entre otros. Seguir leyendo

16/May/08, 13.52 Juan Manuel 1 comentario

Diseño | CSS | tipografía

7 fuentes tipográficas que seguro no usas en CSS, aunque podrías

7 fuentes tipográficas que seguro no usas en CSS, aunque deberíasLos estilos CSS nos trajeron muchas ventajas en cuanto al diseño de nuestros sitios web, pero por alguna razón parece que estamos limitados al uso de 4 o 5 tipos de fuentes que están presentes en cualquier computadora, por miedo a que las demás no se visualicen correctamente.

Así es como no vemos otra cosa que Arial, Helvetica o Georgia en la mayoría de los blogs de la red. Pero hoy en día tenemos una gama más amplia de opciones a la hora de elegir, siempre dentro de las fuentes “seguras”. Te recomiendo 7 que sin duda deberías tener en cuenta. Seguir leyendo

12/May/08, 16.12 Juan Manuel 1 comentario

Diseño | CSS | html

CSS: Efecto de texto con gradiente

Efecto de texto con gradiente¿Quieres lograr buenos encabezados sin usar imágenes de Photoshop? Aquí te mostramos un simple truco de CSS para que sepas cómo crear el efecto de texto con gradiente con una imagen PNG (puro CSS, sin JavaScript o Flash).

Todo lo que necesitas es un tag vacío en el encabezado y aplicarle un overlay a la imagen de fondo usando la propiedad CSS position:absolute. Este truco ha sido testeado en la mayoría de los buscadores: Firefox, Internet Explorer 6, Safari y Opera. Sigue leyendo para saber cómo hacer… Seguir leyendo

09/May/08, 12.15 Alejandra 1 comentario

CSS | recursos | código

Toolbox CSS: estilos para usar en cualquier sitio web

Toolbox CSS: estilos para usar en cualquier sitio webToolbox CSS es simplemente un conjunto de fragmentos de código CSS que no está relacionado con ningún sitio web en particular, para que puedas copiar y usar directamente en tus proyectos. La idea es que no escribas 1.000 veces la misma clase para una propiedad float.

Toolbox CSS es completamente libre, puedes hacer lo que quieras con él, modificarlo, usarlo como está, etc. Puedes usarlo como una segunda hoja de estilos “fija” o agregarlo a tu CSS principal. Seguir leyendo

08/May/08, 15.48 Juan Manuel Comentar

Diseño | Programación | CSS

CSS: Selectores Calificados

Selectores Calificados CSS3Shaun Inman tuvo una gran idea para una presentación en los Grupos de Trabajo de CSS3 a la que ha llamado “Selectores Calificados”. En resumen, es una forma de incorporar estilos a un elemento “padre” basándose en su “hijo”, o “descendiente”.

Aún no se ha lanzado oficialmente porque el autor espera recibir un poco de feedback para depurar y eliminar errores… Pero veamos cuál es la explicación que nos da y cómo funciona. Seguir leyendo

07/May/08, 12.42 Alejandra Comentar

CSS | código | estructura

Mejorando la lectura de código CSS

CSS Cascade Style Sheet - Hojas de Estilo en CascadaUna vez que terminaste tu último proyecto es muy probable que olvides la estructura, sus numerosas clases, combinaciones de colores y estilos tipográficos. Para entender el código años después de haberlo escrito necesitas crear una estructura de código sensible.

La estructura de código sensible reducirá dramáticamente la complejidad, mejorará el manejo del código y simplificará su mantenimiento ¿Cómo puedes lograr una estructura sensible? Aquí te ofrecemos 5 técnicas para que tu código se vea bien. Seguir leyendo

05/May/08, 16.00 Alejandra 1 comentario

Diseño | CSS | recursos

CleanCSS: optimizando automáticamente tu hoja de estilos

CleanCSS: optimizando automáticamente tu hoja de estilosCleanCSS es un servicio online gratuito que te permite copiar el código de tu hoja de estilos CSS y optimizarlo en forma automática. Está pensado para quienes trabajen CSS desde Dreamweaver (¡atentos alumnos del taller de Thor! ^_^) dado que este suele agregar código innecesario que hace más pesados los archivos (y lentos para cargar).

Tenemos 5 opciones de compresión: desde la más extrema (ningún ser humano entenderá el código luego) hasta la más “prolija”. Haz clic aquí para probar CleanCSS.

05/May/08, 12.36 Juan Manuel Comentar

Diseño | Programación | CSS

CSS3: declarando variables

Declarando variables en CSS3Sin duda es algo que muchos programadores estaban pidiendo. Por fin la tercera versión de CSS soportará variables. Hay un poco de controversia con este cambio, dado que CSS se comienza a parecer a un lenguaje de programación.

En síntesis, ahora podremos declarar variables en CSS3. Cada uno decidirá para qué las usa y verá si su código pasa a tardar el triple en cargar, si le va perfecto o si se queda con lo que venía usando y se apoya en Javascript. Por ahora, conozcamos la sintaxis. Seguir leyendo

29/Abr/08, 16.06 Juan Manuel 7 comentarios

Diseño | CSS | código

Mejorando visualmente tus links con CSS

Mejorando visualmente tus links con CSSEn CSS, white-space maneja los espacios en blanco entre elementos, por ejemplo, entre las palabras de un párrafo. La propiedad CSS para white-space no es la más conocida ni utilizada, pero resulta muy útil para diagramar texto.

Los valores son: normal (el espacio en blanco es ignorado por el navegador), pre (se mantiene), y nowrap (el texto no se divide al cambiar de línea, salvo que usemos <br />). Esto es muy útil a la hora de “mejorar” la apariencia de nuestros enlaces. Seguir leyendo

28/Abr/08, 12.39 Juan Manuel 1 comentario

Diseño | Programación | CSS

Román Cortés, un diseñador solidario

Román CortésEn esta era de la web 2.0, donde intentamos aportar contenidos para todos, Román Cortés me resulta un gran modelo inspirador.

Ocasionalmente me topé con su portfolio y sus trabajos llamaron mi atención. No era para menos, ver logos gratis personalizados a disposición de cualquiera y a Homero Simpson logrado en CSS son cosas que no suelen pasar desapercibidas.

Ya sea para saber cómo lograr figuras con CSS o tener en cuenta el gran recurso de logotipos que brinda Román, deberás seguir leyendo :)

Seguir leyendo

23/Abr/08, 17.50 Debi 2 comentarios