Posts in the "Quick Tips" category

CSS Tip: Using max-width for flexible images

Posted in on 23 December 2010 | Comments [4]

When you are working with fluid or elastic website layouts or perhaps using CSS Media Queries, it’s essential that the designs cope with large images. For example, what happens when the layout is narrowed; does the image adjust in size or become cropped or, worse, does it ‘stick out’ of its containing element?

In these circumstances, one method is to scale the images down from their original size as the layout width changes. This is where the max-width property and, specifically, a value of 100% is useful:

.imgclass {
   max-width: 100%;
}

If you assign the max-width: 100% property/value to an image and remove the image width and height values from the (X)HTML, the result is that the image scales down nicely from its original size and its proportions are maintained. As the layout widens, the image scales up but it will not grow beyond its original size so the image does not become blurred at larger widths. You can see this effect on the middle screenshots, if you resize the browser window smaller, with this ecommerce templates page (there’s a minimum width on the layout so it won’t scale all the way down).

I think this is a really useful and quick solution for images in flexible website layouts.

PS: This solution scales the image down but if you want image scaling beyond the original image size, there are other options; see Richard Rutter’s article below.

More Info: Richard Rutter’s original experiments with max-width and image sizing · Ethan Marcotte explores Fluid Images

Box-shadow for Internet Explorer

Posted in on 6 November 2010 | Comments

Box-shadow is a great CSS3 property that allows you to add a subtle (or not) shadow on an element. I wrote a post called CSS3 box-shadow and image hover effects and since then I’ve been using box-shadow more.

Perhaps the main disadvantage of using box-shadow is that it’s not supported by Internet Explorer 8 and below. If you are happy to give your users something that looks different in IE8, that’s all well and good – but sometimes I just want to give IE users a closely similar design. In this case, that’s where this IE filter for box-shadow might be useful. This gives an approximation of box shadow for IE users. It might not be the closest approximation in all cases but I’ve found it useful in a website redesign recently.

Additionally, there’s this method for box-shadow with IE and this might be better for you. Either method is worth exploring if you want to give IE8 users a box-shadow experience.

CSS Tip: Placing text on top of an image

Posted in on 12 August 2009 | Comments [2]

The other day, I needed to add a strap line or caption on top of an image. Yes, I can do this in an image editor like Photoshop or Fireworks but I wanted to compare an alternative method using CSS. The CSS method also has the advantage that the text will be read by search engines. Anyway, here’s how I chose to to do it.

Read more ...

CSS Tip - use a separate stylesheet for testing

Posted in on 27 October 2006 | Comments

If you are using cascading style sheets (CSS) on a new website design, it's probable that you will be testing new style sheet rules. For example, you may be creating a series of rules for a portfolio page perhaps in order to test different layouts. Or, you may be creating a new navigation menu that you want to test on specific pages.

Read more ...