Home

Imageless rounded corners and drop shadows

Images add http requests and slow down loading times. Until CSS3 is widely implemented, images, javascript and flash were thought to be the only way to achieve rounded corners and drop shadows. By using a series of nested and floated div's, I've developed a way to get the same results with just html and css!

Instructions:

  1. Change an attribute below and click anywhere on the page.
  2. Click in the box titled "Put above code:" and copy everything.
  3. Paste everything you just copied immediately above any html element(like a div).
  4. Click in the box titled "Put below code:" and copy everything.
  5. Paste everything you just copied immediately below the element you pasted the other code above.
  6. Copy everything in the box titled "Put in stylesheet:" and paste it either in <style> tags in your header or in an external css sheet.
Colors:
Background: #
Main: #
Border: #

Rounded corners:
Top left: :Top right
Bottom left: :Bottom right
Rounded corners:
Round corners:
Rounding(3-12): px;


Drop shadows:
Top:
Left: :Right
Bottom:

Put above code:
Put below code:
Put in stylesheet:
.s1{
	height: 1px;
}

.s2{
	float: left;
	margin: 0px;
	width: 1px;
	height: 1px;
}

.s3{
	height: 1px;
}

.s4{
	float: right;
	margin: 0px;
	width: 1px;
	height: 1px;
}
Share/Bookmark