Posts in the CSS category

• CSS tables revisited

  29 October 2010 by Clive Walker

  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.

  3 Comments

• Useful tip for creating double borders with CSS3

  18 August 2010 by Clive Walker

  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.

  4 Comments

• CSS3 gradients are the next big thing

  11 August 2010 by Clive Walker

  Truth be told, I don’t really know if CSS3 gradients are the next big thing or not but, with increasing support in modern browsers, they are being used more and more. Like many other CSS3 properties, gradients allow us to create image-like properties with a few lines of code, thus saving on image requests, and make it easy to change backgrounds quickly and easily without using Photoshop or Fireworks.

  1 Comments

• Making circles with CSS3 border-radius

  24 May 2010 by Clive Walker

  I was browsing a few websites the other day when I came across Stunning CSS3 which promotes a forthcoming book by Zoe Mickley Gillenwater. There are lots of CSS3 properties used on the site but one that caught my eye was the circular ‘Fall 2010’ item near the top of the page. Here, the border-radius property is used to create the circular shape. I have only used border-radius with small radii values before now but larger values allow you to make a circle.

  14 Comments

• How to create drop caps with CSS (and CSS3)

  02 February 2010 by Clive Walker

  Drop caps are a nice typographic detail that look great on many websites; I’ve used these myself on several examples including Just Holiday Nannies (main page headings) and Occupational Synergy (leading paragraphs). There are a few ways of achieving this effect but the CSS selector I like to use is the :first-letter pseudo-element. This selector is reasonably well supported across most modern browsers (albeit with a few minor bugs here and there). Here’s how it works.

  2 Comments

• Website case studies are a great way to learn

  27 January 2010 by Clive Walker

  I like to browse a lot of websites with the aim of learning from how others do things. I figure that this is part of my job as a freelance web designer/developer.

• Using JavaScript for enhancing CSS support in Internet Explorer

  18 January 2010 by Clive Walker

  One of the subjects that I have been keeping an eye on recently is the use of JavaScript to enhance support for more advanced CSS methods in Internet Explorer (IE). We all know that, despite some big improvements, Internet Explorer 8 does not support some of the newer CSS properties used by Firefox and Safari, which tend to lead the way in this respect.

  5 Comments

• CSS links for light reading

  08 January 2010 by Clive Walker

  A few goodies from my CSS reading list. Some CSS links from around the web

  1 Comments

• Advanced CSS we CAN use today

  20 December 2009 by Clive Walker

  There have been several articles recently that describe advanced CSS methods, usually part of the CSS3 specification (CSS3 Info), and how these push the boundaries of what we can do with CSS. There are some great examples.

  1 Comments

• Plans for this blog in 2010?

  14 December 2009 by Clive Walker

  I have been thinking about what I might do with this blog next year because I want to do something that would be (for me) a bit different. I have been wanting to redesign for a while and here's an idea that I am considering.