Sizing Images Responsively

Published January 31, 2014 by CSS Newbies.

Images are sort of a special beast in the HTML animal kingdom. They’re technically inline elements, but they don’t really behave like them. For example, inline elements can’t have widths and heights applied. And yet, you and I both know that images have widths and heights.

This can cause trouble in responsive web designs. While inline elements automatically play nicely in RWD, resizing to fill their container, images do not. They’ll bust right out of that shiz and wreak all sorts of havoc, turning your nice narrow sidebar into something like this:

See the Pen Sizing Images Responsively 1 by Rob Glazebrook (@rglazebrook) on CodePen.

That is likely not what you intended. Happily, the fix is simple, safe, and effective. Read On…

12 Creative and Cool Uses for the CSS Border Property

Published December 23, 2008 by CSS Newbies.

random art using the CSS border property

If CSS properties attended high school, you would never expect to see the border property sitting at the cool kids’ table. Sure, it’s a useful property and all — as long as you’re looking accentuate the boxiness of a design, right?

Actually, you’d be surprised at just how cool the border property can be. Please take the following dozen exhibits as proof that the CSS border property is a lot cooler than we give it credit for. Read On…