Círculo de Maquetadores

Todos sabemos que las etiquetas en HTML pueden tener atributos tales como alt, title, href etc… Aparte de para lo obvio estos atributos nos pueden servir para dar especificidad a nuestros selectores CSS. Los llamados selectores de atributo, son unos selectores avanzados y escasamente conocidos, capaces de identificar estos atributos de un elemento y pasarles un estilo. Con ellos nos podríamos librar de por ejemplo, poner clases e identificadores a muchas etiquetas HTML.

Existen un número reducido de selectores de atributo en CSS2, pero éstos se han ampliado para la próxima versión de CSS3. En este artículo veremos cuantos tipos de selectores de atributo hay y la mejor manera de utilizarlos.

Todos sabemos que la propiedad de CSS font-face funciona en los navegadores como Firefox y Opera entre otros. Pero nunca conseguíamos adaptarlo correctamente para Internet Explorer. Explicamos brevemente como conseguir que funcione sin problemas.

Antes de nada, debemos convertir la fuente al formato embebido eot. Este formato es el que usaremos para Internet Explorer, para el resto de navegadores se deja el formato estandar ttf.

CSS 3 y HTML 5 son capaces de revolucionar la forma en la que se diseñan los sitios Web. Ambos incluyen nuevas características y tantas funciones que es imposible no empezar a ver como funcionan. La inclusión de soporte nativo para cosas como las esquinas redondeadas y diseño de columnas múltiples son sólo la punta del iceberg.

A continuación se presentan los recursos de 70 tutoriales y artículos para empezar con CSS3 y HTML5. Un listado que nos trae CSS Gallery Muchas de las técnicas analizadas son soportados en cierta medida en algunos algunos navegadores modernos (Safari y Firefox con el apoyo más amplio), para que puedas empezar de inmediato.

Ver 70 Tutoriales CSS3 y HTML5

Muchas veces más de uno de nosotros nos hemos encontrado con “columnas” de distinto tamaño. Es decir, cajas de diferente altura. Siempre queremos conseguir que independientemente del contenido de las mismas la altura sea igual para todas.

Con CSS de forma muy muy sencilla podremos conseguir esto, no tenemos que recurrir a Javascript para modificar dinámicamente las alturas de la cajas, ni usar otros métodos que acumalan demasiados divs para conseguirlo, y que luego abarcan problemas del diseño de la estructura.

Ahora veremos que usando los atributos display:table; display:table-row; y display:table-cell; conseguiremos convertir las cajas o divs en una tabla, y ya sabemos que con las tablas nunca veremos una celda más alta que otra de la misma fila.

En el siguiente ejemplo, usaremos 3 cajas que se convertiran en 3 columnas con el mismo alto, independientemente de su contenido. La explicación de como hacerlo se explica en el mismo HTML que hay a continuación.

CSS3 y HTML5 están ya llegando poco a poco, y con ellos toda una nueva batalla por conseguir el mejor marcado. Estas nuevas tecnologías facilitarán también la integración de plantillas o maquetas a los desarrolladores. Por el contrario, tenemos que obtener una nueva ideología y modificar nuestros hábitos de codificación para mantener la Web Accesible.

Poco a poco nos tenemos que familiarizar con estas nuevas tecnologías (css3 y html5), ya que serán las que utilizaremos en un futuro no muy lejano. Todo esto va en continuo progreso así que nos conviene ir entrando en contacto.

Supongo que habéis notado que en la mayoría de los navegadores el suavizado de texto no se percibe tal y como lo hace el Internet Explorer 7 e Internet Explorer 8. Pero si véis el texto siguiente bajo el sistema operativo MAC notaréis que el suavizado de texto o smooth text se visualiza en Firefox de forma sorprendente, y como comprobaremos “no es una imagen”:

Círculo de Maquetadores: Comunidad de Maquetadores Web

Chris Hanscom ha desarrollado una nueva guía rápida de referencia CSS3 con las últimas especificaciones.

La guía de referencia CSS 3 dispone de una de las más completas y actualizadas hojas de cheats con la nueva especificación de CSS 3. Veremos las nuevas propiedades, selectores y que valores se pueden introducir según el estándar CSS3.

Más de uno de nosotros nos hemos encontrado con crear un sistema de votos factible y práctico. Como vemos en Youtube o en Amazon. La mayoría de ejemplos que encontramos por la Web, estan desarrollados con JavaScript que funcionan correctamente bien, pero ya sabemos que si lo tenemos desactivado ya no nos sirve de mucho.

A continuación vemos como crear un sistema de votos o Rating Star únicamente con CSS…

Con la versión tres del CSS, muchas características emocionantes serán ejecutadas. CSS3 lleva a mayor flexibilidad y hace mucho más fácil reconstruir efectos previamente complejos. Muchas reglas para ahorrarnos tiempo se están aplicando para CSS3 como: text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image, multi-column layout, etc… Aunque solamente los navegadores más modernos soportan actualmente estos efectos.

En este artículo hecharemos una ojeada a algunas características interesantes de CSS3 que puedes poner en práctica en tus maquetas Web.

Como ya sabemos todos no todas las versiones de los navegadores tienen los mismos parámetros de referencia para trabajar con algunas de las propiedades y valores de las hojas de estilo. Todos nos hemos “roto” la cabeza más de mil veces con las propiedades de CSS en distintos navegadores y con su comportamiento en cada uno de ellos. En especial nuestro amigo Internet Explorer 6.

El caso más común de todos es el famoso modelo de cajas. Debido a que los “cajas” o DIVs es lo que más usamos a la hora de maquetar en distintos navegadores.