Oct 23rd A small journey into the history of CSS.

When you think of HTML and CSS, you probably imagine them as a package deal. But for years after Tim Berners-Lee first created the World Wide Web in 1989, there was no such thing as CSS. The original plan for the web offered no way to style a website at all.   There's a now-infamous post buried in the archives of the WWW mailing list. It was ... Read More »

Oct 20th So what exactly is CSS Box Shadow vs. Drop Shadow

Drop shadows. Web designers have loved them for a long time to the extent that we used to fake them with PNG images before CSS Level 3 formally introduced them to the spec as the box-shadow property. I still reach for drop shadows often in my work because they add a nice texture in some contexts, like working with largely flat designs. Not too ... Read More »

Oct 9th Creating CSS elements: Play/Pause button

Globally, the media control icons are some of the most universally understood visual language in any kind of interface. A designer can simply assume that every user not only knows ▶️ = play, but that users will seek out the icon in order to watch any video or animation. Reportedly introduced in the 1960s by Swedish engineer Philip ... Read More »

Oct 4th Let's talk about "text-justify"

The text-justify property in CSS is a companion to the text-align property that is used to set the justification method of text when text-align is set to the justify value. p { text-align: justify; text-justify: inter-word; }     #Values inter-word: Specifies that text is justified by adjusting the spacing between words, ... Read More »

Oct 3rd Let's talk about "text-align"

The text-align property in CSS is used for aligning the inner content of a block element. p { text-align: center; } These are the traditional values for text-align: left - The default value. Content aligns along the left side. right - Content aligns along the right side. center - Content centers between the left and right edges. ... Read More »

Oct 2nd Help your visitors load less data from your website

Today we're gonna talk about how you can help your visitors take advantage of the save-data feature.   #Change your image delivery strategy I don't know if you've noticed, but images are often the largest chunk of the total payload of any given page. So perhaps the most impactful step you can take with Save-Data is to change how images are ... Read More »

Oct 1st A guide to color on the web!

There are a lot of ways to work with color on the web. It’s helpful to understand the mechanics behind what you’re using, and color is no exception. Let's delve into some of the technical details of color on the web.   #Color mixing A huge part of working with color is understanding that the way that you used color as a child doesn’t ... Read More »

Sep 30th How to implement separate form submit buttons that go to different links

Say you have a form like this: <form action="/submit"> <!-- inputs and stuff --> <input type="submit" value="Submit"> </form> When you submit that form, it's going to go to the URL `/submit`. Say you need another submit button that submits to a different URL. It doesn't matter why. There is always a ... Read More »

Sep 29th 5 great design resources websites

Sometimes when you're designing something, you need little helping hands. Perhaps a nice stock photo. Perhaps a happy little color palette. Perhaps a bleep or bloop sound. Perhaps the perfect icon. There are tons and tons of sites that do those things. There are fewer sites that curate these design resource sites into manageable, high-quality ... Read More »

Sep 26th Adding high performance lazy loading to your website

There are a few different "traditional" ways of lazy loading of images. They all require JavaScript needing to figure out if an image is currently visible within the browser's viewport or not. Traditional approaches might be: Listening to scroll and resize events on the window Using a timer like setInterval Both of these have ... Read More »