Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Mengatur Bayangan Kotak HTML Menggunakan boxShadow Style DOM

Dipublikasikan Oleh: elfanmauludi 5 komentar
Properti boxShadow Style DOM pada HTML digunakan untuk mengatur atau mengembalikan nilai drop-shadow dari suatu elemen.


Sebelum memahami lebih dalam materi tentang Mengatur Bayangan Kotak HTML Menggunakan boxShadow Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Batas Lebar HTML Menggunakan borderWidth Style DOM, Mengatur Lebar Batas Atas HTML Menggunakan borderTopWidth Style DOM, dan Mengatur Batas Atas HTML Menggunakan borderTopStyle DOM.

Sintak:
  • untuk mendapatkan nilai properti boxShadow: object.style.boxShadow
  • untuk mendapatkan nilai properti boxShadow: object.style.boxShadow = "horizontal-offset vertical-offset blur spread color inset|none|initial|inherit"

Return Values: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan nilai properti boxShadow dari suatu elemen HTML.

Property Values:
  • horizontal-offset vertical-offset: digunakan untuk menentukan posisi dari shadow dalan unit ukur length, dimana nilai negatif diperbolehkan pada penggunaan nilai properti ini.
  • blur: digunakan untuk mendefinisikan jumlah dari blur yang akan digunakan pada shadow.
  • spread: digunakan untuk mendefinisikan jumlah dari spread dari shadow.
  • color: digunakan untuk mendefinisikan warna dari shadow yang akan digunakan.
  • inset: digunakan untuk mengatur bayangan ke inner one. Umumnya, sebuah bayangan posisinya berada pada bagian outset, atau di luar dari object utama.
  • none: digunakan untuk menghapus jenis bayangan apapun yang nampak atau terlihat dari elemen. Nilai properti ini merupakan nilai default dari properti boxShadow.
  • initial: digunakan untuk mengatur nilai properti ke nilai default-nya.
  • inherit: digunakan untuk menerima nilai turunan dari nilai parent.

Contoh:

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style boxShadow DOM

</title>

 

<style>

.elem1 

