Elang Cyber Blog

Be Complete

Membuat Effect Warp shadow dengan CSS3

Author : » Date : 2 June 2012 » Category : CSS3 » Tags : , » Views : 5485 kali

Warp-shadow

Membuat Effect Warp shadow dengan CSS3 akan menambah indah tampilan website dimata anda dan juga dimata pengunjung website, kehebatan css3 memang patut diacungi jempol. Alternatif untuk membuat website dengan seni 3D tanpa jquery.

buat 2 buah file, 1 file index.html dan style.css

code untuk file index.html :

<!DOCTYPE HTML>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”id-ID”>
<head profile=”http://gmpg.org/xfn/11?>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8? />
<title>Warp Shadows</title>
<link href=”http://fonts.googleapis.com/css?family=Reenie+Beanie&subset=latin” rel=”stylesheet” />
<link rel=”stylesheet” href=”style.css” />
</head>
<body>
<h1 id=”title” class=”WarpShadow WLarge WNormal”>WARP SHADOWS</h1>
</body>
</html>

code style.css

* {
margin: 0;
padding: 0;
}

body {
background: #ccc;
font: 12px Helvetica, Arial, sans-serif;
}

#title {
font: 48px ‘Reenie Beanie’, Helvetica, Arial, sans-serif;
width: 500px;
height: 200px;
background: #fc0;
color: #004acf;
margin: 60px auto 0 auto;
line-height: 200px;
text-align: center;
}

.WarpShadow {
position: relative;
-moz-box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
-webkit-box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
}

.WarpShadow:before, .WarpShadow:after {
content: ”;
position: absolute;
z-index: -1;
bottom: 15px;
-moz-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
}

.WarpShadow:before {
right: 10px;
-moz-transform: rotate(4deg) skew(4deg);
-webkit-transform: rotate(4deg) skew(4deg);
-o-transform: rotate(4deg) skew(4deg);
transform: rotate(4deg) skew(4deg);
}

.WarpShadow:after {
left: 10px;
-moz-transform: rotate(-4deg) skew(-4deg);
-webkit-transform: rotate(-4deg) skew(-4deg);
-o-transform: rotate(-4deg) skew(-4deg);
transform: rotate(-4deg) skew(-4deg);
}

.WLarge:before, .WLarge:after {
width: 350px;
}

.WNormal:before, .WNormal:after {
height: 10px;
}

 

Belum ada Komentar.

Tinggalkan Komentar

*
*
-

*