Emular un dock de MacOS con CSS Animations
Gracias a CSS Animations las posibilidades al programar con CSS se multiplican. Podemos hacer, por ejemplo cubos en 3D o un Pong. Esta vez enseñaremos a crear un dock parecido al de MacOS, utilizando únicamente CSS Animations. Compatible con Firefox 3.5+ (Aunque no funciona correctamente el efecto de transición) y Safari 3+ y 4+. No … Lee más!
Efecto de imagen borrosa con CSS
Cuando definimos una imagen de fondo en CSS, podemos indicar su posición (background-position). Pero a mucha gente se le olvida que hay otra propiedad muy interesante llamada background-attachment. Mediante dos imágenes de fondo podremos crear un efecto de imagen borrosa. El primer fondo, sólido, se coloca debajo del segundo fondo, que es la misma imagen … Lee más!
Solucionar errores comunes de CSS con Javascript
CSS nos puede dar muchos quebraderos de cabeza si no sabemos usarlo bien. Aunque respetemos los estándares siempre hay navegadores que no lo interpretan correctamente (Por ejemplo algunas versiones de Internet Explorer). Pero esto se puede arreglar, por ejemplo, con Javascript. Podemos usar Javascript para arreglar errores comunes en CSS, tales como las alturas de las … Lee más!
Multiple backgrounds con CSS3
Con CSS2 solo podíamos tener una imagen de fondo por cada elemento. Pero todo evoluciona y ahora con CSS3 podemos aplicar varias imágenes de fondo en un mismo elemento. Para ello debemos aplicar este código: Si nos fijamos es una única propiedad background pero con una dirección por cada fondo, cada una separada por una … Lee más!
Sombras en el texto sin usar text-shadow
La propiedad text-shadow, propiedad de CSS3, es muy nueva y por lo tanto la mayoría de los navegadores no la han implementado. Solo Safari, con sus versiones 3 y 4 lo soporta. Pero nosotros queremos que sea soportada por la mayoría de navegadores, así que vamos a implementar otra técnica para lograr sombras en el … Lee más!
Botón presionado con CSS
Cada vez se usan más los botones con estado “active” o activo (presionado) en CSS. Usaremos una imagen como rollover crear un botón con estado normal y presionado (active) en CSS. Empezemos:
Estilos solo para determinados navegadores
Muchas veces estamos programando para un determinado navegador. Nos quedamos contentos de nuestro trabajo realizado, ya que se visualiza correctamente. Vamos a otro navegador y… ¡Oh dios, qué desastre! Cajas de búsqueda esparcidas por todos los lados, imágenes que se mezclan, todo desorganizado… Esto puede ocurrir porque no tenemos validado los estándares de la página, … Lee más!
¡Contenido premium gratis!
Suscríbete a nuestra lista premium gratuita y recibe cupones sobre recursos de diseño gráfico Freepik, artículos y material exclusivo.
