Design
-
clamp() for Responsive Design
CSS
clamp()provides a method for setting numerical values with a minimum, maximum, and a calculated value between the two. The syntax iscalc([min], [calculated], [max])and it’s useful for times when you want to scale some value based on the size of the screen by using thevwlength unit. -
Flowing Text Around Images
Magazines, books, and other print layouts sometimes use images that overlap with the text, and have that text wrap around the shape of the image. It can make for an interesting effect, bringing a feeling of motion into a static medium. Done right, the text and image become conceptually closer in...
-
A Site Reborn
I’ve moved my Jekyll site into a Rails app, and I’ve done just enough work to have every post render without errors and added just enough style to make things readable. Some of the site still looks pretty bad, and none of it looks good yet. But that’s ok, because my plan is to rebuild and...
-
Overlay Text on Responsive Images
When putting text over an image, readability can be a concern. By combining the responsive HTML5
<picture>container with some best practices for image overlays, we can achieve a good result.