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.

[javascript]

.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′);
}

[/javascript]

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

Usage

<div class='.clearfix'>
	Some content
</div>

Bonus:

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
[javascript]

.curved-5px {
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
border-radius:5px;
}

[/javascript]
Assign the class to any html element like here

[javascript]
<div class=’curved-5px’>
Blah! Blah! Blah!
</div>
[/javascript]

Bonus: Drop shadow

[javascript][/javascript][/javascript]
.gray-shadow {
-moz-box-shadow: 2px 2px 2px #cccccc;
-webkit-box-shadow: 2px 2px 2px #cccccc;
box-shadow: 2px 2px 2px #cccccc;
}
[/javasript]