Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Attach Drop Shadows to a Box with JavaScript
To attach one or more drop shadows to a box with JavaScript, you can use the box-shadow style property. You can specify the shadow's offset, blur radius, spread radius, and color by passing values for these properties in the box-shadow property.
Syntax
Following is the syntax to add one or more drop shadows to the box with JavaScript ?
box.style.boxShadow = "offset-x offset-y blur-radius spread-radius color";
Here the box.style.boxShadow property in JavaScript allows you to add one or more drop shadows to a box element. It takes the following parameters
offset-x ? This is the horizontal offset of the shadow. Positive values create a shadow on the right side of the box, while negative values create a shadow on the left side.
offset-y ? This is the vertical offset of the shadow. Positive values create a shadow on the bottom of the box, while negative values create a shadow on the top.
blur-radius ? This is the amount of blur applied to the shadow. A higher value will create a more diffuse shadow.
spread-radius ? This is the amount by which the shadow grows or shrinks. A positive value will cause the shadow to grow larger, while a negative value will cause it to shrink.
color ? This is the color of the shadow. It can be specified as a color name, a hex code, or an RGB value.
Example: Adding a Basic Drop Shadow
In the below example, we add a basic drop shadow of yellow color. We pass 6px, 12px and yellow as offset-x, offset-y and color parameters to the boxShadow property.
<html>
<head>
<style>
#box {
background-color: #333;
width: 200px;
color: white;
padding: 10px;
font-family: sans-serif;
}
</style>
</head>
<body>
<h2> Adding one or more drop shadow to the box using JavaScript </h2>
<p> Click on the button to add drop shadow </p>
<p></p>
<div id="box">Box</div>
<br><br>
<button type="button" onclick="displayBlue()">Add Drop Shadow</button>
<script>
const box = document.getElementById("box");
function displayBlue() {
box.style.boxShadow = "6px 12px yellow";
}
</script>
</body>
</html>
Example: Adding a Blur Radius
In the below example, we add a blur radius of the box by passing one more parameter just before the color.
<html>
<head>
<style>
#box {
background-color: #333;
width: 200px;
color: white;
padding: 10px;
font-family: sans-serif;
}
</style>
</head>
<body>
<h2> Adding one or more drop shadow to the box using JavaScript </h2>
<p> Click on the buttons to add drop shadow ans shadow blur </p>
<p></p>
<div id="box">Box</div>
<br><br>
<button type="button" onclick="displayBlue()">Add Drop Shadow</button>
<button type="button" onclick="addShadowBlur()">Add Drop Shadow Blur</button>
<script>
const box = document.getElementById("box");
function displayBlue() {
box.style.boxShadow = "6px 12px yellow";
}
function addShadowBlur() {
box.style.boxShadow = "6px 12px 6px yellow";
}
</script>
</body>
</html>
Example: Adding a Spread Radius
We can also add spread radius to controls how much a shadow grows by passing one more parameter before color.
<html>
<head>
<style>
#box {
background-color: #333;
width: 200px;
color: white;
padding: 10px;
font-family: sans-serif;
}
</style>
</head>
<body>
<h2> Adding one or more drop shadow to the box using JavaScript </h2>
<p> Click on the buttons to add drop shadow , shadow blur and Shadow Blur Spread </p>
<p></p>
<div id="box">Box</div>
<br><br>
<button type="button" onclick="addShadow()">Add Drop Shadow</button>
<button type="button" onclick="addShadowBlur()">Add Drop Shadow Blur</button>
<button type="button" onclick="addShadowBlurSpread()">Add Drop Shadow Blur Spread</button>
<script>
const box = document.getElementById("box");
function addShadow() {
box.style.boxShadow = "6px 12px yellow";
}
function addShadowBlur() {
box.style.boxShadow = "6px 12px 6px yellow";
}
function addShadowBlurSpread() {
box.style.boxShadow = "6px 12px 6px 4px yellow";
}
</script>
</body>
</html>
In summary, to attach one or more drop shadows to a box with JavaScript, you can use the box-shadow style property. You can specify the shadow's offset, blur radius, spread radius, and color by passing values for these properties in the box-shadow property.
1K+ Views
