Home > DeveloperSection > Blogs > Make image or text Water Shadow using CSS3 and HTML

Make image or text Water Shadow using CSS3 and HTML


CSS-CSS3 CSS-CSS3 
Ratings:
0 Comment(s)
 1960  View(s)
Rate this:

Make image or text Water Shadow using CSS3 and HTML

In this blog I am trying to create a Water Shadow using CSS3 and HTML.

Below code will create a water shadow.

<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px;

height:70px;

}

div#div2

{

transform:rotateX(120deg);

-ms-transform:translateZ(120px); /*IE*/

-o-transform:translateZ(210px);/* Opera */

-webkit-transform:rotateX(120deg); /* Safari and Chrome */

-moz-transform:rotateX(120deg); /* Firefox */

}

</style>

</head>

<body>

<div><img src="images.jpg"/></div>

<div id="div2"><img src="images.jpg"/></div>

</body>

</html>

In this code I am create two div one for show image normally and second div for rotate the image in 120 degree on X axis.

And when show on the browser the result is below.

  


Don't want to miss updates? Please click the below button!

Follow MindStick