June 24th: Reflections, Variations, and Illusions
CSS Grid: Card Variations
Olivia Ng shares variations on the same HTML card with CSS grid. And for a little more variety, click the color buttons to try out different color themes.Sponsored:
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.
#CodePenChallenge: Fruits and Veggies
For the third week of the Pens June 2019 Food Fight challenge, we played with fruits and veggies! Check out the Pens from the challenge, including Diogo Goncalves' "Veggielisa".
Bob Main invites you to "become the captain of the web and explore the galaxy with 'Warp Drive' at your command! Swap between night and day mode. Control your speed! Hit the breaks! View the 'light racers'... and so much more!"Sponsored:
Netlify makes web hosting eye-openingly easy. One way to do it is to just literally drag and drop a folder. Even better, connect a Git repo to a Netlify site and tell it what branch you want to watch, then any commits to that branch will automatically go live, even running your sites build as it does it.
Chuck Close'ish Self Portrait
Ricky Eckhardt emulates Chuck Close's iconic paint "pixel" style to produce a striking SCSS self-portrait.
CSS Masonry with Flexbox, :nth-child(), and Order
Tobias Ahlin demonstrates how to avoid the common pitfalls of a masonry-style layout with flexbox in this detailed tutorial with lots of helpful Pens.
Blob Sign Painter
Need a blob with a sign for your custom Slack emoji? Katy DeCorah's got you covered! Type a word on the sign and download your blob in handy .png format, ready to pop into your Slack.
Simple Star Rating
Mert Cukuren translates Zheng's "Rate us 5 stars" Dribbble shot to the front-end in this delightful five-star Pen.
CodePen Radio #226: New Export
Stephen talks with Marie about how we updated and improved our exporting function on CodePen and talks about a possible future Pro feature that could come from the changes we made.
GLSL: Cube Environment Reflections
Liam Egan shares another GLSL marvel! Open up the dat.gui controls and play with the sliders to change the object, its lighting, and its environment.
CSS John Wick (Keanu Reeves) Portrait
John Wick is in your browser — hope you're ready! This CSS portrait from Malaika Ishtiaq is staring into your soul.
Interactive 60% Keyboard
James Holmes shares a super-realistic CSS rendering of a mechanical keyboard. Click those keys!
Ball Color Optical Illusion
Did you see that ball color illusion going around Reddit and Twitter? They're all the same shade of brown! Team CodePen's Cassidy Williams recreated it with SCSS in this mind-boggling Pen.