Tutorial Pemrograman

Cara Membuat Efek Box-Shadow di CSS3

Selain text-shadow, CSS3 juga memiliki fitur box-shadow. Bila text-shadow akan memberikan bayangan pada teks, box-shadow akan memberikan bayangan pada objek. Tak usah menunggu lama, mari kita langsung coba ke contoh di bawah ini:

Membuat Box-Shadow Ke kanan Dan Ke bawah

1. Buka XAMPP Control Panel dan aktifkan Apache dan MySql.

2. Buka box editor, seperti Notepad++, atau Dreamweaver dan ketiklah script code berikut.

Simpan script code di atas, simpan di folder xampplite – htdocs – buat folder baru (disini saya buat folder baru dengan nama “inwepo”) – saya simpan dengan nama file “box-shadow-1.php”.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Box Shadow</title>
<style>
   div {
     width: 200px;
     height: 150px;
     border: 2px solid green;
     background-color: Blue;
     margin: 30px;
  
     box-shadow: 7px 7px;
   }
</style>
</head>
<body>
<div></div>
</body>
</html>

3. Untuk melihat hasil script code di atas, kamu bisa buka browser kamu ketiklah http://localhost/inwepo/ box-shadow-1.php.

Membuat Box-Shadow Ke kiri Dan Ke atas

1. Buka XAMPP Control Panel dan aktifkan Apache dan MySql.

2. Buka box editor, seperti Notepad++, atau Dreamweaver dan ketiklah script code berikut.

Simpan script code di atas, simpan di folder xampplite  – htdocs – buat folder baru (disini saya buat folder baru dengan nama “inwepo”)  – saya simpan dengan nama file “box-shadow-2.php”.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   div {
     width: 200px;
     height: 150px;
     border: 2px solid green;
     background-color: Blue;
     margin: 30px;
  
     box-shadow: -7px -7px;
   }
</style>
</head>
<body>
<div></div>
</body>
</html>

3. Untuk melihat hasil script code di atas, kamu bisa buka browser kamu ketiklah http://localhost/inwepo/ box-shadow-2.php.

Catatan:

  1. Mungkin ada yang masih bingung kenapa harus disimpan di htdocs? Htdocs adalah salah satu folder bawaan dari XAMPP, yang tugasnya khusus untuk menyimpan berkas-berkas yang akan dijalankan, seperti berkas PHP, HTML, CSS, dan JavaScript.
  2. Kemudian, mungkin ada yang menanyakan maksud dari http://localhost/inwepo/box-shadow-2.php. Localhost merupakan server lokal pada computer. Localhost dapat diaktifkan ketika anda meng-klik start Apache di XAMPP Control Panel. Inwepo menunjuk pada folder inwepo saya di xampplite – htdocs. Dan, box-shadow-2.php adalah nama file yang tersimpan script code di atas.

Demikian penjelasan dari tutorial tentang ‘Cara Membuat Efek Box-Shadow di CSS3’. Selamat mencoba.

Tutorial Lainnya dari Penulis:

Komentar

Leave a Reply

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

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Ikuti Kami di Sosmed!

        

Berlangganan Tutorial Gratis Melalui Email!

Copyright © 2020 Inwepo - All Rights Reserved.

To Top