Stampede Design
Handcrafted CSS by Dan Cederholm and Ethan Marcotte is one awesome book for the intermediate web developer. This book focuses on how to develop bulletproof web design (also another amazing title by Dan Cederholm) but doing it far better by using CSS3.
Handcrafted CSS
Dan wrote everything inside this book based on CSS3 though it can easily merge with CSS5 in the future. He also covers ways to enriching web design using uncommon CSS3 properties and most importantly, how to render high-degree of style-consistency on every browser including IE6. In other words, Handcrafted CSS provides several ways to write CSS towards the same end result. There are 7 chapters in total, all covering CSS3 markups commonly used during web development with accompanying images for better details.
Chapter 1 covers a variety of styling the list element, particularly the <ul> element. Really simple modifications like font size adjustment, longer menu, floating, hovering treatment and positioning can lead to better, more usable listing style. This chapter also includes notes on how to change links into table and vice-versa.
Chapter 2 is all about “Rounded Corners”, deservedly so. It explains the handy property of border-radius on WebKit family browser (e.g Firefox and Safari). This method solves the problem of using of four extra <div> through the use of only one flexible rounded-corner box. With border-radius property, we can easily style flexible rounded input box – a frequent nightmare for many web developers. For me, I’m juts happy this method won’t screw other element and doesn’t require anything else besides CSS. The only downside is that it doesn’t work on IE7 and IE6, where all those sexy rounded corners and only shown as square, uninteresting boxes. I’ve also learned that twitter uses border-radius method.
RGBA is the main focus in Chapter 3. RGB stands for Red Green Blue – the color model that you can combine to create multitude hues – while RGBA stands for Red Green Blue and Alpha. This chapter will explain why there is an “alpha” value in RGB. In this chapter, Dan also show us how how to optimize color usage using CSS.
Chapter 4 covers text-shadow and box-shadow properties, again stuffs that are widely use by developers around the globe. Similar to “border-radius”, it eliminates the need to use any background image for the drop shadow effect. This means user can now easily change text and elements with drop-shadow on the fly.
Chapter 5 combines floating, stylesheet grouping, css framework and css reset. There are ways to tackle float, or known as “problem trigger”. The book suggests two solutions – clearing the float container and using single declaration for each element (will need long list css). It also shows the ways to to quarantine IE hacks and patches into developer’s own stylesheet. This chapter also discusses the two most popular frameworks at present: Blueprint and 960 Grid System. They are different but aims for the same objective – to make developers’ lives easier. The part about CSS reset covers essential things that you need to do to neutralize default css property values.
Chapter 6, The Fluid Grid is contributed by Ethan Marcotte and it elaborates more on the Grid System Framework. How to implement? What’s the problem expected to occur? Which browser doesn’t work? What is the solution? You’ll find pretty much everything about grid here.
Chapter 7 is dedicated to the details in web design craftsmanship. It discusses how typography can influence your design and gives valuable examples on how to make things more exciting for flash-like sliding animation using jQuery. Shifting backgrounds, collapsing/hiding image and the use of sliding bars are all new ways to sizzle up your web presence.
All in all, I have thoroughly enjoyed Handcrafted CSS. If you’re a front-end web developer or designer looking to harness CSS3 in your work, this book is a great start for you.
Handcrafted CSS: More Bulletproof Web Design
By Dan Cederholm and Ethan Marcotte.
