10 Increíbles demostraciones hechas en CSS y JS con Codepen


ejemplos creados con css y js con codepen editor CodePen.IO es una colección fantástica de proyectos hechos en HTML, CSS y JavaScript, mostrando el talento de desarrolladores que crean efectos que la mayoría de los desarrolladores front-end del mundo no podrían, tal vez, crear. Así que hoy compartimos una colección de demos o ejemplos disponibles en Codepen.IO los cuales fueron creados con su editor Codepen, un editor del cual ya estuvimos hablando en un post anterior.

CSS Webkit filters

Un ejemplo utilizando el filtro webkit de CSS en el retrato de la incomparable Mona Lisa.
See the Pen CSS(webkit) filters by Rıza Selçuk Saydam (@rss) on CodePen.

Draw Worm

Dibuje Worm es una animación muy llamativa basada en canvas que crea ramas. La animación sigue el puntero del ratón, creando más ramas con su trayectoria.

Navigation Knob

Se podría traducir como Perilla de Navegación, creado sólo con HTML y CSS, es una perilla circular que ilumina el valor seleccionado cuando se hace clic. El cambio de valor se destaca por el brillo opacidad y animación alrededor del círculo. ¡Qué tal! Una gran hazaña hecha sin JavaScript!

Trail

Trail es otra obra maestra basada en cavas el cual crea rayos de diferentes colores que siguen el ratón del usuario a un ritmo acelerado. El color que usted puede ver como líneas grises se quedan en un segundo plano, lo que representa rastros de vapor.

Nothing is Beyond You

Nothing is Beyond You es otra demostración sin utilizar JavaScript pero sí abusando de las animaciones y formas CSS para crear un efecto de burbujeo bajo el agua.

Single Element Google Chrome

Esta demostración de un elemento simple compone el logo de Google Chrome usando :before and :after, así como una serie de gradientes CSS. Pasa el ratón sobre el logo y éste se contraerá y girará.

Twisty

Esta es otra impresionante animación con CSS; esta demo utiliza 30 elementos DIV y sin embargo, sólo 4 declaraciones CSS reales. Lo que es más impresionante es que no es sólo un conjunto de elementos giratorios - los elementos toman diferentes formas.

Linjer

Linjer comienza como un juego palpitante de líneas de colores, hasta que haga clic en cualquiera de ellas Las animaciones se intensifican cerca de los clics y las palpitaciones se hace más notorias.

Canvas Fireworks

Canvas Fireworks es una demostración clara y sensible, dispara fuegos artificiales a la posición donde se hace clic. Incluso hay un panel de control que permite personalizar la velocidad, el color, y la precisión de los fuegos artificiales.

Sketch.js

Sketch.js es un efecto de burbujeo increíble que sigue el puntero del ratón, crea círculos de todos los tamaños y colores. Incluso lo mejor es que los círculos se encogen y se mueven en movimientos aleatorios a medida que se aleja el puntero.

Estas son sólo algunas fabulosas animaciones desarrolladas en Codepen uno de los mejores editores de código online utilizando JavaScript, CSS y el poder de canvas que impulsa a los navegadores web a presentar cosas excepcionales. Todo el crédito para los autores de estas excelentes animaciones.

Comentarios

Publicar un comentario

Patrocinados

Entradas populares de este blog

Tips y Trucos para Sublime Text

8 Plugins para Sublime Text 2 y 3

10 Plugin Wordpress para Sublime Text 2