Membuat Effect Flying Box CSS3 Box Shadow

Pertama yang siapin tools-toolsnya :
Editor : Dreamweaver, Notepad++, atau dsbnya
Browser : Google Chrome, Mozilla Firefox, IE

Buka editor Anda dan copy code berikut :
<!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 type="text/css">
flybox {
display:inline-block;
position:relative;
background-color:white;
width:70px;
height:70px;
margin:0 5px;
-webkit-box-shadow:0 10px 5px -4px rgba(0,0,0,.2);
-moz-box-shadow:0 10px 5px -4px rgba(0,0,0,.2);
box-shadow:0 10px 5px -4px rgba(0,0,0,.2);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
font:normal normal 30px/70px "Comic Sans MS",Verdana,Arial,Sans-

Serif;
text-align:center;
color:#888;
cursor:default;
}

flybox:hover {
top:5px;
-webkit-box-shadow:0 2px 2px rgba(0,0,0,.2);
-moz-box-shadow:0 2px 2px rgba(0,0,0,.2);
box-shadow:0 2px 2px rgba(0,0,0,.2);
}

flybox:active {
top:6px;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.2);
box-shadow:0 1px 2px rgba(0,0,0,.2);
}
</style>
</head>

<body>
<flybox>a</flybox>
<flybox>b</flybox>
<flybox>c</flybox>
</body>
</html>

Jangan lupa save as namafile.html , namafile bisa diganti sesuai keinginan Anda.
Kemudian silahkan di coba flyingboxnya di buka menggunakan browser favorit Anda(Ctrl+O)
Membuat Effect Flying Box CSS3 Box Shadow | Admin | 4.5

Leave a Reply

Your email address will not be published. Required fields are marked *

You must be logged in to post a comment.