The
Spark
All the can't-miss links.

Delivered straight to your email each week. Go Sign Up.

Add the feed to your favorite RSS reader and never miss a thing.

Sponsor a week and reach a large audience of designers and developers.

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.

Hambuuuuuuuurger

Sparklingman grills up a whole batch of interesting combinations of hamburger ingredients with the absolute perfect tool for the job: Haml.

Equestrian Magazine

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.

Rock Lee

"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.

Hue-Rotated Emoji

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.

WooCommerce

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.

Tiger Skin

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!"