Etiqueta ~ CSS3

Botón circular con indicador de progreso (SVG, CSS3 y JavaScript)

Pablo

La verdad, hace tiempo que no disfruto tanto de un tutorial como el que realizó la gente de Tympanus para demostrar de forma practica la potencia de emplear gráficos vectoriales para realizar animaciones. Y no tuvieron mejor idea que cambiar el comportamiento de un botón del tipo submit empleando como base de diseño la contribución […]

Continuar leyendo [+]

CSShake: Añadir animaciones vibrantes con CSS

Pablo

CSShake es un nuevo recurso para los amantes de las animaciones logradas con CSS3, se trata de una pequeña hoja de estilo para aplicar efectos a los distintos elementos de una manera sencilla y rápida. Esta hoja de estilo contiene aproximadamente unos 10 efectos vibratorios distintos, cada uno de ellos con un tipo de movimiento […]

Continuar leyendo [+]

Barra de progreso solo con CSS3

Pablo

Si estas buscando una barra de progreso sencilla, simple y que se pueda implementar en unos pocos minutos progre(c)ss es una buena alternativa. progre(c)ss es una barra de progreso estilo Youtube creada utilizando solamente CSS. No necesita ni JavaScript ni ninguna otra tecnología para funcionar. La barra de progreso que creamos tiene una estructura básica, […]

Continuar leyendo [+]

Animaciones CSS al hacer scroll

Pablo

Jack in The box es un recurso bastante nuevo e interesante para controlar la forma en que reproducimos las animaciones realizadas con CSS según la posición de la barra de desplazamiento del navegador. Animar elementos a medida que el usuario utiliza el scroll es algo que se puso muy de moda estos últimos dos años, […]

Continuar leyendo [+]

Unison.js: JavaScript para diseños adaptables

Pablo

Unison.js es una interesante propuesta escrita en JavaScript para la realización de diseños adaptables (responsive design) especialmente pensada para situaciones donde los CSS Media Queries no alcanzan. La idea detrás de este proyecto es la de tener un mayor control sobre el tamaño de la pantalla, detectando y manipulando los distintos elementos utilizando para ello […]

Continuar leyendo [+]

Hover.css: Efectos hover con CSS3

Pablo

Hover.css es una bonita hoja de estilos que contiene un excelente numero de efectos y animaciones realizadas utilizando solamente CSS3. La idea de este proyecto es simple, utilizar solo hojas de estilo para animar elementos de una manera sencilla, sin la necesidad de complicar nuestro proyecto con complejas bibliotecas, simplemente copiando un estilo podemos mejorar […]

Continuar leyendo [+]

Set de animaciones: Indicadores de Carga (loading) con CSS3

Pablo

SpinKit es un estupendo set de indicadores de carga (loading) realizados aprovechando la potencia de CSS3, sin utilizar un solo archivo de imagen. El set esta compuesto por un total de ocho animaciones distintas, de una calidad extraordinaria que dista mucho de las utilizadas convencionalmente, por lo que emplearlas puede darle un toque de distinción […]

Continuar leyendo [+]

Iconos sociales con CSS3 (sin utilizar los widgets oficiales)

Pablo

Desde hace tiempo me parece fundamental que un sitio tenga los botones para compartir en los distintos soportes sociales del mercado, es una forma sencilla y rápida de promocionar nuestros sitios sin la necesidad de recurrir al posicionamiento web. Sin embargo siempre vi una gran contra relacionada al uso de los widgets de las distintas […]

Continuar leyendo [+]

Modernos diálogos con CSS

Pablo

Utilizar hoy en día un cuadro de dialogo que no guarde una relación con el diseño de nuestro sitio se podría considerar un pecado, principalmente considerando la cantidad de opciones disponibles para personalizar el aspecto de estos cuadros. Vex, es una excelente alternativa para la personalización de los cuadros de dialogo, este proyecto utiliza CSS3 […]

Continuar leyendo [+]

Flechas animadas elaboradas con CSS3

Tamara

Las flechas son uno de los símbolos que más se utilizan en diseño web, sobre todo porque tienen múltiples propósitos que invitan a la acción del usuario de forma automática. Seguir leyendo, más información, pasos siguientes o anteriores, etcétera. Con la implementación de las aplicaciones móviles, también se pueden utilizar para generar cambios en la […]

Continuar leyendo [+]