Friday, April 25, 2008
Website Tabbed Heading Graphics in CSS
A novice small business website owner questioned how heading backgrounds with rounded corners are created and referenced a real estate website using the technique. This was a custom website design using css with graphic design of background images, and explains the technique used.
The sample real estate site was done in HTML plus CSS for layout without tables which provided an excellent example of what can be done creating a tableless web page. Before looking at the code my guess was the page was done with tables, so I was surprised (and impressed) with their layout. Here's a graphic of three sets of links with a top heading and text in pure css that only appears to be created using tables.
The headings were done in CSS and each is a background image which consists of just two graphics which allows text headings. For the ones in question, right clicking on the rounded corner at the left and selecting "view background image" in FireFox (on the real estate site... not this graphic here) allows a visitor to view the corner only. In IE you may not have the view option and might have to save-as to see the square with the upper left corner in white.
Next, right clicking on the far right to view the rest of the background image you would see it is a single thin vertical line with shading to match the horizontal highlight at the top of the rounded corner. The "square" is used once, and then the vertical slice butts up against the "corner" and repeats horizontally as many times as necessary to fill the space.
Attributes in the CSS call out "no-repeat" to place the corner once and "repeat-x" for the vertical line which repeats (x = horizontally) until it reaches the end to fill in the background. The outside border was done using the "border" attribute and specifying the color.
After visiting the site, and for such a well designed page, I was surprised the home page had over 100 code errors. The designer mixed HTML with XHTML creating most of the errors, and if they had validated the code at W3C the errors could have been easily identified and fixed.
In summary, the technique for a heading background and box outline requires advanced design methods in HTML with CSS, plus the graphic skills to create the matching corner and vertical repeating graphic. The person making the inquiry mentioned examples used elsewhere with gradient fills. These use the same code technique except a different custom matching set of graphics.
TAGS: advice css graphic design custom website design
The sample real estate site was done in HTML plus CSS for layout without tables which provided an excellent example of what can be done creating a tableless web page. Before looking at the code my guess was the page was done with tables, so I was surprised (and impressed) with their layout. Here's a graphic of three sets of links with a top heading and text in pure css that only appears to be created using tables.
The headings were done in CSS and each is a background image which consists of just two graphics which allows text headings. For the ones in question, right clicking on the rounded corner at the left and selecting "view background image" in FireFox (on the real estate site... not this graphic here) allows a visitor to view the corner only. In IE you may not have the view option and might have to save-as to see the square with the upper left corner in white.
Next, right clicking on the far right to view the rest of the background image you would see it is a single thin vertical line with shading to match the horizontal highlight at the top of the rounded corner. The "square" is used once, and then the vertical slice butts up against the "corner" and repeats horizontally as many times as necessary to fill the space.
Attributes in the CSS call out "no-repeat" to place the corner once and "repeat-x" for the vertical line which repeats (x = horizontally) until it reaches the end to fill in the background. The outside border was done using the "border" attribute and specifying the color.
After visiting the site, and for such a well designed page, I was surprised the home page had over 100 code errors. The designer mixed HTML with XHTML creating most of the errors, and if they had validated the code at W3C the errors could have been easily identified and fixed.
In summary, the technique for a heading background and box outline requires advanced design methods in HTML with CSS, plus the graphic skills to create the matching corner and vertical repeating graphic. The person making the inquiry mentioned examples used elsewhere with gradient fills. These use the same code technique except a different custom matching set of graphics.
TAGS: advice css graphic design custom website design
Labels: advice, artwork, examples, websites
Jim Degerstrom
