April 15th: Astronomy, Ampersands, and Accordions
Sponsored:
Get A Free .design Domain Name Today!
.design reflects what you do as a designer. Your name comes with free email hosting, SSL Security, & a Site Builder.
Awesome Accordion Menu
A stylish menu with truly accordion-like details from Ahmad Emran. Check out those nice pleats on the dropdown items!
#CodePenChallenge: FizzBuzz
For week two of the April 2019 Algorithms challenge, the CodePen community solved FizzBuzz. Check out our collection of Pens from the challenge, including Ryan Mulligan's "GridBuzz".
Styled Ampersand with SVG in Text
Christopher Kirk-Nielsen shares a little SVG & pseudo-element trickery to use a different font on your ampersands.
Pure JS FLIP Transition with The Keyframers
You're gonna flip when you see how The Keyframers collaborate to put together a pure JS FLIP transition in this recording of their Twitch.tv livestream.
Sponsored:
WooCommerce
WooCommerce is a flexible and powerful eCommerce open-source plugin for WordPress. There are 450+ plugins for it, enabling things like booking appointments, memberships, subscriptions, and tons more. We use WooCommerce at CodePen to sell t-shirts and hats, managing our inventory and handling fulfillment with a ShipStation plugin.
Code-it Notes: Create Your Own!
Dan Harding shares a template and examples of the post-it note style summaries of JavaScript methods he created to help himself learn JS in this blog post on Dev.To.
Animated Info Card
There are lots of rad details in this navigable info card, made with CSS and a dash of Splitting.js by Adam Kuhn.
100 Years of Bauhaus
Juan Ignacio Rios uses CSS Grid and a vanilla JS triangle generator to create this stunning reproduction of Bauhaus-style illustration from The CEO Magazine.
CSS Grid: Style Guide
"What could go wrong if I were to do a style guide with 5 color palettes without any planning?" A lot, you might think! But somehow it all works together in this style guide from Olivia Ng.
CSS Pure | Fast Lane
kotAndy translates a Dribbble animation by James Curran into CSS in this endearingly anxiety-inducing Pen.
Recaman Ellipses
"In rule-based art, the draw is the direct result of logic-based systems to implemented to direct the design and creation of the object. The artist forces the draw to conform to specific arbitrary rules, which represent the artwork itself. This #p5js script creates changing texture using only ellipses based on the Recaman series" from Filippo Guida.
Floating Heart
Hearts drift through a spiraling tunnel in this mesmerizing css-doodle Pen from yuanchuan.