CSS


CSS 3: Etiquetas propias de cada navegador (-webkit, -moz, -ms, -o)

En CSS 3 existen etiquetas nuevas que cada navegador interpreta de forma diferente al no haber un estandar por el que se tengan que regir. Es por ello que por ejemplo, que a la hora de hacer un degradado, o con algunas de las etiquetas nuevas, tengamos que usar diferentes prefijos. Estos prefijos nuevos son los siguientes: Versión Navegador Prefijo Ejemplo Firefox 3.6+ -moz -moz-linear-gradient Chrome, Safari 4 -webkit -webkit-gradient Crhome 10+, Safari 5.1+ -webkit -webkit-linear-gradient Opera 11.10+ -o -o-linear-gradient Internet Explorer 6-9 filter filter Internet Explorer 10+ -ms -ms-linear-gradient Estándar W3C – Ninguno linear-gradient Navegadores antiguos – Sin soporte […]


CSS: Evitar peticiones innecesarias al cambiar el estilo de un enlace (ascensor)

Uno de los usos comunes en CSS es usar dos imágenes diferentes para un caso en el que dicho elemento está inactivo y nunca ha sido visitado (a:link) y otro cuando el ratón se sitúa encima (a:hover), queda activo (a:active) o ha sido visitado (a:visited). Imaginemos que tenemos una imagen en la que aparece “Quiénes somos”, y que al poner el ratón encima (a:hover), queremos que aparezca rodeada con un círculo naranja. Lo normal es pensar en dos imágenes separadas completamente distintas. Sin embargo, si lo hacemos así, al señalar por primera vez la imagen necesitaremos una nueva petición para […]


¿Cómo centrar una imagen verticalmente con CSS?

Probablemente cuando insertamos una imagen, queramos centrarla verticalmente y que no se nos quede la base de la imagen alineada a la del texto, sino que la base del texto coincida con el punto medio de la imagen. Para entenderlo mejor, veamos el siguiente ejemplo: Bottom Middle Top Si queremos conseguir el resultado como está en la celda del centro, lo normal es pensar en alguna de las siguientes opciones:

Sin embargo, cuando queremos hacerlo con CSS, estas opciones por sí solas, no sirven. El código siguiente, resuelve el problema:

El truco está en la segunda sentencia.


Fondo degradado con CSS3

Hasta el momento existen dos formas establecidas por CSS3 para crear un gradiente, ya que desafortunadamente Webkit (el framework que esta presente en navegadores como Safari y Chrome) y Mozilla (controla el CSS3 en Firefox) no llegaron a un acuerdo en lo que a este tema se refiere. Es esto y la sintaxis lo único que diferencia a los dos códigos que utilizaremos en este artículo, ya que producen básicamente el mismo resultado.