Suggested articles:

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 yor 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;
}


BlinkList Del.icio.us Digg! Furl! ma.gnolia StumbleUpOn

Tell me what you think.
Got a question? I'll try my best to answer it.
Just a casual comment or suggestion? Always welcome.
Don't be shy. Feedback is helpful and easy.
Rate from 0-5:
Last Edited on: November 28, 2009
Originally Written: November 24, 2009
Listed on: Dmegs Web Directory Compucert IT and Computer Training