The collection of Thoughts: Create image gallary with HTML5 and CSS3.0

Wednesday, December 14, 2011

Create image gallary with HTML5 and CSS3.0

Code

<!DOCTYPE html>
<html>
<head>
    <Title>DKB Photo Gallary</Title>

    <style type="text/css">
        body{background-image:url(Images\bg.png);}

        img
        {
        width:150px;
        height:120px;
        box-shadow:10px 10px 105px limegreen;
        border-radius:5px 5px 5px 5px;
        opacity:0.5;
        float:left;
        position:relative;
        padding:5px 5px 5px 5px;
        background:lightgreen;
        border:3px solid green;
        }

        .pic1
        {
        z-index:1;
        -webkit-transform:translate(50px,50px) rotate(-30deg);
        -ms-transform:translate(50px,50px) rotate(-30deg);
        -moz-transform:translate(50px,50px) rotate(-30deg);
        }
        .pic2
        {
        z-index:1;
        -webkit-transform:translate(50px,50px) rotate(-3deg);
        -ms-transform:translate(50px,50px) rotate(-3deg);
        -moz-transform:translate(50px,50px) rotate(-3deg);
        }
        .pic3
        {
        z-index:1;
        -webkit-transform:translate(50px,50px) rotate(15deg);
        -ms-transform:translate(50px,50px) rotate(15deg);
        -moz-transform:translate(50px,50px) rotate(15deg);
        }
        .pic4
        {
        z-index:1;
        -webkit-transform:translate(50px,50px) rotate(-20deg);
        -ms-transform:translate(50px,50px) rotate(-20deg);
        -moz-transform:translate(50px,50px) rotate(-20deg);
        }


        img:hover
        {
        width:400px;
        height:500px;
        box-shadow:10px 10px 105px pink;
        border-radius:5px 5px 5px 5px;
        opacity:0.5;
        float:left;
        position:relative;
        padding:10px 10px 10px 10px;
        background:yellow;
        border:3px solid orange;
        }
    </style>
</head>
<body>
    <p>
        <img class="pic1" src="Images\chloe_moretz.jpg">
        <img class="pic2" src="Images\cosmos-wide.jpg">
        <img class="pic3" src="Images\horses-wide.jpg">
        <img class="pic4" src="Images\olivia_wilde.jpg"><br>
    </p>
</body>
</html>

By Dharmendra Bakrecha

http://dkbakrecha.webs.com/dkbstuff.htm

mail : dkbakrecha@gmail.com

The collection of Thoughts

Wednesday, December 14, 2011

Create image gallary with HTML5 and CSS3.0

No comments:

Nathuram Godse - The Man Who Killed Gandhi

Followers