HASLOO BLOG
 

Friday, July 1, 2011

CSS Design for Rounded Corner

0 comments
Most web application's interface are controlled by CSS. How it looks and its feel depends on its CSS. Wordpress has simple structures of CSS which makes it easier to modify some applications has complex bunch of  CSS codes separated by blocks of layouts like Prestashop.

One of the favorite techniques of professional web designers is the rounded corners.


Techniques
ThrashBox – create rounded-corner boxes that use images flares so without any complex codes the corners render the corner in smooth and impressive look.
http://www.vertexwerks.com/tests/sidebox/
Even More Rounded Corners With CSS – a more beveled look rounded corners with shiny surface.
Even More Rounded Corners With CSS
DomCorners – this simple but very compress in size.
DomCorners
virtuelvis.com Rounded corners in CSS – very flexible to any design altering any markup.
Rounded corners in CSS
Transparent custom corners and borders version 2 – give a transparency impressive appearance with optional alpha transparency.
Transparent custom corners and borders version 2
CSS Teaser Box with rounded corners – by Roger Johansson, the same author of Transparent custom corners and borders version 2.
CSS Teaser Box
News List – was designed to display links to recent news.
news list
CSS Liquid Round Corners – a re-usable rounded box, note that it needs total 6 images for wrap the corners.
CSS Liquid Round Corners
Anti-aliased Nifty Corners – based on Nifty Corners and modified by Steven Wittens.
Anti-aliased Nifty Corners
Simple Box by tedd – another simple rounded corners.
Simple Box by tedd
CSS and round corners making accessible menu tabs – decent rounded corners style menu tabs technique.
CSS and round corners Making accessible menu tabs
CSS and round corners borders with curves – make a rounded corners borders with curves.
CSS and round corners Borders with curves
Airtight Corners – produce a box with rounded corners using only one image, and off-setting that image for each corner.
Airtight Corners
Mountaintop Corners – easier way for creating decent rounded corners.
Mountaintop Corners
Editsite Rounded Corners – need a javascript to create the corners.
http://www.editsite.net/blog/rounded_corners.html
Create a rounded block or design with CSS and XHTML – easily create a rounded block.
Create a rounded block or design with CSS and XHTML
Resizable box with freely stylable corners and surface – re sizable rounded corners box.
Resizable box with freely stylable corners and surface
Smart Round Corners – a practical solution to uses small images for markup the corners.
Smart Round Corners
Lean and Clean CSS boxes – need 2 images to wrap the header and box.
http://www.tjkdesign.com/articles/roundbox.asp
Broader Border Corners – a quick and easy recipe for turning those single-pixel borders.
Broader Border Corners
Snazzy Borders – based on Nifty Corners By Alessandro Fulciniti
Snazzy Borders
Rounded corners in CSS by Adam Kalsey – requires 4 corners images.
Rounded corners in CSS by Adam Kalsey
curvyCorners – a free JavaScript program that will create on-the-fly rounded corners for any HTML DIV element, that look as good as any graphically created corners.
curvyCorners
Nifty Corners – a solution based on CSS and Javascript to get rounded corners.
Nifty Corners
quinncrowley.com – based upon a combination of pixy and Kalsey
http://www.quinncrowley.com/rounded.htm
Rounded Corners Generators
Online rounded corners generators, Rocks!
http://www.roundedcornr.com/ – the herald of rounded corners generator tool.
http://www.roundedcornr.com/
http://www.spiffycorners.com/ – simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or Javascript.
http://www.spiffycorners.com/
http://tools.sitepoint.com/spanky/ – an experimental technique for using only CSS to produce ’round-cornered content boxes’ with semantically pure markup.
http://tools.sitepoint.com/spanky/
http://spiffybox.com/ – another project by the owner of Spiffy Corners.
http://spiffybox.com/
Tutorials

No comments:

Post a Comment

About the Author

Image result for mario garcia philippines

Written by Hasloo Network staff.