|
List of Rounded Corners Websites |
|
|
|
Written by Administrator
|
|
Tuesday, 20 February 2007 |
|
Here are the list of some available useful solutions for Rounded Corners. Please suggest any other websites that you know in comments.
Deep Nesting: supports borders Top and bottom group of divs or spans: supports borders Sliding doors: better for smaller boxes - This technique was inspired by Douglas Bowmann's [ALA] article [Sliding Doors of CSS].
Change the border color with CSS, no image change. - This technique was inspired by Roger Johansson's [Teaser Boxes] and Maurice Svay [Nested <div> technique].
IMG tags inside a div: - [kalsey.com] uses very simple HTML and CSS code. Doesn't require lots of nested Divs. Limited to solid area fill and doesn't do borders.
Only IMG tags: single pixel borders only - [albin.net] supports current browsers, but uses hacks extensively
-moz-border-radius: Mozilla only - [clagnut.com] shows how to use Mozilla's extensions for rounded corners. (Note that the Mozilla extensions do not conform to the CSS3 border module)
Generated content: beautiful - [virtuelvis.com] - Very simple HTML, though requires generated content support. Works in Moz, Opera, Safari 1.1 and degrades gracefully in IE.
Scripted - very clean HTML - [Nifty Corners] Rounded corners without images :: Alessandro Fulciniti, first version (16 Mar. 2005)
- [More Nifty Corners] :: Alessandro Fulciniti, second version (06 Apr. 2005). Works in IE 5.5 and later, Opera 7.5 and later, Gecko af Firefox 1.0 level, and Safari 1.1.
- [Nifty Corners Cube] :: Alessandro Fulciniti, final version (27 Apr. 2006)
- [Transparent custom corners and borders]
- [Gradient Corners] Gradient backgrounds with rounded corners. Works in IE 5. and later, Firefox 1.5, and Safari 2.0. (Untested in other browsers.)
- [RuzeeBorders] Anti-aliased corners, drop shadows, different border widths. Works on all modern browsers, even Opera and Konqueror.
Free Online Web Tools Commercial Tools - [ WellRounded DreamWeaver Extension] Supports custom foreground and background colors, borders, drop shadows and inner shadows. Creates graphics and insert CSS and XHTML 1.1 valid markup into the current DreamWeaver document. The containers support relative dynamic positioning, size-to-content. Tutorials provided for using the WellRounded containers as columns, nesting, etc.
Clean Markup - No Javascript - [Spanky Corners] No extra DIVs or Javascript required. Doesn't support nesting, or IE5. Requires a minimum HTML structure (DIV, Header, Content). CSS and Images autogenerated by a tool.
Trackback(0)
Copyright 2007. All Rights Reserved. |
|
Last Updated ( Tuesday, 20 February 2007 )
|
This site is too good. implementation is great