{

border-style: solid;

margin: 10px;

padding: 10px;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style boxShadow DOM

</b>

 

<p class="elem1">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai ilmu 

pemrograman dan materi TIK 

lainnya yang sedang populer 

saat ini.

</p>

 

<button 

onclick="setShadow()"

style="margin-top: 20px;">

Change boxShadow

</button>

 

<!-- Script untuk mengubah 

boxShadow -->

<script>

function setShadow() 

{

elem1 = document.querySelector('.elem1');

elem1.style.boxShadow = '10px 20px';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style boxShadow DOM

Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai ilmu pemrograman dan materi TIK lainnya yang sedang populer saat ini.



Contoh:

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style boxShadow DOM

</title>

 

<style>

.elem2 

{

border-style: solid;

margin: 10px;

padding: 10px;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style boxShadow DOM

</b>

 

<p class="elem2">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

pemrograman dan materi TIK 

lainnya yang sedang populer 

saat ini.

</p>

 

<button 

onclick="setShadow()"

style="margin-top: 20px;">

Change boxShadow

</button>

 

<!-- Script untuk mengubah 

boxShadow -->

<script>

function setShadow() 

{

elem2 = document.querySelector('.elem2');

elem2.style.boxShadow = '10px 20px 5px';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style boxShadow DOM

Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi pemrograman dan materi TIK lainnya yang sedang populer saat ini.



Contoh:

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style boxShadow DOM

</title>

 

<style>

.elem3 

{

border-style: solid;

margin: 30px;

padding: 10px;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style boxShadow DOM

</b>

 

<p class="elem3">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

pemrograman dan materi TIK 

lainnya yang sendang populer 

saat ini.

</p>

 

<button 

onclick="setShadow()"

style="margin-top: 20px;">

Change boxShadow

</button>

 

<!-- Script untuk mengubah 

boxShadow -->

<script>

function setShadow() 

{

elem3 = document.querySelector('.elem3');

elem3.style.boxShadow = '10px 20px 0px 20px';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style boxShadow DOM

Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi pemrograman dan materi TIK lainnya yang sendang populer saat ini.



Contoh:

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style boxShadow DOM

</title>

 

<style>

.elem4 

{

border-style: solid;

margin: 25px;

padding: 10px;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style boxShadow DOM

</b>

 

<p class="elem4">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

pemrograman dan materi TIK 

lainnya yang sedang populer 

saat ini.

</p>

 

<button 

onclick="setShadow()"

style="margin-top: 20px;">

Change boxShadow

</button>

 

<!-- Script untuk mengubah 

boxShadow -->

<script>

function setShadow() 

{

elem4 = document.querySelector('.elem4');

elem4.style.boxShadow = '10px 20px green';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style boxShadow DOM

Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi pemrograman dan materi TIK lainnya yang sedang populer saat ini.



Contoh:

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style boxShadow DOM

</title>

 

<style>

.elem5 

{

border-style: solid;

margin: 25px;

padding: 10px;

box-shadow: 10px 20px;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style boxShadow DOM

</b>

 

<p class="elem5">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

pemrograman komputer dan 

materi TIK lainnya yang sedang 

populer saat ini.

</p>

 

<button 

onclick="setShadow()"

style="margin-top: 20px;">

Change boxShadow

</button>

 

<!-- Script untuk mengubah 

boxShadow -->

<script>

function setShadow() 

{

elem5 = document.querySelector('.elem5');

elem5.style.boxShadow = '10px 20px inset';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style boxShadow DOM

Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi pemrograman komputer dan materi TIK lainnya yang sedang populer saat ini.



Contoh:

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style boxShadow DOM

</title>

 

<style>

.elem6 

{

border-style: solid;

margin: 10px;

padding: 10px;

box-shadow: 10px 20px;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style boxShadow DOM

</b>

 

<p class="elem6">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

tentang pemrograman dan materi 

TIK lainnya yang sedang 

populer saat ini.

</p>

 

<button 

onclick="setShadow()"

style="margin-top: 20px;">

Change boxShadow

</button>

 

<!-- Script untuk mengubah 

boxShadow -->

<script>

function setShadow() 

{

elem6 = document.querySelector('.elem6');

elem6.style.boxShadow = 'none';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style boxShadow DOM

Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi tentang pemrograman dan materi TIK lainnya yang sedang populer saat ini.



Baca Juga:

Contoh:

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style boxShadow DOM

</title>

 

<style>

.elem7 

{

border-style: solid;

padding: 10px;

margin: 25px;

box-shadow: 10px 20px green;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style boxShadow DOM

</b>

 

<p class="elem7">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

pemrograman dan materi TIK 

lainnya yang sendang populer 

saat ini.

</p>

 

<button 

onclick="setShadow()"

style="margin-top: 20px;">

Change boxShadow

</button>

 

<!-- Script untuk mengubah 

boxShadow -->

<script>

function setShadow() 

{

elem7 = document.querySelector('.elem7');

elem7.style.boxShadow = 'initial';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style boxShadow DOM

Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi pemrograman dan materi TIK lainnya yang sendang populer saat ini.



Contoh:

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style boxShadow DOM

</title>

 

<style>

#parent 

{

border-style: solid;

padding: 10px;

margin: 25px;

box-shadow: 5px 10px green;

}

 

.elem8 

{

border-style: solid;

padding: 10px;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style boxShadow DOM

</b>

 

<br>

<br>

 

<div id="parent">

<p class="elem8">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

pemrograman dan materi TIK 

lainnya yang sendang populer 

saat ini.

</p>

</div>

 

<br>

 

<button 

onclick="setShadow()" 

style="margin-top: 20px;">

Change boxShadow

</button>

 

<!-- Script untuk mengubah 

boxShadow -->

<script>

function setShadow() 

{

elem8 = document.querySelector('.elem8');

elem8.style.boxShadow = 'inherit';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style boxShadow DOM

Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi pemrograman dan materi TIK lainnya yang sendang populer saat ini.



Bayangan kotak merupakan salah satu elemen visual yang sering digunakan dalam desain antarmuka pengguna berbasis situs web. Elemen ini membantu memberikan kedalaman pada tampilan, menciptakan ilusi tiga dimensi, serta menarik perhatian pengunjung pada bagian tertentu dari sebuah halaman. Pengaturan bayangan kotak dalam desain situs web dapat dilakukan dengan berbagai cara, salah satunya menggunakan gaya visual yang diterapkan melalui bahasa pemrograman yang dikenal sebagai pengaturan gaya elemen.

Pada pengembangan laman situs web berbasis bahasa markah, ada banyak elemen yang bisa diperkaya dengan berbagai properti gaya. Salah satu properti yang sering digunakan untuk mempercantik tampilan antarmuka adalah bayangan kotak. Bayangan kotak dapat diterapkan pada sebuah elemen persegi seperti kotak, tombol, atau gambar yang berada di dalam tampilan halaman. Untuk memberikan efek bayangan ini, dapat digunakan pengaturan gaya pada lembar gaya. Namun, bayangan kotak juga bisa diterapkan langsung melalui penanganan elemen secara dinamis dengan menggunakan naskah yang dapat mengatur pengaturan gaya tersebut.

Dalam pengaturan bayangan kotak pada elemen laman, terdapat beberapa aspek yang dapat diatur sesuai dengan keinginan perancang. Beberapa aspek yang sering diatur meliputi jarak bayangan dari elemen induknya, arah bayangan, tingkat keburaman, serta warna yang digunakan untuk bayangan tersebut. Setiap aspek ini akan memberikan efek yang berbeda-beda pada elemen kotak. Dengan memahami masing-masing aspek, perancang laman situs web dapat menciptakan tampilan yang lebih menarik, sesuai dengan konsep estetika yang diinginkan.

Pertama-tama, aspek jarak bayangan merupakan faktor penting dalam menentukan seberapa jauh bayangan terlihat dari elemen induknya. Jarak ini dapat diatur baik secara horizontal maupun vertikal. Pengaturan jarak ini memungkinkan bayangan untuk tampak bergerak ke kanan, kiri, atas, atau bawah dari elemen utama. Jarak yang semakin besar akan memberikan kesan bahwa elemen tersebut tampak lebih jauh dari permukaan laman, sedangkan jarak yang kecil akan membuat bayangan terlihat lebih dekat dengan elemen tersebut.

Selain jarak, arah bayangan juga menjadi faktor yang dapat diatur sesuai kebutuhan desain. Arah bayangan dapat memberikan efek dramatis pada elemen laman. Misalnya, dengan mengarahkan bayangan ke bawah dan ke kanan, elemen akan terlihat seperti terangkat dari permukaan. Sebaliknya, bayangan yang diarahkan ke kiri atas bisa menciptakan ilusi seolah-olah ada cahaya yang datang dari arah kanan bawah. Pengaturan ini memberikan fleksibilitas bagi perancang untuk menciptakan berbagai suasana pencahayaan buatan dalam desain antarmuka.

Tingkat keburaman atau yang dikenal juga dengan efek penyebaran, merupakan elemen lain yang dapat disesuaikan untuk menciptakan tampilan bayangan yang halus atau tajam. Bayangan dengan tingkat keburaman yang tinggi akan memberikan kesan yang lebih lembut, sementara bayangan yang tajam biasanya memberikan kesan kuat dan kokoh pada elemen yang diberikan efek tersebut. Tingkat keburaman ini penting untuk diperhatikan karena dapat mempengaruhi keseluruhan kesan visual yang ditampilkan oleh laman situs web.

Selain itu, warna bayangan juga bisa diatur untuk menyesuaikan dengan skema warna keseluruhan dari situs web. Biasanya, bayangan kotak diberi warna yang lebih gelap dibandingkan dengan elemen induknya, namun bukan berarti bayangan harus selalu berwarna hitam atau abu-abu. Penggunaan warna-warna kreatif pada bayangan dapat memberikan sentuhan yang unik pada desain. Misalnya, bayangan dengan warna merah gelap dapat digunakan pada elemen yang berada di atas latar belakang berwarna terang, memberikan efek yang dinamis dan mencolok.

Dengan kemampuan untuk mengatur berbagai aspek ini, bayangan kotak bisa menjadi salah satu elemen utama dalam mempercantik tampilan visual dari sebuah laman situs web. Efek ini bisa digunakan secara halus atau mencolok, tergantung pada tujuan dari perancangan laman itu sendiri. Pengaturan yang tepat pada bayangan kotak akan memberikan efek visual yang memikat dan mampu memperkuat kesan profesional pada situs web.

Selain berfungsi untuk memperindah tampilan, bayangan kotak juga bisa digunakan untuk membantu memperjelas hierarki visual di dalam laman. Dengan memberikan efek bayangan pada elemen yang dianggap penting, seperti tombol ajakan untuk bertindak atau kotak informasi, pengunjung situs akan lebih mudah memahami bagian mana yang harus mendapatkan perhatian lebih. Bayangan yang lebih dalam pada elemen ini bisa mengarahkan mata pengunjung untuk fokus pada bagian tersebut.

Namun, meskipun bayangan kotak memberikan banyak keuntungan dari segi visual, perancang tetap perlu berhati-hati dalam penggunaannya. Penggunaan bayangan yang berlebihan atau tidak tepat justru bisa membuat tampilan menjadi kurang menarik, bahkan terkesan berat dan mengganggu kenyamanan pengguna. Oleh karena itu, bayangan kotak sebaiknya digunakan dengan bijak, sesuai dengan konsep desain yang diinginkan.

Pada akhirnya, kemampuan untuk mengatur bayangan kotak melalui penanganan naskah pengatur gaya memberikan fleksibilitas yang tinggi bagi perancang situs web. Dengan menguasai teknik ini, perancang bisa lebih leluasa dalam menciptakan berbagai efek visual yang sesuai dengan kebutuhan dan estetika yang diinginkan. Pemahaman yang mendalam mengenai aspek-aspek pengaturan bayangan kotak akan membantu menciptakan antarmuka yang lebih dinamis dan menarik, tanpa harus mengorbankan performa laman.

Pengaturan bayangan kotak menjadi salah satu alat yang sangat berguna bagi perancang situs web dalam memperkuat tampilan visual dan memperkaya pengalaman pengguna. Selain menawarkan keindahan, efek ini juga berfungsi untuk mempertegas elemen-elemen penting pada laman, sehingga memudahkan navigasi dan pemahaman bagi pengunjung. Dengan demikian, bayangan kotak bukan sekadar ornamen, melainkan elemen fungsional yang dapat memengaruhi cara pengunjung berinteraksi dengan laman situs web tersebut.

Teknik pengaturan bayangan kotak yang tepat akan mampu menciptakan keseimbangan antara estetika dan fungsionalitas. Oleh karena itu, penguasaan teknik ini menjadi penting bagi siapa saja yang ingin mendalami dunia pengembangan situs web. Melalui eksplorasi lebih lanjut mengenai berbagai variasi dan efek yang bisa dihasilkan dari bayangan kotak, perancang situs web dapat terus memperbarui keterampilan dan kreativitasnya dalam menciptakan desain laman yang inovatif dan menarik.

Artikel ini akan dibaca oleh: Muhammad Iqbal Nurfaidzi Gustian, Muhammad Maulana, Mustika Rini, Nabila Astri Ariyana, dan Nadia Rizki Rahmadani.
Location: Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Mengatur Bayangan Kotak HTML Menggunakan boxShadow Style DOM"

  1. AnonimMinggu, 19 Juni 2022 pukul 13.38.00 WIB

    Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti boxShadow Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimMinggu, 19 Juni 2022 pukul 13.39.00 WIB

      Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti boxShadow Style DOM pada HTML:
      1. Google Chrome
      2. Internet Explorer 9.0
      3. Firefox
      4. Opera
      5. Apple Safari 5.1.1

      Hapus
  2. AnonimSenin, 27 Juni 2022 pukul 07.27.00 WIB

    Apa yang dimaksud dengan properti boxShadow Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimSenin, 27 Juni 2022 pukul 07.27.00 WIB

      Properti boxShadow Style DOM pada HTML digunakan untuk menyetel atau mengembalikan bayangan yang jatuh dari elemen kotak atau box.

      Hapus
    2. AnonimSenin, 27 Juni 2022 pukul 07.29.00 WIB

      Properti boxShadow digunakan untuk menempelkan satu atau lebih drop-shadow ke box, yang merupakan daftar bayangan atau shadow yang dipisahkan menggunakan tanda koma, yang masing-masing bayangannya ditentukan oleh 2-4 nilai panjang, dan kata kunci sisipan yang sifatnya opsional. Jika nilai panjang tersebut ingin dihilangkan maka nilainya adalah 0.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -