Rounded corners are one of the most frequently requested CSS techniques. As with many things in CSS, there are various ways in which this problem can be approached. In this article, I'll look at the pros and cons of some common techniques and introduce a new technique that utilises both CSS and JavaScript. Before we dive in to the CSS, let's remind ourselves of the old fashioned approach to this problem, which uses layout tables: | ||||||||||
| ||||||||||
A few years ago this would have been an acceptable solution. Today, it's an ugly hack: that's an awful lot of redundant markup for a relatively unimportant visual decoration. In fact, the above code won't even function as intended in documents served using a strict doctype -- small gaps will appear beneath the corner images, caused by the fact that images are inline elements and, hence, leave space beneath the image for the "tails" on letters such as 'y' and 'j'. The solution, as explained by Eric Meyer in Images, Tables and Mysterious Gaps, is to add the following rule to your stylesheet: td img { display: block; } | ||||||||||
But, now we're using CSS hacks to fix ugly table hacks! Let's look at ways to implement the same effect using only CSS. As a general rule, any decorative image should be implemented as a CSS background image on an existing page element, rather than being dropped in to the page proper using an tag. It's easy to determine whether an image is decorative or contains actual content: ask yourself if the absence of the image would have any effect on the overall content of the page. In the case of rounded corners, the answer is obviously not. CSS background images are remarkably powerful things. You need only look at the many wonderful designs on display at the CSS Zen Garden for evidence of that. Using CSS, a background image can be applied to any element on a page. Furthermore, it can be repeated horizontally, vertically or not at all; it can be positioned within the background area of the image using absolute measurements, or relative to one of the four corners; it can even be made to stay fixed in place when the element's content scrolls. Unfortunately, CSS 2 imposes one small but significant limitation: you can only apply a single background image to each element on the page. To properly render rounded corners on a we need to apply four background images, one in each corner. Fixed Width BoxesIf the width of the box to which we're applying decorative corners is fixed, half of the problem is solved already. If we know that the box will always be 200 pixels wide, instead of creating four background images (one for each corner), we can create two: one for the top of the box and one for the bottom. The challenge is now reduced to applying two background images to our . It's time to take advantage of our markup. A box with rounded corners wouldn't be much fun if it didn't contain any content. Consider the following: | ||||||||||
| ||||||||||
Nested ElementsApplying four backgrounds to a single div is still out of our reach. But what if we nested four divs, one for each background? Doing so solves our problem, but comes at the expense of additional markup with no structural value: Content goes here And, in the CSS: div.rounded { | ||||||||||
It should be clear what's going on here. Each of the four divs is assigned a rounded corner background image, positioned in the top-right, top-left, bottom-right and bottom-left respectively. While the width of the containing div is set to 200px, it could just as easily be set to something more flexible for use with liquid designs -- the corners would still work, no matter how large or small the containing div was. We now have a solution to the problem, which uses far less markup than the original tables example. But, it's still not perfect: it uses three extra divs, which add nothing of value to the overall document structure. Can we do any better? It's time to look to JavaScript. Using theUsing JavaScript and the DOM, it's possible to manipulate the structure of a document after it has been loaded by the browser. Rounded corners are a presentational effect that can be hidden from non-JavaScript user agents without any significant reduction in their overall experience of the site, so there are no ethical problems with using JavaScript for this kind of transformation. Our final solution will require only a single in the source document. We will use JavaScript to dynamically append the three extraneous divs needed for the rounded corner effect. | ||||||||||
|
Creating Custom Corners & Borders
Labels: Advance CSS3
Search
Categories
- $ Cheap Price (2)
- $$ Price (3)
- $$$ Price (1)
- 2 Colum (1)
- 2 columns (2)
- 2008 (1)
- 3 columns (7)
- About CSS3 (8)
- Advance CSS3 (66)
- affiliate (1)
- ajax (11)
- ajax tutorial (4)
- asp tutorials (1)
- asp.NET (1)
- Avatars (2)
- blog action day (1)
- blog contest (4)
- blogger (5)
- blogger templates (2)
- blogging (3)
- button (1)
- color (1)
- color schemes (8)
- comment (1)
- css (3)
- css articles (6)
- CSS Aural (19)
- CSS Borders (19)
- CSS Classification (5)
- CSS Color and Backgrounds (11)
- CSS Dimensions (7)
- CSS Dynamic Content (5)
- CSS Font (8)
- CSS Generated Content (5)
- CSS International (19)
- CSS Lists (6)
- CSS Margins (5)
- CSS Outline (3)
- CSS Padding (5)
- CSS Positioning (11)
- CSS Printing (9)
- CSS Scrollbars (8)
- CSS Shortcuts (5)
- CSS Tables (6)
- CSS Text (13)
- css tips (26)
- css tools (10)
- CSS Tutorial (4)
- css tutorials (64)
- css3 (1)
- CSS3 Info (1)
- database (1)
- design copyright (1)
- design gadget (5)
- design review (3)
- design showcase (3)
- Design Tutorial (7)
- disqus (1)
- download (21)
- downloads (44)
- Emire (1)
- environment (1)
- eyovurc (1)
- flash (3)
- flash tutorial (1)
- Font (7)
- font review (5)
- Fonts (14)
- FREE Clip Art (1)
- free design box (9)
- FREE Photos (29)
- free templates (1)
- Free Themes (1)
- freelance (1)
- FreeMarker template error (1)
- Gallery (1)
- google chrome (1)
- graphic design (17)
- graphics (36)
- Hamasaki (1)
- HOT DEALS (1)
- how to (16)
- html (3)
- html tutorials (8)
- Humor (3)
- Icon (72)
- Icons (8)
- ie8 (3)
- Illustration (1)
- Illustrator (150)
- illustrator tutorial (2)
- Images (4)
- inspiration (19)
- Internet Tips (1)
- java script tutorial (1)
- jQuery (5)
- Miscs (4)
- money online (12)
- Orther (8)
- Photo A Day (1)
- Photo Work (3)
- photography (6)
- Photoshop (69)
- photoshop action (7)
- photoshop brushes (62)
- Photoshop Patterns (9)
- photoshop tutorial (14)
- Photoshop Tutorials (6)
- php tutorials (6)
- pl/sql tutorial (1)
- Popular Site (3)
- post reach (1)
- PowerPoint (2)
- resources (9)
- Simple (1)
- Spring Webflow (1)
- sql tutorial (1)
- Struts 1 vs Struts 2 (1)
- Struts 2 - AJAX (2)
- Struts 2 Example (4)
- Struts 2.0.14 (1)
- Struts 2.1.8 (1)
- Struts Errors (1)
- Struts Framework Comparison (1)
- templates (1)
- Templete (4)
- text effect (6)
- Texture (2)
- Tool Website (2)
- tools (6)
- tutorials (1)
- typography (4)
- Vector (13)
- viral linking (1)
- viral tagging (1)
- W3C CSS3 (26)
- Wallpaper (9)
- web design (51)
- web tool (6)
- Webdesign (7)
- WordPress (5)
- WordPress Theme (3)
- xml (3)