Elang Cyber Blog

Be Complete

Belajar membuat animasi shadow dengan css3

Author : » Date : 2 March 2012 » Category : CSS3 » Tags : , , » Views : 6076 kali

css3

Teknik animasi text shadow dan box shadow dalam css3, ini akan membuat lebih menarik dalam segi effect website anda. Casscading Style Sheets Level 3 / css3 kali ini memang sangat menarik untuk dicoba, saya akan berbagi sedikit tentang effect text shadow dan box shadow dalam artikel css3 ini.

Perangkat yang harus disiapkan untuk membuat css3 tentunya…

1. Notpad++

File yang harus dibuat..

1. index.html

2. style.css

Syarat…

simpan kedua file tersebut dalam 1 folder

Isinya gan….

index.html

<html>
<head>
<title>My Website</title>
<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen” />
</head>
<body>
<div id=”animasi” class=”shadow”>Awp Slankers</div><br/>
<div id=”animasi” class=”box”>Keep Silent</div>
</body>
</html>

style.css

#animasi{
text-align:center;font-size:24px;
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
-ms-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;}

#animasi.shadow{
color:rgba(0,22,186,0.8);
-webkit-text-shadow: 3px 3px 3px #aaa;
-moz-text-shadow: 3px 3px 3px #aaa;
text-shadow: 3px 3px 3px #aaa;}

#animasi.shadow:hover{
color:rgba(0,22,186,1);
-webkit-text-shadow: 6px 6px 3px #aaa;
-moz-text-shadow: 6px 6px 3px #aaa;
text-shadow: 6px 6px 3px #aaa;}

#animasi.box{
color:rgba(0,22,186,0.8);border: 1px solid rgba(93,139,255,0.3);
-webkit-box-shadow: 3px 3px 3px #aaa;
-moz-box-shadow: 3px 3px 3px #aaa;
box-shadow: 3px 3px 3px #aaa;}

#animasi.box:hover{
color:rgba(0,22,186,1);border: 1px solid rgba(93,139,255,0.9);
-webkit-box-shadow: 6px 6px 3px #aaa;
-moz-box-shadow: 6px 6px 3px #aaa;
box-shadow: 6px 6px 3px #aaa;}

Kalo ada kesulitan…jangan ragu bertanya gan… bisa kita pecahkan bersama-sama…

Belum ada Komentar.

Tinggalkan Komentar

*
*
-

*