Useful tip for creating double borders with CSS3

Posted in CSS3 CSS on 18 August 2010 | Comments

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 ...

CSS3 gradients are the next big thing

Posted in CSS3 CSS on 11 August 2010 | Comments [1]

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.

Read more ...

Making circles with CSS3 border-radius

Posted in CSS3 CSS on 24 May 2010 | Comments [6]

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.

Read more ...

How to create drop caps with CSS (and CSS3)

Posted in CSS Typography on 2 February 2010 | Comments [1]

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.

Read more ...

Website case studies are a great way to learn

Posted in Web design CSS on 27 January 2010 | Comments

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. However, sometimes it is difficult to know what went on during the design process of any website you look at. That’s why I particularly like blog posts, articles, and other case studies, where a website design is explained. Normally, this will deconstruct the website in question and I find these really useful. Here are a few case study ‘design stories’ that I have been reading recently:

• Simon Collison recently redesigned his personal website and in this blog post called Redesigning the Undesigned he explains the design process, including the eventual idea to base the design on a miscellany/journal approach, why he chose Times New Roman (brave choice?) as the main font, and the use of black and white animal illustrations. I must say that I love the design of this website and it’s great to see it explained.
• CoffeePowered is Paul Stanton’s personal website and he describes the redesign process in this post. I like the description of the font choices, the colour palette, the use of Modernizr, and the description of the sketching and design approach that was used.
• In the new second edition of CSS Mastery (» Amazon USA · Amazon UK) by Andy Budd, there are two case studies by Cameron Moll and Simon Collison (him again) that are well worth reading. For example, these studies (Roma and Climb The Mountains, linked from the CSS Mastery website) include explanations of new CSS methods, the grid structure, style sheet organisation, and the typographic choices.
• Jeremy Keith explains the design and build of Workshops for the Web including why he ditched the initial design idea and the use of HTML5 and microformats.

All these chaps are talented designers and more than likely they will also do things differently to you. It makes sense to try and learn from them….