• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 5. Indestructible Boxes > A Bulletproof Approach

A Bulletproof Approach

To cure the box's plague of inflexibility and excess code, let's rebuild the style of this box using a fraction of the markup and taking advantage of CSS to control the design elements that make the box unique.

To begin, we need to develop a strategy for making two areas of the box vertically flexible. The gradient fade behind the box's heading will have to be able to expand down as more or larger text is placed within the heading. In addition, the rest of the box below the heading needs to be able to expand or contract vertically, depending on how much content it contains, with the rounded-corner bottom always sitting below everything else (Figure 5.7).


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint