Saltar al contenido
Portada » css

css

Editar el CSS de la propiedad :hover con el inspector web de Chrome

  • bocabit 
  • dev

Si eres uno de los que se ha peleado cientos de veces con los :hover de los enlaces HTML al aplicarle estilos, seguramente te interese saber que el inspector web de Chrome (en Safari no he encontrado la manera) dispone de una característica que permite editar estos estilos de manera muy simple. Basta con pulsar sobre el botón en el que aparece un cursor en la parte superior derecha del inspector (“Toggle element state”). Una vez hecho clic, se nos desplegará una serie de opciones para elegir el estado del elemento: hover, focus, visited o active. Con este pequeño truco… Leer más »Editar el CSS de la propiedad :hover con el inspector web de Chrome

Responsive Design para novatos. Tutorial básico.

Desde la llegada de HTML5 y CSS3, el Responsive Design o “Diseño Sensible” es una nueva técnica que se está empezando a utilizar cada vez más. Consiste básicamente en adaptar los diseños de las páginas web en función del tamaño de la ventana del navegador, cambiando según esta aumenta o disminuye y sin necesidad de disponer varias versiones de CSS o HTML. Podéis ver un pequeño ejemplo si redimensionáis el blog o si lo véis en un iPad

Genial Coca-Cola en moviemiento con CSS

Me he quedado con la boca abierta al ver un efecto CSS creado por Román Cortés, que simula la rotación de una lata de Coca-Cola sobre sí misma utilizando CSS. Me parece totalmente increíble que sean posibles efectos como este a pesar de las limitaciones de CSS, que dejan patente que la única limitación es la imaginación. Para conseguirlo, parece que deja estático un fondo con todo el lateral del bote (pensad en el rectángulo que queda al desmontar un cilindro) utilizando el atributo “fixed” de la propiedad “background-attachment” y creando una especie de ventana que al hacer scroll crea… Leer más »Genial Coca-Cola en moviemiento con CSS

CSS Sprites, disminuyendo las peticiones de nuestra web

CSS Sprites es una técnica de diseño HTML que permite reducir drásticamente el número de peticiones al cargar las imágenes de nuestra página web. ¿Cómo? Pues juntando el mayor número posible de éstas en una misma imagen. A continuación os hago una pequeña explicación de esta técnica, que puede hacer que vuestro servidor se sature menos y que vuestras páginas carguen más rápido. Seguramente a muchos os sonarán esas imágenes de videojuegos antiguos en las que aparecen muchos de los movimientos de los personajes seguidos. La técnica CSS Sprites sigue la misma base que la animación de estos juegos. Como… Leer más »CSS Sprites, disminuyendo las peticiones de nuestra web