Mengatur Bayangan Kotak HTML Menggunakan boxShadow Style DOM
 |
| Ilustrasi boxShadow DOM |
- 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 DOMBlog 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 DOMBlog 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 DOMBlog 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 DOMBlog 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 DOMBlog 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 DOMBlog 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 DOMBlog 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 DOMBlog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi pemrograman dan materi TIK lainnya yang sendang populer saat ini.
- 2 Contoh Properti color Style DOM pada HTML [klik]
- 4 Value Properti columnCount Style DOM pada HTML [klik]
- 4 Value columnFill Style DOM pada HTML [klik]
- 4 Value columnGap Style DOM pada HTML [klik]
- 5 Value Properti columnRule Style DOM pada HTML [klik]
- 3 Value Properti columnRuleColor Style DOM pada HTML [klik]
- 12 Value Properti columnRuleStyle DOM pada HTML [klik]
5 komentar untuk "Mengatur Bayangan Kotak HTML Menggunakan boxShadow Style DOM"
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 -
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti boxShadow Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti boxShadow Style DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer 9.0
3. Firefox
4. Opera
5. Apple Safari 5.1.1
Apa yang dimaksud dengan properti boxShadow Style DOM pada HTML?
BalasHapusProperti boxShadow Style DOM pada HTML digunakan untuk menyetel atau mengembalikan bayangan yang jatuh dari elemen kotak atau box.
HapusProperti 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