author Ahmad Muhardian

Tutorial CSS: Cara Membuat Effek Bayangan dengan CSS


Properti untuk membuat bayangan (shadow), mulai dikenalkan pada CSS3. Properti tersebut adalah box-shadow dan text-shadow.

Bayangan untuk elemen dan teks dengan css

Keduanya sama-sama berfungsi untuk membuat bayangan. Properti box-shadow digunakan untuk membuat bayangan untuk kotak atau elemen kontainer. Sementara itu, properti text-shadow digunakan untuk membuat bayangan pada teks.

Membuat Bayangan untuk Teks

Langsung saja ke contoh, silahkan buat style seperti ini.

h2 {
    text-shadow: 3px 2px 1px grey;
    font-size: 40px;
}

kemudian HTML-nya:

<!DOCTYPE html>
<html>
<head>
    <title>Latihan Bayangan</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <h2>Bayanganmu!</h2>
</body>
</html>

Hasilnya:

Bayanganmu!

Mantap!

Teksnya memiliki bayangan.

Membuat Bayangan untuk Box

Selanjutnya kita coba membuat bayangan untuk kotak atau kontainer.

style.css

.kotak {
    box-shadow: 2px 2px 2px rgba(0,0,0,0.8);
    padding: 10px;
    border: 1px dashed grey;
}

bayangan.html

<!DOCTYPE html>
<html>
<head>
    <title>Latihan Bayangan</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>

    <div class="kotak">Tiap malam, aku selalu melihat bayangan hitam</div>

</body>
</html>

hasilnya:

Tiap malam, aku selalu melihat bayangan hitam

Penjelasan Nilai Bayangan

Bagaimana, mudah bukan membuat bayangan?

Properti bayangan memiliki empat nilai yang harus diberikan:

box-shadow: x y z warna;
  1. nilai x untuk menentukan arah horizontal
  2. nilai y untuk menentukan arah vertikal
  3. nilai z untuk menentukan keburaman (blur) bayangan
  4. nilai warna, bisa menggunakan rgb(), rgba(), kode warna, nama warna, dsb.

(baca juga: 6 nilai warna yang valid dalam css)

Jika nilai x dan y diberikan nilai negatif, maka bayangannya akan mengarah ke atas. Sementara itu, nili z tidak boleh negatif.

Contohnya:

.kotak {
    box-shadow: -3px -3px 2px rgba(0,0,0,0.4);
    padding: 10px;
    border: 1px dashed grey;
}

Maka hasilnya:

Tiap malam, aku selalu melihat bayangan hitam

Bayangan Masuk ke Dalam

Jika ingin membuat bayangan masuk ke dalam kotak, maka kita perlu menambahkan kata kunci inset.

contoh:

.kotak {
    box-shadow: inset 3px 3px 4px rgba(0,0,0,0.4);
    padding: 10px;
    border: 1px solid grey;
}

Hasilnya:

Tiap malam, aku selalu melihat bayangan hitam

Ahir kata…

Nah itulah cara membuat effek bayangan dengan CSS. Selamat mencoba dan selamat berkreasi.

Baca Juga ini

Tutorial CSS #02: Cara Menulis CSS di HTML

Tutorial CSS #02: Cara Menulis CSS di HTML

Giaman sih cara menulis CSS di dalam HTML. Mari kita Pelajari 3 cara menulis CSS di HTML.

Tutorial CSS: Pengenalan Dasar CSS untuk Pemula (dan Tips Belajar CSS)

Tutorial CSS: Pengenalan Dasar CSS untuk Pemula (dan Tips Belajar CSS)

Materi wajib untuk belajar dasar-dasar CSS. Setelah membaca tutorial ini kamu akan paham apa itu CSS, serta cara menulis CSS pertamamu.

6 Fungsi Enkripsi di PHP untuk Mengamankan Data

6 Fungsi Enkripsi di PHP untuk Mengamankan Data

Data adalah harta karun yang paling berharga dalam sebuah sistem. Apabila itu dicuri… …bencana besar bisa terjadi 😄. Enkripsi adalah teknik untuk mengamankan data-data tersebut agar isinya tidak diketahui orang lain. Enkripsi biasanya dilakukan terhadap data-data sensitif seperti password. Enkripsi akan menjamin data-data tetap aman meskipun berada di tangan orang lain, karena mereka tidak tahu isi aslinya. Pada kesempatan ini, saya akan membahas beberapa fungsi enkripsi yang sudah disediakan oleh PHP, diantaranya: password_hash(), crypt(), md5(), hash(), sha1(), dan base64_encode().

Memahami Skrip PHP untuk Upload File

Memahami Skrip PHP untuk Upload File

Bagaimana cara membuat fitur uplaoad file di PHP? Pertanyaan ini cukup sering ditanyakan. Karena itu, mari kita bahas bersama… Upload file merupakan kegiatan pengiriman file dari client (pengunjung web) ke server. Biar lebih gampang, mari kita bahas dengan coding Kode PHP untuk Upload FileSilahkan buat dua file: index.html untuk membuat form upload upload.php untuk menerima dan memproses file yang di-upload Isi file index.html seperti ini: <!DOCTYPE html> <html> <head> <title>Upload File</title> </head> <body> <form action="upload.

Belajar PHP: Memahami Prosedur dan Fungsi

Belajar PHP: Memahami Prosedur dan Fungsi

Banyak fungsi build-in dari php yang sering kita gunakan, seperti print(), print_r(), unset(), dll. Selain fungsi-fungsi tersebut, kita juga dapat membuat fungsi sendiri sesuai kebutuhan. Fungsi adalah sekumpulan intruksi yang dibungkus dalam sebuah blok. Fungsi dapat digunakan ulang tanpa harus menulis ulang instruksi di dalamnya. Fungsi pada PHP dapat dibuat dngan kata kunci function, lalu diikuti dengan nama fungsinya. Contoh: function namaFungsi(){ //... } Kode intruksi dapat di tulis di dalam kurung kurawal ({.

Pemrograman Javascript: Langkah Awal Belajar Javascript

Pemrograman Javascript: Langkah Awal Belajar Javascript

Pada tutorial ini, kamu akan berkenalan dengan javascript dan belajar cara membuat program pertama dengan Javascript. Javascript adalah bahasa pemrograman yang wajib dipelajari, apabila kamu ingin mendalami dunia web development.