por Omar Benyakhlef | CSS, Diseño de páginas web, Diseño para móviles, Diseño Web, Trucos CSS, Usabilidad
¿Por qué seguir haciendo aburridos formularios cuando podemos usar impresionantes efectos CSS?. A veces tendemos a lo fácil, y no hay nada más aburrido en una web que rellenar un formulario, añade estos efectos y verás que aumentarán los usuarios que lo utilizan.
Es exagerada la cantidad de aburridos formularios que además piden campos totalmente innecesarios que encontramos en internet. Tu máxima como diseñador ha de ser pedir los datos justos, y si es posible, hacerlo dinámico, divertido incluso, usando iconos, efectos, o estos fantásticos efectos CSS que puedes descargar gratis en tympanus.
Además de vistosos son muy útiles, por ejemplo a la hora de ahorrar espacio, nada mejor que meter el texto dentro del input y que al pinchar sobre él salga y se coloque en un lugar que no moleste, son muchos los efectos que vais a encontrar, espero que os sean útiles.
Ver y Descargar Efectos Input con CSS
por Omar Benyakhlef | CSS, Diseño Web, jQuery, Usabilidad
A la hora de diseñar un formulario, siempre tenemos que tener en cuenta que se trata de la parte más tediosa para un usuario, por eso mismo tenemos que facilitarte al máximo la tarea. Desde no pedir campos que no sean necesarios a intentar simplificar al máximo lo que pedimos, es decir, si le pido código postal ya me evito población y provincia porque lo puedo sacar internamente con ese código. Además de esto hay numerosos aspectos que veremos en mayor profundidad en otro post. Hoy vamos a ver cómo colocar los literales de los imput para que la experiencia sea más cómoda para el usuario y en particular un jQuery que además nos va a dar como resultado un formulario que además de usable va a sorprender a nuestros usuarios.
Tenemos varias opciones a la hora de colocar el nombre de cada imput.
NOMBRE EN LA MISMA FILA
Podemos colocar el nombre delante de cada imput, a mi no me gusta esa solución, ya que cada nombre va a tener una longitud y eso va a provocar un desorden visual que repercutirá notablemente en la usabilidad del formulario. Además y más importante, el desplazamiento horizontal que tiene que hacer el usuario con la vista es mucho mayor que en los demás casos, dificultando mucho la usabilidad.
NOMBRE SOBRE EL IMPUT
La segunda opción y más generalizada, es colocar los nombres encima de la caja, nos permite hacer un diseño amigable y cumple perfectamente los estándares de usabilidad. Todo queda en un mismo bloque, nombre e imput.
NOMBRE DENTRO DEL IMPUT
La tercera opción es colocar los nombres dentro del imput, colocándolo como» value». Ahorras espacio vertical, es más elegante, pero tiene un problema, y es que una vez que pinchas dentro del imput el nombre desaparece, por lo que si no has estado atento, no sabes qué te está pidiendo el formulario. Existe la solución, mediante código, de hacer que vuelva a aparecer el nombre cuando pinchamos fuera de la caja. En este caso, es fundamental que el color del texto sea muy suave para que no parezca que está rellenado el imput.
CSS + JQUERY
Esta opción que os traigo hoy es una mezcla entre la segunda y la tercera. Visualmente no puede ser más limpio y además hace «algo» que sorprenderá al usuario y le hará ser más receptivo en la aburrida tarea que es siempre rellenar un formulario.
Esta opción te muestra dentro de la caja su nombre, al pinchar sobre la caja para rellenar el dato, el nombre «salta» y se coloca encima de la caja, de modo que siempre será visible en el formulario. Particularmente me parece muy original, divertido y usable 100%
Aquí os dejo esta opción funcionando y con la posibilidad de que podáis coger todo el código y usarlo en vuestro sitio.
Pincha dentro de cada imput para ver la animación.
See the Pen jqmLOw by Omar Benyakhlef Domnguez (@gloobs) on CodePen.
por Omar Benyakhlef | CSS, Diseño Web, HTML5, Trucos CSS
Un sprite es el resultado de juntar varios fotogramas para crear una animación.
En este ejemplo lo que hacemos es crear la animación con una única imagen.
He cogido una imagen de 400×400 px y la he dividido en 4 columnas y 4 filas de 100×100 px. En cada una de las celdas he colocado un frame de la animación, el orden, de izquierda a derecha y de arriba a abajo.
Esta es la imagen utilizada, con medidas 400x400px
Con la CSS, lo que hacemos es marcar un área visible, coincidente con el tamaño de cada frame (100x100px) e ir sustituyendo lo que aparece en ese área moviendo la imagen grande. El resultado es una animación perfecta.
Aquí puedes ver el resultado, copiar el código HTML y el CSS
See the Pen oxWwRV by Omar Benyakhlef Domnguez (@gloobs) on CodePen.
Pulsa en 0.25x para ver bien la imagen
El código moveSpritesheet 1s indica el tiempo en el que se tiene que desarrollar el loop, es decir a más tiempo la animación será más lenta y viceversa.
Como podéis ver, el código es mínimo, por lo tanto poco peso y carga rápida, lo ideal !!!
por Omar Benyakhlef | CSS, jQuery
Reloj 3D
Vistosa cuenta regresiva que simula los antiguos paneles que podíamos ver en los aeropuertos.
Podéis ver y descargar el código CSS y JS en CodePen.
por Omar Benyakhlef | CSS
En el diseño web, los botones juegan un papel fundamental en la interacción del usuario con una página. Son elementos clave para la navegación, la conversión y la experiencia del usuario (UX). Aplicar efectos CSS a los botones no solo mejora la estética del sitio, sino que también optimiza la usabilidad y el feedback visual, haciendo que la interacción sea más intuitiva y atractiva.
Beneficios del uso de efectos CSS en los botones
1. Mejoran la experiencia del usuario
Los efectos CSS, como cambios de color, transiciones suaves o sombreados, proporcionan retroalimentación visual inmediata al usuario. Esto ayuda a que comprendan que el botón es interactivo y está listo para ser pulsado.
2. Aumentan la accesibilidad
El diseño accesible es crucial en el desarrollo web. Los efectos CSS pueden resaltar los botones al pasar el cursor o al enfocarlos mediante el teclado, facilitando su uso a personas con discapacidades visuales o dificultades motoras.
3. Refuerzan la identidad visual
Cada sitio web tiene una identidad visual única, y los botones personalizados con efectos CSS ayudan a reforzarla. Pueden utilizar colores, degradados, animaciones o sombras que se alineen con la estética general del diseño.
4. Atraen la atención del usuario
Un botón con un diseño atractivo y efectos llamativos puede dirigir la atención del usuario hacia acciones importantes, como suscribirse a un boletín, realizar una compra o completar un formulario.
5. Mejoran el rendimiento sin afectar la velocidad
A diferencia de las imágenes o scripts pesados, los efectos CSS son ligeros y optimizan la carga del sitio web. Esto es fundamental para mantener un buen rendimiento y evitar tiempos de carga excesivos.
Tipos de efectos CSS recomendados para botones
– Hover Effects (Efectos al pasar el cursor)
- Cambio de color de fondo.
- Transiciones suaves.
- Sombra al pasar el cursor.
– Efectos de presión (Active State)
- Reducción del tamaño.
- Cambio de color momentáneo.
– Animaciones sutiles
- Botones con efecto «rebote» al hacer clic.
- Resplandor progresivo.
– Efectos de borde y degradado
- Bordes animados con transiciones.
- Gradientes de colores en botones modernos.
No solo embellecen la interfaz, sino que también contribuyen a mejorar la usabilidad y la experiencia del usuario. Implementar efectos bien diseñados permite guiar la atención del usuario de manera efectiva, mejorar la accesibilidad y mantener un diseño web atractivo y funcional.
Aplicar estos efectos de manera equilibrada y sin sobrecargar el diseño es clave para garantizar un sitio web moderno, dinámico y eficiente. Para ello, os dejo este enlace en el que podréis consultar una colección de efectos con CSS3 para aplicar a enlaces, botones, logotipos, SVG, imágenes…
por Omar Benyakhlef | CSS, HTML, HTML5
Animación en HTML5
Conocía la potencia del HTML5 para desarrollar movimiento en diseño web, pero no era consciente de la «salvaje» cantidad de posibilidades que nos ofrece. Unas posibilidades que serían seguramente más, si no fuese por la absurda incompetencia de navegadores como Explorer e incluso Firefox.
En esta impresionante web de la que hablamos hoy, además de mostrarnos cómo realizar animaciones con HTML5, podremos ver una serie de ejemplos web que seguro que os sorprenden.
Los ejemplos que vais a ver están desarrollados con CSS3, SVG, Canvas y WebGL
(más…)
