un trabajo asombroso en CodePen III -

PorChris Coyier en

¡Ya estoy de vuelta! David me pidió que volviera a recopilar algunas de mis cosas favoritas en CodePen, algo que a ambos me encanta hacer, y me estremecí ante la idea de tener que elegir tan pocas favoritas. Megustan un montón de cosas en CodePen. Es una especie de hobby mío. Aquí les dejo algunas cosas que atraen a mis gustos particulares

Transformicón de hamburguesa modelo 3d

No faltanhamburguesas en CodePen, peroesta de Bennett Feely (una transformación de unDribble Shot de vlbrsk) es excepcionalmente inteligente. ¡Bennet siempre está haciendo cosas realmente inteligentes!

Me recuerda a ese estilo de animación deBees Bombs que es un poco inesperado y tremendamente satisfactorio.

Navegación de progreso

Soy un fanático de los pequeños toques de la interfaz de usuario y las animaciones que son casi tan discretas que puedes imaginar que alguien apenas se da cuenta, pero como desarrollador front-end, definitivamente parpadeas dos veces. Eso es lo que hace el experimento de la línea de navegación deHakim El Hattab :

Efectos de texto

Es casi demasiado difícil elegir un favorito delos efectos de texto de Mandy Michael . Definitivamente está superando los límites de lo posible al diseñar texto web directo. Aquí hay uno increíble:

Mecanografíe regalos de Navidad

Es completamente extraño que caigan regalos del cielo para formar las palabras que escribes en un teclado, como ocurre en este Pen de Steve Gardner. Bizarro de la mejor manera posible.

dinosaurio patinador

Hablando de cosas extrañas, ¿qué tal un T-Rex patinando felizmente por la ciudad con un dirigible a modo de globo? Liza Kobrazova lo sabe todo:

¡Muchos yo!

Chris Gannon es uno de los animadores más prolíficos de CodePen. Aquí se ha vuelto autobiográfico:

Concepto de aplicación de noticias con variables CSS

David Khourshid ha estado experimentando mucho con la idea de las interacciones del usuario y las variables CSS. Por ejemplo, ¿qué pasaría si los datos del evento al tocar o deslizar el dedo pudieran pasarse a CSS para controlar la vista? Ese tipo de esto se explora aquí:

Cabeza móvil

Me encanta esta animación interactiva de Marjo Sobrecaray. Es bastante subestimado. El rostro de la niña tiene nueve estados posibles que anima hacia y desde, pero los detalles son perfectos. Hasta la animación auxiliar con la que comienza para enseñarle cómo interactuar con ella.

Diseño de cuadrícula CSS: nueva terminología

Usar el diseño web para enseñar diseño web es uno de mis pequeños nichos favoritos. Stacy Kvernmo lo hace perfectamente aquí, usando celdas de un diseño de cuadrícula para enseñar las palabras que necesita saber sobre el diseño de cuadrícula.

Mundo mínimo

David DeSandro usa mucho CodePen para demostrar cosas para sus proyectosMetafizzy , comoPackery . También da vida a pequeñas ideas increíbles, como sujuego Cub n Pup y estegenerador de mapas que me recuerda muchísimo el aspecto de arriba hacia abajo de los viejos juegos de NES como Ultima.

Ondulación de la piscina

Hablando de animaciones discretas, Sarah Drasner animó esta pequeña y linda piscina en la que la superficie del agua se balancea suavemente, pero aún más fría, el flotador golpea la pared y genera una onda en la superficie del agua, cortesía de algunos elegantes filtros SVG.

Acerca de Chris Coyier

Diseñador enCodePen . Escritor enCSS-Tricks. Podcaster enShopTalk

css-tricks.com chriscoyier Publicaciones