Tonight I spent an evening toying around with my vintage Apple II Plus. It brought back a lot of memories for me and I wanted to share a few photos for a bit of old-school fun.
Radial gradients are very useful in creating attractive web designs and all modern browsers have at least basic support for them now. However, I've always felt a little daunted by their complicated syntax. Mostly I can never remember how the heck to write one when I need to and checking online documentation can be scary simply because radial gradients in CSS happen to be pretty flexible. Case in point, the full mozilla syntax definition found on the MDN page for
radial-gradient()reads as follows:
Here's a pretty spiffy layout trick I learned this week. Let's say you find yourself with a two-column layout where you've floated both columns to get them to appear side-by-side. Maybe you've used
display: inline-block, but either way you have two columns. This looks great when the viewport is large but once it starts getting a little smaller perhaps you'd like to stack the columns on top of one another. Typically the way you would approach this is to de-float the columns (or switch to
display: block) in a media query that only takes effect once the viewport width drops below a certain threshold. The columns now each take up 100% of the width of their container and stack on top of one another naturally.