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:
- Change an attribute below and click anywhere on the page.
- Click in the box titled "Put above code:" and copy everything.
- Paste everything you just copied immediately above any html element(like a div).
- Click in the box titled "Put below code:" and copy everything.
- Paste everything you just copied immediately below the element you pasted the other code above.
- 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.
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; }