Cuidar los detalles hasta rozar la psicopatía es algo muy propio de quienes nos dedicamos al diseño, de una u otra forma.

Es por esto que cuando realizamos el diseño y maquetación de una web, no nos conformamos con que el contenido simplemente esté ubicado en su sitio. Si podemos hacer que tenga algún tipo de gracia que mejore el estatismo, mucho mejor. Esto lo solemos hacer con efectos CSS.

Qué son los efectos CSS

Para quien ande con un poco de despiste, el css es un lenguaje de diseño gráfico con el que se aplican estilos visuales a los elementos que estructuran una página web.

Con CSS podemos conseguir dar un color y un tamaño determinados a un texto, también podemos hacer que una imagen rote sobre sí misma y se ponga en blanco y negro cuando pasas el ratón por encima; o que el fondo cambie automáticamente de color como si se tratase de las luces de un guateque. Un sin fin de cosas más o menos divertidas. Usando lo efectos CSS, conseguimos algo más allá de dar estilo simplemente.

De lo básico a lo complejo en cuanto efectos CSS

El abanico de posibilidades que ofrece el lenguaje CSS en cuanto a efectos es tan amplio que puede resultar inabarcable. Así que lo mejor será empezar con lo más básico.

Los efectos CSS de cualquier elemento pueden activarse con una interacción, como por ejemplo pasar el cursor encima. Vamos a ejemplos de cómo funcionan esos efectos (si estás leyendo esto en un dispositivo táctil, lo tendrás difícil. Ya que probablemente que no tienes un ratón ni un cursor en tu pantalla, te recomiendo que busques un ordenador de sobremesa y disfrutes de la experiencia completa).

De este modo, un botón puede tener el fondo de color rosa, pero cuando pasa el ratón por encima podemos hacerlo verde, también podemos hacer que sea más grande cuando hacemos clic.

Botón

Este efecto css puede parecer muy básico, pero supone una gran diferencia en la experiencia de usuario.

Con estas interacciones tan básicas podemos ir consiguiendo cosas un poco más interesantes de cara a la experiencia del usuario. Por ejemplo, cambiar la imagen que se está viendo. Haz clic en el perro, verás que risa.

Ok. Los efectos CSS también se pueden combinar para conseguir que el disfrute del usuario llegue hasta el delirio. Vamos a conseguir que un elemento se eleve, cambie su sombra y cambie de color. Todo a la vez.

  • Branding
  • Creatividad
  • Diseño gráfico
  • Web
  • UX/UI
  • Marketing
  • Vídeo

Hasta ahora hemos visto efectos CSS que se activan con una interacción del ratón, pero… también se puede conseguir que los efectos CSS sean automáticos. Mira como levita este lindo colibrí …

Las webs con efectos CSS son mejores

Esta afirmación es un tanto arriesgada, pero como titular cumple su función. Como sabemos, no hay diseños mejores ni peores, si no que cubren en mayor o menor medida las necesidades comunicativas que plantea la situación.

El caso es que la experiencia del usuario suele ser positiva cuando encuentra lo que busca y a la vez está viendo cosas que le gustan. Suele ser un motivo de goce ver cómo algo se mueve suavemente o interactúa con lo que se va haciendo. Consecuentemente, si el usuario está contento en tu web va a relacionar tu empresa con algo positivo. Y eso es una muy buena noticia.

También es clave tener presente de qué web se trata. Puede ser muy contraproducente llenar de efectitos divertidos la web de una funeraria. Necesariamente todo esto tiene que pasar por el sentido común y el buen criterio de un diseñador profesional.

Volver al glosario
Agencia de Branding

Somos una agencia de branding. Todos nuestros proyectos tienen algo en común: la creatividad y la estrategia. Contáctanos si tienes un proyecto o si te gustaría saber más sobre nuestro método de trabajo.

Conócenos