Bayangan pada sisi element sangat penting digunkan untuk membuat suatu kotak menjadi terlihat modern. Membuat bayangan bisa kita lakukan pada kotak div atau pada suatu text, tergantung kebutuhan. Untuk membuat suatu bayangan, kita hanya memerlukan kode property box-shadow untuk kotak atau garis tepi, dan text-shadow untuk membuat bayangan pada suatu text.
Berikut ini bentuk penulisan property bayangan pada text dan sisi tepi:
text-shadow: …”Posisi bayangan (kanan / kiri)”… ”Posisi bayangan (bawah / atas)” …..Ketebalan bayangan ……warna;
box-shadow: …”Posisi bayangan (kanan / kiri)”… ”Posisi bayangan (bawah / atas)” …..Ketebalan bayangan ……warna;
Pada kode property diatas, yang membedakan hanya kode propertynya saja, sedangkan untuk isinya, dapat dibilang sama. Untuk posisi bayangan, kita bisa menerapakan kode minus (-) untuk posisi kiri dan atas, dengan tambahan px untuk ukurannya. Sedangkan ketebalan bayangan, kita bisa menggunakan pixel sebagai ukurannya.
Lalu untuk warna, kita bisa menggunakan nama warna dalam bahasa inggris seperti “red”, “blue”, “black”, dan sebagainya. Selain itu kita juga bisa menggunkan kode warna seperti rgba. Kode bayangan ini ditempatkan pada file css atau kode css yang sudah ditentukan.
Sekarang, mari kita coba masukan kode css tersebut untuk design suatu kode HTML tertentu. Silahkan ketikan kode berikut ini :
<html>
<head>
<style type="text/css">
.box
{
width:200px;height:300px;
border:1px solid rgba(0,0,0,0.3);
border-radius:7px;
box-shadow: -3px 4px 2px rgba(0,0,0,0.3);
padding:10px;
}
</style>
</head>
<body>
<div class="box">
ini merupakan suatu bayangan yang berada pada suau tepi halaman
</div>
</body>
</html>
Perhatikan kode css yang berfungsi untuk membuat bayangan tersebut :
box-shadow: -3px 4px 2px rgba(0,0,0,0.3)
Pada kode property tersebut, saya menggunakan box-shadow, yang berfungsi untuk membuat bayangan pada suatu box. Lalu saya mengisikan “-3px”, yang berarti saya membuat bayangan di bagian kiri kotak dengan ukuran 3px.
Bagaimana jika ingin membuat bayangannya disebelah kanan ?, anda hanya tinggal menghilangkan simbol minusnya (-). Setelah itu saya juga menggunakan 4px, yang memiliki arti bahwa saya membuat bayangan dibawah kotak dengan ketebalan 4px. Jadi jika ingin membuat bayangan dibagian atas kotak, maka anda hanya perlu menambahkan simbol minus (-).
Terus ada isi 2px, yang berarti bahwa ketebalan bayangannya yaitu 2px. Dan terakhir adalah rgba, yaitu warna dengan kode.
Di dalam tag CSS tersebut, saya juga menambahkan property lain seperti width dan height yang merupakan ukuran kotak. Border untuk membuat garis dan border-radius untuk membuat sisi lengkung. Padding yang berfungsi untuk memberikan jarak dari sisi kotak ke dalam.
Silahkan simpan kode diatas dengan format (bayangan.html), kurang lebih hasilnya seperti gambar berikut.
Sekarang, kita akan coba menerapkan kode bayangan pada suatu text, Langsung saja ketikan kode berikut ini:
<html>
<head>
<style type="text/css">
h1{
text-shadow:3px 5px 3px gray;
}
</style>
</head>
<body>
<h1>Judul dengan BAYANGAN ke samping kanan</h1>
</body>
</html>
Pada kode diatas sama saja dengan box, namun yang membedaknnya yaitu property yang digunakan yaitu text-shadow. Sedangkan posisi bayangan yang digunakan yaitu bagian kanan dengan ukuran 3px, dan bawah dengan ukuran 5px. Serta ketebalan 3px dan warna bayangaanya adalah gray.
Silahkan simpan kode tersebut dengan nama (bayang_text.html)
Maka tampilannya kurang lebih seperti gambar berikut ini :
Itu dia beberapa cara membuat bayangan pada box dan juga pada text dengan CSS. terimakasih sudah berkunjung dan menemani kami selalam ini.
Baca Juga :