elWebmaster.com

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

Maquetar 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

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

Si 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

Los 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

El 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

¿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

Rounded 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

Sin 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

Lo natural en la web parece ser el flujo vertical de los elementos, cuanto más contenido hay en una página, más larga se vuelve la misma. Esto responde a criterios de usabilidad dado que estamos acostumbrados a leer líneas de texto cortas que, una debajo de otra, conforman los párrafos de un texto.

Pero ¿se pueden romper los estándares? La respuesta es: “depende de tu propósito”. Si lo que quieres es distinguirte, tu público tiene el ojo entrenado y el tipo de contenido de tu sitio amerita dinamismo ¡bienvenido sea el scroll horizontal! Entérate cómo conseguirlo y conoce los mejores ejemplos. Seguir leyendo