Most recent post

How to proportionally scale images that have dimension attributes

Allowing images to scale along with their container is an important part of responsive web design (and was so even before the term “responsive web design” existed). It’s really quite easy – all you need to do is give the image a width (or max-width) in percent:

img {
    max-width:100%;
}

This will prevent any img element from getting wider than its container. If the container is narrower than the image, the image will scale down. But there is a catch.

Posted on June 13, 2013 in CSS

Slightly older posts

Firefox and the magical text-overflow:ellipsis z-index

If you start seeing mysterious dots rendered on top of positioned elements in Firefox, check your text-overflow and z-index properties.

Posted on May 31, 2013 in Browsers, CSS

Replacing images when printing

Sometimes you want to use different images when viewing a web page on screen and when printing it. One way of doing that is to use CSS generated content.

Posted on May 14, 2013 in CSS

Using a transparent image as an icon fallback

When you use an icon or other graphic instead of text for buttons, make sure there is real text for users who cannot see the image.

Posted on April 30, 2013 in Accessibility, Browsers, CSS

Conditional sibling class names for IE patching

A different approach to using conditional comments to add class names for targeting CSS at different versions of Internet Explorer.

Posted on April 11, 2013 in Browsers, CSS

Responsive drop shadows

A few examples of how you can create a non-rectangular drop shadow that will adapt to the width of the element it is applied to.

Posted on April 4, 2013 in CSS

Letting users disable responsive layout

If you need to give users the choice to disable responsive layout, here is one way of implementing a switch to toggle it off and on.

Posted on March 25, 2013 in CSS

How to shrinkwrap and center elements horizontally

When you need to center a floated element horizontally you can't say "float:center", but fortunately there are several other ways of solving the problem.

Posted on March 4, 2013 in CSS

More posts are in the archive