Posts in the "CSS" category

Transparent borders with CSS3

Posted in on 3 May 2011 | Comments [10]

I’ve seen a few website examples recently (like this one) where transparent borders have been used so that the background image shows through the border. I think this is a really nice effect and it got me wondering how it’s done and if I could use this on my planned redesign of CVW Web Design. Turns out it’s relatively simple but there’s one ‘trick’ you will need to get it to work.

Read more ...

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

Web design books for Christmas reading

Posted in on 3 December 2010 | Comments

At this time of year, I normally pick out some web design books that I want to read over the Christmas holidays. I’m spoilt for choice this year because three fantastic CSS books have been published recently – or are about to be published. I’ve ordered two of these myself and I’m on the mailing list for the third one! In no particular order, here they are:

  • Hardboiled Web Design by Andy Clarke describes the latest CSS3 and HTML5 methods and it’s a book that I’m looking forward to seeing because the production values and content promise to be the very best. The book is published by the independent UK-based publisher Five Simple Steps which means that the paperback certainly ain’t cheap. However, I think it will be worth it! There’s also a PDF version as well if that’s what you prefer.
  • CSS3 For Web Designers by Dan Cederholm covers CSS3 methods from advanced selectors to generated content to web fonts, gradients, shadows, and rounded corners to animations. I hope this book will give me a push to use some different methods in my own work.
  • Stunning CSS3: A Project-based Guide to the Latest in CSS by Zoe Mickley Gillenwater covers a similar subject but works through a series of practical examples. This is a great way of learning! I really enjoyed the author’s previous book, Flexible Web Design so Stunning CSS3 should be a great follow-up.

After reading these, I really will be up to speed with the latest CSS and web design methods!

CSS tables revisited

Posted in on 29 October 2010 | Comments [3]

A couple of years ago, Sitepoint published a book called Everything You Know About CSS is Wrong (reviewed here). The main theme of the book was the use of CSS properties and values like display: table and display: table-cell (see also CSS display property). If you have not come across these before, they allow you to assign table-like behavior to <div> or other elements, such as <p>. In the book, this method is called CSS tables and it seems to be an easy way of achieving grid layouts. Should we be using this method more? Here’s how it works.

Read more ...

Useful tip for creating double borders with CSS3

Posted in on 18 August 2010 | Comments [3]

I have posted about double borders with CSS before but there was a useful tip by Andy Hume (@andyhume) at a recent London Web Standards meeting where he described the use of CSS3 box-shadow (previously on this blog, Box Shadow and Image Hover Effects) to give the effect of double borders on an element. With box-shadow, if you use zero for the horizontal offset and blur radius values and a small pixel value for vertical offset, this will give you another ‘border’ on any element. If the element already has a border, this means that you can create double borders with different colors. Here’s how it works.

Read more ...