Impresionantes efectos CSS para tus Input

Impresionantes efectos CSS para tus Input

¿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

 

Share and Enjoy !

0Shares
0 0 0
30 Animaciones Preload con CSS espectaculares y GRATIS !!!

30 Animaciones Preload con CSS espectaculares y GRATIS !!!

En numerosas ocasiones, nuestros diseños requieren más tiempo de carga, bien por tener que usar grandes imágenes o por funcionalidades  requeridas por el proyecto.

Nada más incómodo para un usuario que presentarse delante de su pantalla y esperar ante una página vacía, esperando que cargue el contenido. Esta espera repercute notablemente en la usabilidad, el usuario no sabe si está esperando a que cargue el contenido que quiere ver, o si simplemente la página no funciona. Esto es algo que todos conocemos, lo recomendado es hacer un preload de la página para que luego todo el contenido fluya sin problema.

He llegado a ver incluso preloads que necesitaban un preload para visionarlo, lo cual es totalmente absurdo. Hoy os dejo varios preloads realizados con CSS, el peso es ínfimo y las animaciones son verdaderamente espectaculares y sobre todo fluidas, muy fluidas y con un loop infinito sin ningún corte.

 

See the Pen Preload CSS by Omar Benyakhlef Domnguez (@gloobs) on CodePen.light

DESCARGAR PRELOADS

Share and Enjoy !

0Shares
0 0 0
¿Cómo hacer un sprite con CSS?. Animaciones para web, apps, juegos…

¿Cómo hacer un sprite con CSS?. Animaciones para web, apps, juegos…

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 400x400 px y la he dividido en 4 columnas y 4 filas de 100x100 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.dark

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 !!!

Share and Enjoy !

0Shares
0 0 0

Manual de CSS3 GRATIS !!!

Sabido es que hoy en día en diseño web todo avanza muy deprisa, hay que estar siempre formándose y afortunadamente existen numerosos sitios a los que recurrir.

Hoy os dejo un manual de CSS3 en PDF. Se trata de una adaptación de Antonio Navajas @ajnavajas sobre el curso de Cristalab.

(más…)

Share and Enjoy !

0Shares
0 0 0

Manipular Viewport con CSS

Viewport

Cuanto accedemos desde un smartphone o tablet a un sitio web, normalmente el navegador comprueba la resolución del terminal y escalan el contenido para adaptarlo a su pantalla.

Esta práctica ocasiona verdaderos quebraderos de cabeza en el diseño web para smartphones.

El viewport es un atributo del tag <meta> que  se incluye dentro del <head> de un documento HTML. Su aspecto es el siguiente:

(más…)

Share and Enjoy !

0Shares
0 0 0

Curvar texto con CSS3 y jQuery

Curvar texto con CSS3 y jQuery

En este blog de diseño web, ya hemos visto algún ejemplo de cómo manipular la posición de las fuentes en HTML.

En un post anterior, vimos cómo curvar texto con un CSS y HTML5, también vimos como rotar un texto y por ejemplo, escribir con HTML en vertical.

Aunque CSS3 nos permite rotar las letras, es bastante complicado de organizar cada letra a lo largo de una trayectoria curva. Arctext.js es un plugin de jQuery que te permite hacer exactamente eso.

Basado en Lettering.js, calcula la rotación a la derecha de cada letra y distribuye las letras a través de un arco imaginario según el radio que le indiquemos.

Aquí os dejo código, ejemplos y demás de http://tympanus.net/

 

Share and Enjoy !

0Shares
0 0 0