CodePen ha publicado su resumen de la comunidad con dos Pens centrados en la función shape() de CSS, firmados por Matthew Morete y Temani Afif, además de una animación de fantasmas en colores neón de Curtis Lawrence y una exploración de la función random() de Brecht De Ruyte.
Las funciones nuevas de CSS, en primer plano
La función random() de CSS ya está disponible en Safari y llegará muy pronto a Chrome. Brecht De Ruyte escribió sobre ella para Smashing Magazine, en un artículo titulado «Embracing Playful Imperfection With The CSS random() Function», e incluyó una colección de Pens que explora tipografía orgánica, letras que rebotan, cartas abiertas en abanico y un fanzine punk.
Temani Afif amplía sus sliders de rango ondulados con un nuevo conjunto que combina border-shape, shape(), Scroll-Driven Animations y @property. El resultado son controles con pistas y tiradores de formas muy distintas.
Matthew Morete usa shape() para crear números segmentados en un reloj animado de un solo elemento, con un poco de JavaScript para llevar la hora. El archivo CSS permite ver cómo se construyen los dígitos.
Chris Bolson recorre el sistema solar con :scroll-marker y las nuevas funciones attr(), en un ejemplo que por ahora solo funciona en Chromium. Maseone, por su parte, combina @property, las funciones trigonométricas sin() y cos() y attr() para una esfera de texto en formato marquesina, con casillas de control para personalizarla.
Animación, juego y efectos
Curtis Lawrence presenta un Pen de fantasmas animados con colores neón, pensado para Halloween. Masahito Leo Takeuchi recupera su capsule machine, una máquina de cápsulas muy valorada por la comunidad, que vuelve esta vez con ardillas: se gira la perilla para obtener el premio.
Sabo Sugi propone una escena en Three.js en la que un líquido brillante sigue el recorrido del cursor, con un panel de ajustes que ofrece una gran cantidad de controles. Mark Sottek firma «Skeleton Second Line: A Pure CSS Jazz Funeral», un desfile de esqueletos al estilo de Nueva Orleans hecho con CSS, que se acompaña del lema «Sound on, cher».
Reto de Halloween
La tercera semana del reto de Halloween de CodePen, dedicada a la calabaza, tiene ya su colección, con Pens de gymnase, didisoftwares, 3epge y grauconejo13. La cuarta y última semana del reto está en marcha.