Bagaimana cara membuat website kita ada bayangannya?
Kesempatan kali ini Sobat D42n.com, saya akan membahas
tentang cara membuat bayangan pada website dan pastinya menggunakan CSS.
Disini saya akan membuat dengan menambahkan box-shadow pada
code CSSnya. Apa fungsi box-shadow tersebut?
Fungsi dari box-shadow adalah memberikan efek bayangan pada pada area yang kita kehendaki.
Cara Membuat Efek Bayangan dengan CSS
Langkah-langkah membuat bayangan pada website:
1. Buka aplikasi editor yang sobat miliki,
seperti notepad ataupun adobe dreamweaver.
2. Tuliskan kode berikut:
<html>
<head><style type="text/css">
div{
width:300px;
height:100px;
background-color:#309;
-moz-box-shadow:10px 10px 10px #666666;
box-shadow:10px 10px 10px #666666;
</style>
<title>Untitled Document</title>
</head>
<body>
<div></div>
</body>
</html>
3. file berikut dengan nama index.html
di htdocs dan buat folder baru bernama “shadow”.
4. Jalankan aplikasi Xampp dan buka aplikasi
browser sobat dan tuliskan di URL “localhost/shadow” dan lihat hasilnya.
5. Selesai, lihat hasilnya.
Sekarang kotak yang sobat miliki telah
mempunyai bayangan dengan bantuan box-shadow tersebut.
Demikianah cara membuat bayangan kotak pada
website dengan box-shadow.
0 Komentar