Blog: etiqueta CSS

Ardilla Quio Ardilla Quio

21 de Mayo de 2012

Espacios en blanco en listas con inline-block

Un elemento con la propiedad CSS display: inline-block coloca los elementos en línea pero conservando las propiedades de bloque (alto, ancho, margen, relleno, ...), pero cuando establecemos una lista con el atributo display: inline-block aparece una separación de 4 píxeles entre los elementos de la misma, que puede echar abajo el diseño de nuestra web. En este artículos veremos distintas formas de solucionar este problema: unas modificando el HTML y otras usando sólo CSS.

17 de Enero de 2012

LESS: Usando CSS dinámico

Cuando CSS nació solo era una herramienta para modificar algunos estilos básicos en una página web. Con el tiempo los desarrolladores encontraron una potente herramienta en este lenguaje, optimizando su uso no solo para cambiar estilos sino para ser capaz de controlar toda la parte visual de una página web en cualquier dispositivo que nos encontremos. Ahora han ido un paso más allá, creando herramientas de pre-procesado de CSS, que consiste en extenderlo para usar variables, reglas anidadas, mixins o funciones. Entre estas herramientas se encuentran LESS o SASS.

17 de Noviembre de 2011

@font-face: Incrustando tipografías en una página web (revisado)

El código CSS que habíamos recomendado en nuestro artículo @font-face: Incrustando tipografías en una página web era bueno en su momento, pero la salida de Internet Explorer 9, el aumento de formatos de fuente soportados por los navegadores, así como el descubrimiento de que es poco recomendable usar la instrucción local(), ha hecho necesario actualizar el código para que funcione correctamente en la mayoría de navegadores, sistemas operativos y servidores.

18 de Julio de 2011

Imágenes con puntos blancos en Internet Explorer

Este es uno de esos errores que nos encontramos a veces en Internet Explorer y que pueden hacernos perder horas enteras sólo para encontrar el motivo.

El problema se presenta habitualmente cuando tenemos imágenes que hacemos aparecer o desaparecer con un efecto de fundido (por ejemplo, con los efectos fadeIn() y fadeOut() de jQuery). Cuando lo vemos en cualquier otro navegador, funciona correctamente, pero en Internet Explorer alguna de las imágenes se ve con puntos del color del fondo.

19 de Enero de 2011

@font-face: Incrustando tipografías en una página web

Desde el principio una de las limitaciones más importantes en el diseño web ha sido en el uso de fuentes tipográficas. Aunque teóricamente era posible usar cualquier fuente en una página web, en realidad esto era impracticable debido a que cada visitante de la web debía tener la fuente en cuestión instalada en su ordenador para poder visualizarla correctamente. Por ello, hasta ahora los diseñadores web tenían que limitarse a usar un pequeño conjunto de fuentes "seguras": aquellas fuentes que vienen instaladas en los sistemas operativos más comunes (Windows, Mac OS X, Linux, ...) y que por lo tanto sabemos que van a estar instaladas en el 99% de los ordenadores visitantes.

30 de Diciembre de 2010

CSS Sprites

Un factor fundamental que debemos tener en cuenta a la hora de programar una página web es la velocidad de carga. Siempre que trabajamos con el código tenemos en cuenta este factor, pero hoy comentaré una técnica que nos permitirá reducir este tiempo con el uso de CSS. Es una idea que tiene su origen en los antiguos videojuegos y en la necesidad de utilizar mejores gráficos sin que esto afectara al rendimiento, conocida como Master Grid.

La Master Grid no es más que una imagen que contiene todas las imágenes necesarias para la ejecución del juego, y para mostrar la imagen deseada sólo habría que alterar la posición del fondo; así la página web solamente necesita pedir al servidor una imagen.

21 de Diciembre de 2010

CSS hacks para Internet Explorer

En los últimos años los fabricantes de navegadores web se han concienciado por fin de la importancia de que sus productos se adhieran a los estándares HTML y CSS para un correcto visionado de las páginas web. Pero por desgracia eso no fue siempre así, y durante años los maquetadores han tenido que pelearse con navegadores que poseían motores de renderizado incompatibles y repletos de errores. Para ello, se han desarrollado diversas técnicas, conocidas como trucos o hacks de CSS, que permiten explotar las formas peculiares en las que distintos navegadores interpretan el código CSS y conseguir contrarrestar los errores de renderizado propios de cada navegador.

19 de Noviembre de 2010

Nueva página web

Bienvenidos a nuestra nueva página web. Hacía mucho tiempo que queríamos actualizarla, pero nunca encontrábamos el momento para hacerlo. Por fin se dieron las circunstancias apropiadas y aquí teneis el resultado.

El diseño de la página web ha sido realizado por Línea Creativa y, aunque estamos puliendo ciertos estilos, está acabado en un 90%.