This week: Crystals, Gems, and Waves
SVG Gradient Wave Generator
Through the DatGUI dropdown you can customize just about everything about these waves by Fabio Ottaviani, but even more fun, just click the randomize button and see what kind of wild visuals it produces.
Sponsored:
See what your users see with FullStory
FullStory gives you a first-person view of any bug, frustration, or success your visitors experience. Try it now for free!
Book Layout
This "responsive skeuomorph book layout, packed with fun little features." by Erin Sullivan is not just a good design, it's a great read, too!
Planets - WAAPI
"Planets sequenced animated with Web Animations Api, using CSS Variables." by Lisi Linhart.
Crystal Caves
Explore a dark cave full of crystalline wonders in Huw's interactive Pen.
Visual Reference: Transform Coordinate Systems
Part of a series of reference Pens by Dan Wilson, this Pen illustrates and explains translate, rotate, scale, and translateY values of "transform" in CSS.
Sass Maps, Loops, and CSS word scrambling!
Charlie Marcotte explains how he used Sass maps and loops to create a CSS word scramble in this detailed post.
Neon Text Effect
Have you been waiting for a sign? How about this one from Matt Smith, in bright CSS neon.
Responsive Morphing Apple Product
"Horizontally resize your window and watch the Apple product morph from one into another! Ordered from smallest (Apple Watch) to largest (Apple TV with actual TV included) to match window width" by Jon Kantner.
Victoria Ninni Bergquist on CodePen
"Front end developer with focus on design. A unicorn to some. Mother of two cats." Victoria's showcase includes her awesome #CSSDailyImages illustrations and fresh takes on FreeCodeCamp challenges.
Google Blocks Gemstone with Three.js
Check out the lighting on this rotating gemstone by 14islands, built in the style of Google's VR 3D modeling tool, Blocks.
Submenu Expand
"A playful animation expanding the submenu on the toolbar in web apps" by Mikael Ainalem.