Elang Cyber Blog

Be Complete

Membuat Effect Bottom shadow dengan CSS3

Author : » Date : 15 May 2012 » Category : CSS3 » Tags : , » Views : 5163 kali

contoh-bottom-shadow

Gambar diatas adalah contoh hasil effect bottom shadow dengan css3, pyur no image just css3. dalam css3 semua effect animasi dan gradiasi sudah ada, tinggal bagaimana kita mengexpresikannya disebuah website.

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>Belajar Membuat Effect Bottom Shadow CSS3</title>
<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen” />
</head>
<body>
<h1 id=”title” class=”BottomShadow BMedium BNormal”>CONTOH BOTTOM SHADOW</h1>
</body>
</html>

code style.css

* {

margin: 0;
padding: 0;
}

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

#title {
font: 48px ‘Lobster’, Helvetica, Arial, sans-serif;
width: 600px;
height: 200px;
background-color: #7bc1f2;
background-image: -moz-linear-gradient(top, #7bc1f2, #0486de);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #7bc1f2),color-stop(1, #0486de));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’#7bc1f2′, EndColorStr=’#0486de’);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorStr=’#7bc1f2′, EndColorStr=’#0486de’)”;
color: #2d2d2d;
margin: 40px auto 0 auto;
line-height: 200px;
text-align: center;
text-shadow: 0 1px 1px #fff, 0 -1px 1px #000;
}

.BottomShadow {
position: relative;
}

.BottomShadow:before, .BottomShadow:after {
content: ”;
position: absolute;
z-index: -1;
bottom: 0;
width: 30px;
height: 50px;
}

.BottomShadow:before {
-moz-transform: skew(40deg);
-webkit-transform: skew(40deg);
-o-transform: skew(40deg);
transform: skew(40deg);
}

.BottomShadow:after {
-moz-transform: skew(-40deg);
-webkit-transform: skew(-40deg);
-o-transform: skew(-40deg);
transform: skew(-40deg);
}

.BMedium.BNormal {
-moz-box-shadow: 0 58px 26px -36px rgba(0,0,0,0.8);
-webkit-box-shadow: 0 60px 44px -39px rgba(0,0,0,0.8);
box-shadow: 0 58px 30px -39px rgba(0,0,0,0.8);
}

.BMedium.BNormal:before {
right: 60px;
-moz-box-shadow: 9px 25px 18px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 14px 25px 26px rgba(0, 0, 0, 0.3);
box-shadow: 9px 25px 18px rgba(0, 0, 0, 0.3);
}

.BMedium.BNormal:after {
left: 60px;
-moz-box-shadow: -9px 25px 18px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: -14px 25px 26px rgba(0, 0, 0, 0.3);
box-shadow: -9px 25px 18px rgba(0, 0, 0, 0.3);
}

Belum ada Komentar.

Tinggalkan Komentar

*
*
-

*