This week: Contextual Text Shadows, CSS Olympics, and Haml Burgers
Fully-configured apps deployed in seconds
Choose a popular app like Plesk, select your configuration options, and click deploy. It’s that easy. Start today with $100 in free credit.
Sparklingman grills up a whole batch of interesting combinations of hamburger ingredients with the absolute perfect tool for the job: Haml.
Once upon a time horses could make headlines just by counting, but now they gotta know how to code. Scott Kellum has the scoop in this Typetura powered magazine layout.
#CodePenChallenge: Fibonacci Sequence
We wrapped up the "Patterns" challenge with Pens inspired by the Fibonacci sequence. Check out the Pens from week four, including propjockey's golden ratio'd portfolio showcase "Fibonacci Carousel".
Metal Olympic Rings
Josetxu goes for the gold, and the silver, and the bronze in this glimmering display of CSS metallurgy skill.
"CSS illustration of Rock Lee, a shinobi of the Hidden Leaf Village in the anime series 'Naruto'. Illustration by Defaced on Dribbble". From Tanner Dolby.
CodePen Radio #326: Design Pattern Deep Dives
Chris and Stephen pick out a couple of components from our design pattern library and go into why they exist, what they do, what makes them complex, and the API choices.
Yin & yang cats
"Direction aware, CSS only, yin & yang implementation of cuddling cats. The logic will detect which of the cats the mouse entered and zoom in on it. No JS." From Mikael Ainalem.
Bramus demonstrates how you "can basically adjust any green/red/blue emoji by doing 120 degree jumps back or forwards."
Only CSS: Pointer Game
Yusuke Nakaya builds a fun, crossy road/frogger-style obstacle game "Called "いらいらぼう" in Japan".
Nav Hover Effect
Noah Raskin tries out an intriguing navigation hover effect that displays the menu item title in bold type with a light color further down the page.
Bigger font size, bigger text shadow
Adam Argyle demonstrates how to use em units in a text-shadow to create font-size contextual text shadows.Sponsored:
From subscriptions to gym classes to luxury cars, WooCommerce is fully customizable. Add features and extend the functionality of your store with official extensions from the WooCommerce Marketplace.
Bence Szabo continues a series of #PetitePatterns with a 474 byte tiger skin pattern. "Add the seed attribute and set it to a random integer in `feTurbulence` to create your own variant!"