Handcrafted CSS : more bulletproof Web design

Format:

Book

Author/Creator:

Cederholm, Dan, Author.

Contributor:

Marcotte, Ethan, Contributor.

Series:

Voices that matter Handcrafted CSS

Language:

English

Subjects (All):

XHTML (Document markup language)--Design.

XHTML (Document markup language).

Cascading style sheets.

Web sites.

Physical Description:

1 online resource (xx, 204, [12] p.) : ill.

Edition:

1st edition

Other Title:

Vocies that matter

Place of Publication:

[Place of publication not identified] New Riders 2010

Language Note:

English

System Details:

text file

Summary:

There’s a real connection between craftsmanship and Web design. That’s the theme running through Handcrafted CSS: More Bulletproof Web Design , by bestselling author Dan Cederholm, with a chapter contributed by renowned Web designer and developer Ethan Marcotte. This book explores CSS3 that works in today’s browsers, and you’ll be convinced that now’s the time to start experimenting with it. Whether you’re a Web designer, project manager, or a graphic designer wanting to learn more about the fluidity that’s required when designing for the Web, you’ll discover the tools to create the most flexible, reliable, and bulletproof Web designs. And you’ll finally be able to persuade your clients to adopt innovative and effective techniques that make everyone’s life easier while improving the end user’s experience. This book’s seven chapters deconstruct various aspects of a case-study Web site for the Tugboat Coffee Company, focusing on aspects that make it bulletproof and demonstrate progressive enrichment techniques over more traditional labor-intensive methods. Subjects covered in this book include: building for unanticipated future use progressively enriching designs using CSS3 properties using RGBA color for transparency with an alpha channel modular float management crafting flexible frameworks fluid layouts using grid-based design principles craftsmanship details on typography, jQuery, and shifting backgrounds

Contents:

Cover

Contents

Introduction

CHAPTER 1 Always Ask, "What Happens If...?"

A Simple List of Links

Block-Level Links

The markup

Setting the link style

Styling the price

Positioning the price

Unintentional Overlap

What Happens if Text Size Is Adjusted?

Guessing at Content Length

A situation where absolute positioning makes good sense

Improving Flexibility with Float

A new markup order

Floating the price

Passing the text size test

A More Optimal Markup Order

Specifying a width for floated elements

How About a Table?

Links around block-level elements

Adding Data Visualization

Adding data to the markup

Applying base styles

Hiding the percentage text and creating the bar

Fixing things in Internet Explorer 6

Choosing the Right Solution

CHAPTER 2 Rounded Corners with border-radius

Past and Present Rounding

Slicing up a fixed-width rounded box

Slicing up a fluid-width rounded box

Tied to a palette and a radius

The border-radius Property

Vendor-Specific Extensions

Progressive Enrichment with -webkit-border-radius and -moz-border-radius

Future-proofing

Rounding specific corners

A Little Choppy in Firefox 2

Perfectly fine if contrast is low

Background Clipping

A simple hyperlink

Creating the PNG background image

Applying the styles that create the button

Easy hover states

Adding a border detail

No background clipping in Firefox 2

Rounding Form Elements

Simple form markup

Applying basic styles

Adding backgrounds and removing borders

Creating depth

Adding further detail with borders and border-radius

Declaring a : focus style

What About Other Browsers?

This is okay

Square button

Square form elements

Progressive enrichment

Wonderful for Prototyping

CHAPTER 3 Flexible Color with RGBA.

What Is RGBA?

The opacity Property vs. RGBA

Where opacity goes wrong

Compatibility

Providing a backup for challenged browsers

Using tiled PNGs

An Excellent Tool for Prototyping

Not Just for Backgrounds

Blending text with RGBA

wilsonminer.com

Easy hover selection

Painting by numbers

Constructing "This Week's Specials"

Crafting the markup

Making the list horizontal

Adding the rounded border

Positioning the overlay

Styling the title and price

Adding RGBA to the overlay

Wrapping Up

CHAPTER 4 Do Websites Need to Look Exactly the Same in Every Browser?

The Answer I'm Sticking to

Rewarding vs. "This Is Broken"

Decision Makers Who Get It

Easier when you are the decision maker

It All Comes Down to Stats

More Advanced CSS That Works Today

text-shadow

box-shadow

-webkit-transition

CHAPTER 5 Modular Float Management

Float Refresher

Easy clearing

Applying .clearfix

Additional rules for IE6 and 7

Adding .clearfix to the markup

A Semantic Dilemma

One alternative: a big long list

Choosing a better class name

Setting Up .group in Your Style Sheets

Set it and forget it

Frameworks for Handcrafters

Rolling your own

index.html

screen.css

reset.css

master.css

ie.css

Your mileage may vary

Applying .group to Tugboat

Modular moves

CHAPTER 6 The Fluid Grid

The Assignment

The problem with fixed width

Less soapbox, more solutions!

Flexibility Through...Font Sizing?

A matter of context

Changing our context

Wax on, wax off

Mo' Fluid, Mo' Grids, Mo' Betta

From mockup to markup

Division sign déjà vu

Columns, context, and changes-oh my!

Fluid Media

This ain't your mama's img tag.

IE and its decidedly imperfect CSS implementation, sitting in a tree...

A problem of platforms (well, one platform)

CHAPTER 7 Craftsmanship Details

Use the Best Possible Ampersand

Channeling our inner Bringhurst

Guideline 5.1.3

We've been progressively enriching since the very beginning

I thought this was about ampersands?

Font Embedding with CSS

Adding @font-face to Tugboat

Support for @font-face

The legal stuff

Using free fonts, for now

Typekit

jQuery

How I use jQuery in Tugboat

Using jQuery to add a .last class

Scratching the surface

Shifting Backgrounds (Parallax Scrolling for the Lazy)

Guerrilla (or gorilla?) tactics

Parallax effect for the lazy

Conclusion

Index.

Notes:

Bibliographic Level Mode of Issuance: Monograph

Description based on publisher supplied metadata and other sources.

ISBN:

9786612432675

9780132104814

0132104814

9781282432673

1282432672

9780321638298

0321638298

OCLC:

1027161590