Category Archives: html

Drop shadow with CSS for all web browsers

Drop shadow with CSS for all web browsers

Very simple and effective css snippet presented below.


.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: &”progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#000000′)&”;
/* For IE 5.5 – 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#000000′);


The shadow is black (#000). If you need another color you should change the #000.

Enjoy it!

Using clear rule in css

.clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; }


<div class='.clearfix'>
	Some content


In css :

.clear { clear: both; }
<br class='clear' />

How to make round corners by css

How to create round corners by css

Create class in css file like follows

.curved-5px {

Assign the class to any html element like here

<div class=’curved-5px’>
Blah! Blah! Blah!

Bonus: Drop shadow

.gray-shadow {
-moz-box-shadow: 2px 2px 2px #cccccc;
-webkit-box-shadow: 2px 2px 2px #cccccc;
box-shadow: 2px 2px 2px #cccccc;