CSS gradients: basic to advanced

“All that’s bright must fade, the brightest still the fleetest; All that’s sweet was made but to be lost when sweetest.” ― Thomas Moore

It used to be when you wanted a nice simple gradient background for your page, the process looked like this: Step 1) fire up Photoshop; Step 2) use the Gradient tool to fill the canvas with a horizontal or vertical gradient; Step 3) crop canvas into a as-small-as-possible slice (often 1px high or 1px wide); Step 4) export .gif or .jpg graphic; and so on. I’m leaving off the rest of the steps, because you either remember how to do it from past experience, or you’ll never need to know how to make a gradient that way thanks to the awesomeness of CSS gradients. Let’s take a look at what they can do! Continue reading “CSS gradients: basic to advanced”

Geolocation Part II: Building Interactive Maps with Leaflet

“A map does not just chart, it unlocks and formulates meaning; it forms bridges between here and there, between disparate ideas that we did not know were previously connected.”
― Reif Larsen

A couple of weeks ago I wrote about using the Geolocation API, and walked through the minimal code necessary to get the user’s longitude and latitude. Now I want to take it just a step further, and show how to use Leaflet to show the users current location on a map. Continue reading “Geolocation Part II: Building Interactive Maps with Leaflet”

A design pattern for making interesting CSS animations in under 10 minutes

“the way is long if one follows precepts, but short and helpful, if one follows patterns” ― Lucius Annaeus Seneca

I’ve had a lot of fun making a certain style of CSS animation demos on CodePen lately, all of which seem to follow a similar design pattern. Below are a couple of examples (embedded here as .gifs, but click through to see the live HTML/CSS versions): Continue reading “A design pattern for making interesting CSS animations in under 10 minutes”