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.

Baca Juga:

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.



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.



Artikel ini didedikasikan kepada: 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 -
- Big things start from small things -