web analytics

El logo de Opera en CSS 3.0

por

¿Céseese qué? CSS, para el que no lo sepa, es un documento semántico que especifica el aspecto y presentación de un documento escrito en HTML o XHTML o XML. Sin una CSS, cualquier página web se vería como un feo documento blanco con letras negras sin formato.

Desde el año pasado se comenzaron a definir las especificaciones de CSS 3.0, que permite nuevas posibilidades para darle estilo a una web, como aplicarle sombras a una imagen o a un bloque estático (los famosos <div>), bordes redondos (como los que ves en Twitter si lo visitas con Firefox o Safari), transparencias (como las que se pueden ver en COLAPSO!) degradados de colores, y mucho más,

La mejor prueba del potencial de CSS 3.0, y como lo interpretan los navegadores web de ayer, pero especialmente los de hoy y mañana, está en esta web, que muestra el logo del navegador Opera (el favorito de este bloguero, por si no lo sabías) compuesto en CSS 3.0

Aunque se trate del logo de Opera, el mejor resultado de este experimento de verdad, no como los otros, se consigue en Safari:

Muchas de las especificaciones de CSS 3.0 aún no son estandarizadas y fueron desarrolladas exclusivamente para Webkit, el motor de renderizado de Safari y Google Chrome. Otras normas muy similares fueron concebidas únicamente para Firefox 3.5. Por lo que este logo también se ve con el realce que otorgan los degradados en el cuerpo de la O en el panda rojo más reciente, como lo muestra el siguiente pantallazo:

En el nuevo visualmente espectacular y tan genial como siempre Opera 10.5, la O no muestra los degradados, pero sí la sombra, más amplia que en Webkit, y la redondez de la O. Estos detalles representas las únicas especificaciones de CSS 3.0 estándar para todos los navegadores que se utilizaron para renderizar este logo de Opera, o lo que es lo mismo, no exclusivas para Firefox y/o Webkit:

Hay otra versión que mediante más sombras, intenta conseguir el efecto de degradado en Opera 10.5. Como el degradado no es estándar, hay diseñadores que derechamente consideran que este efecto no debe ser considerado como parte de CSS 3.0

De todas maneras, este es un tremendo avance: La versión anterior de Opera, la 10.10, aún no consideraba las especificaciones de CSS 3.0, ya que para la fecha de su estreno CSS3 daba sus primeros pasos, así que la O se mostraría de la siguiente manera…

¿Y en Internet Explorer?

La recién estrenada Tech Preview de Internet Explorer 9, que muestra cómo será el nuevo motor de renderizado (“Chakra” , que reemplazará al añejo “Trident”, utilizado desde Internet Explorer 4), pero no los cambios de interfaz demuestra que IE por fin comienza a respetar las especificaciones de CSS, y no sólo las novedades de CSS 3.0, sino las normas impuestas en revisiones mucho más anteriores:

Y así se ve la O en Internet Explorer 8. En IE 7 y Explorer 6 se ve igual. Una excelente metáfora de cómo IE al hacer las cosas a su manera, complica tanto la vida de quienes diseñamos webs:

ETIQUETAS: » » »