Oldalak

Tuesday, April 5, 2016

Polaroid effect with css





Polaroid effect with css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#kep{
    margin-top:100px;
    border-color:#Fff;
    border-style: solid;
    transform: rotate(-10deg);
    border-top-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    border-bottom-width:30px;
    box-shadow: 3px 3px 3px #5a5a5b;}
#kep2{
    margin-top:100px;
    border-color:#Fff;
    border-style: solid;
    /*transform: rotate(-10deg);*/
    border-top-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    border-bottom-width:30px;
    box-shadow: 3px 3px 3px #5a5a5b;}
   
    #kep3{
    margin-top:100px;
    border-color:#Fff;
    border-style: solid;
    transform: rotate(20deg);
    border-top-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    border-bottom-width:30px;
    box-shadow: 3px 3px 3px #5a5a5b;}


</style>
</head>

<body bgcolor="#CCCCCC">



<center>

<img src="kepek/8VIZESES.JPG" width="300" id="kep" />

<img src="kepek/8VIZESES.JPG" width="300" id="kep2" />

<img src="kepek/8VIZESES.JPG" width="300" id="kep3" />


</center>
</body>
</html>