elWebmaster.com

Diseño | PHP | CSS

Estilos CSS para Safari y Chrome en un archivo aparte

cssAl testear nuestros diseños en varios navegadores, llega un punto que para que todo quede “pixel-perfect” debemos recurrir a los famosos hacks.

Los hacks para Internet Explorer suelen aislarse dentro de tags conticionales para mayor prolijidad, pero lo que muchos no hacen es separar también los hacks para Safari y Chrome. Esto nos permite conservar una hoja de estilos limpia y fácil de actualizar. Seguir leyendo

21/Ene/10, 08.00 Juan Manuel 7 comentarios

Diseño | CSS | recursos

CSS para principiantes: imágenes con doble borde

Hay muchos efectos que podemos aplicar por medio de CSS a las imágenes de nuestro sitio, pero la mayoría no son compatibles con todos los navegadores. Sin embargo, a veces lo mejor suele ser lo más sencillo, y por medio de CSS liso y llano podemos lograr un buen diseño que sea multiplataforma.

Por ejemplo, podemos agregar un borde de un color a una imagen, ponerle otro color de fondo y por medio del padding generaremos el efecto de “borde doble”. Luego, para una mejor experiencia de usuario, podemos usar este efecto sólo en hover, de manera que al pasar el mouse por encima se resalte la imagen. Seguir leyendo

16/Oct/08, 10.50 Juan Manuel 2 comentarios

Diseño | CSS | recursos

Estructurá el CSS de tu sitio web

Logo CSSMaquetar con CSS es algo fundamental hoy en día, pero muchas veces resulta un reto a la hora de programar cómo estructurar el código de forma correcta y ordenada de manera tal que podamos encontrar lo que buscamos con tan sólo darle un vistazo al mismo.

CSS frame es una herramienta gratuita que nos brinda la estructura CSS inicial que tenemos que usar para realizar estilos en nuestro HTML.
Si bien no vamos a necesitar utilizar todos los estilos, es una forma de obtener una estructura base, rápida y simple. Seguir leyendo

09/Sep/08, 14.00 Micaela 1 comentario

Diseño | CSS | recursos

Una única imagen (sprite) para todo un menú interactivo en CSS

Si uno desea crear un menú con varios botones que cambien su imagen al pasar el mouse por encima, normalmente crea varias imágenes, dos por cada estado de cada botón. Esto ralentiza el sitio y genera muchas peticiones al servidor (HTTP Requests).

Sabías que Google, por ejemplo, extrae todas las imágenes de su sitio de un único archivo? Esto es posible gracias a los sprites, una especie de grilla de imágenes que nació con los videojuegos. Conoce cómo aplicar sprites en tu sitio para ganar velocidad de descarga, espacio y peticiones en el servidor y mucho más.
Seguir leyendo

18/Ago/08, 09.00 Micaela 11 comentarios

PHP | Programación | CSS

Comprimir dinámicamente (con PHP) tu hoja de estilos CSS

Comprimiendo con PHP el código de tu hoja estilos CSS dinámicamenteSi eres fanático de la reducción de peso en los archivos de tu página web, seguramente tratarás de ofuscar el código de tus archivos lo más posible, no dejando espacios, tabulaciones ni saltos de línea. Pero el problema viene a la hora de trabajar con los archivos que comprimiste. Si bien siempre puedes guardar una copia del código indentado, hay una forma mucho más práctica de comprimir tu código.

Tomemos por ejemplo tu hoja de estilos CSS. Mucho más práctico sería que el código estuviera prolijamente indentado y por medio de PHP podríamos comprimirlo dinámicamente antes de que se cargue en el servidor. ¡Lograr esto es muy sencillo! Sólo tienes que seguir estos pasos. Seguir leyendo

01/Ago/08, 14.36 Juan Manuel 4 comentarios

Diseño | Usabilidad | CSS

Eliminando la molesta línea punteada de los enlaces de tu sitio

Eliminando la molesta línea punteada de los enlaces de tu sitioLos links del tipo “ancla” <a> muestran por defecto una línea punteada cuando están activos o “en foco”. En Firefox 3 la línea toma el color del texto mientras que en otros navegadores o versiones directamente se muestra en color gris.

Esto no es una locura, por cuestiones de accesibilidad se muestra qué link está activo (piensa en personas que no puedan acceder a un sitio con una computadora con mouse. Presionando”tab” se desplazarán por los enlaces. Pero si te molesta ver esa línea en tu sitio por cuestión de estética o diseño, puedes seguir leyendo para enterarte cómo eliminarla. Seguir leyendo

30/Jul/08, 14.04 Juan Manuel 6 comentarios

Diseño | Programación | CSS

Posicionando correctamente elementos con estilos CSS

Posicionando correctamente elementos con estilos CSSEl tema del posicionamiento correcto de los elementos mediante estilos CSS es algo que puede resultar muchas veces confuso y difícil de dominar por completo. Pero en el blog de Kilian Valkhof un artículo llamado “Comprendiendo el posicionamiento en CSS” nos da unos cuantos ejemplos que son de mucha ayuda.

A continuación les dejo algunos conceptos que van a resultar bastante útiles a la hora de trabajar sobre todo con las propiedades display y position de CSS. Espero que ustedes también lo encuentren tan interesante como yo. Seguir leyendo

29/Jul/08, 11.05 Micaela Comentar

Diseño | código | estilos CSS

Estilos de Blockquotes (citas) originales en CSS para tu blog

Estilos de Blockquotes (citas) originales en CSS para tu blog¿Por qué habrías de quedarte con el estilo que viene por defecto en tu blog, ya sea porque se trate de un tema para WordPress, Blogspot o uno creado por tí mismo? Gracias a CSS podrás lograr algunos estilos originales para aplicarle a las citas de tu blog.

<blockquote> </blockquote> son los tags que usamos para encerrar citas de texto, pero hay muchas opciones en cuanto al diseño, algunas más “conservadoras” otras más radicales, artísticas o incluso bizarras. Conoce cómo lograrlos cambiando el código de los estilos CSS. Seguir leyendo

25/Jul/08, 12.25 Juan Manuel 1 comentario

Diseño | CSS | recursos

RoundedCornr: esquinas redondeadas en HTML y CSS

RoundedCornr: esquinas redondeadas en HTML y CSSRounded Cornr es una aplicación online que nos permite generar esquinas redondeadas para el contenido o botones de nuestro sitio web o blog. En pocos pasos obtendremos el código necesario para usar en nuestro HTML y en la hoja de estilos CSS.

Sólo hace falta definir ciertos parámetros como el color de fondo, el color de la caja, el tamaño del radio de la esquina, etc. y hacer clic en “Generate RoundedCornr”. Luego copiamos y pegamos el código ¡y listo! Seguir leyendo

19/Jul/08, 12.16 Micaela Comentar

CSS | recursos | código

FancyForm script para darle formato a las casillas de verificación

FancyForm script para darle formato a las casillas de verificaciónSin duda todo diseñador se encuentra en un inconveniente a la hora de realizar checkboxes y radio buttons ya que puede resultar bastante engorroso cambiar el diseño que viene por defecto, especialmente en los navegadores más antiguos, lo que le quita bastante estética al sitio.

FancyForm es un script realizado mediante CSS y Javascript, junto con distintas imágenes, que nos da la posibilidad de cambiar este tedioso formato que tienen los checkboxes por otros que poseen un diseño más interesante y bonito. Seguir leyendo

16/Jul/08, 16.52 Micaela 1 comentario

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesión