June 22nd: Apps, Ants, and Animation
CommitSweeper - Pure CSS Game
"A Github graph inspired Minesweeper-type game. Click if you dare - or, just hover and "paint" the graph of your dreams." From Stephanie Eckles.Sponsored:
Webinar- Test Automation Best Practices
Join Harness + Outbrain as they discuss Test Automation Best Practices in 2020
Ömercan Balandı crafts a mysterious corridor with ASCII characters. Hover over the light at the end of the tunnel to shift its position.
Folding Panorama Animation
Bennett Feely uses Pug and SCSS to fold a panoramic photo of the city of Pittsburgh like a map.
Moving Sculptures: It's Gonna Be OK
Anna the Scavenger shares a bit of sculpted neon reassurance. "Move your mouse over to experience magic. 3d sculptures + animated SVG letters + 4-points gradient shader".Sponsored:
Get great visual feedback & bug reports, even from non-technical folk
Visual website feedback from BugHerd means you spend less time pinpointing bugs & issues on a page. Clients & users simply click an element to provide feedback with auto screenshots & metadata pinned to the task. It’s like sticky-notes on a website.
We were all sliding around on week three of the June GreenSock challenge! Check out the Pens from the sliding prompt, including Oscar Salazar's appropriately slouchy "Monday".
CodePen Radio #273: Assets Keep Getting Better
Asset Hosting just keeps getting better! Marie and Stephen talk about even more new features added to PRO asset hosting including new CORS-proof asset URLs, image optimization, scaling or saving as a new image, and how CodePen decides to build features like this out.
Apps Have Feelings Too
"Hit 'Delete Apps' and hover over the apps to get a reaction. Deleting an app does something too" in Olivia Ng's surprisingly heartbreaking app delete animation.
Here's a bit of socially-distanced fun! Bruce Brotherton crafted this Pen to "have a simple way to play BattleShips over the phone when someone else has a physical board".
CSS Marching Leafcutter Ants
"Three wee leafcutter ants taking their haul home, styled and animated with CSS" by Suzanne Aitchison.
Book Store UI
A bright and friendly bookstore UI based on a Dribbble shot by Dwinawan, translated to HTML & CSS by Aysenur Turk.
"An easy way to observe how hex codes work. Play with the color selector to see how hex code values change to represent the current color" from Rob DiMarzo.
Image Slider with Multiple Controls
Akimzzy shares a slick image slider with lots of control options, including mobile swipe.