10 TIPs - To Become a Good Developer/Programmer
Why Join
Become a member
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
C# Corner
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
TECHNOLOGIES
ANSWERS
LEARN
NEWS
BLOGS
VIDEOS
INTERVIEW PREP
BOOKS
EVENTS
Training
Live
JOBS
MORE
CAREER
MEMBERS
Box Shadow Property in HTML5
Sudhir Choudhary
Updated date
Dec 05, 2019
14.4k
0
0
In this article you will learn about the Box Shadow Property in HTML5.
facebook
twitter
linkedIn
Reddit
WhatsApp
Email
Bookmark
Print
Other Artcile
Expand
Introduction
In today's article, you will learn about Box-Shadow. The Box-Shadow property allows designers to implement multiple drop shadows on a box element (<div>,<li> etc), specifying the color of a value, blur, offset and size.
Box-Shadow
Y-axis X-axis blur spread color inset There are two types of shadows, they are:
Outer shadow
Inset shadow
The Box-Shadow property by default supports an outer shadow and background color. Browser Support
Here's a basic example of a div:
<!DOCTYPE html
>
<
head
>
<
title
>
</
title
>
<
style
>
#main {
height: 800px;
width: 100%;
}
#shadow {
margin: 0 auto;
height: 300px;
width: 400px;
background: #432567;
box-shadow: 7px 9px 37px 11px;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"main"
>
<
div
id
=
"shadow"
>
</
div
>
</
div
>
</
body
>
</
html
>
<
style
>
#main {
height: 800px;
width: 100%;
}
#shadow {
margin: 0 auto;
height: 300px;
width: 400px;
box-shadow: 1px 1px 77px 15px #345 inset;
}
</
style
>
Here's a basic example of <ul> and <li>:
<
head
>
<
style
>
#main {
height: 800px;
width: 100%;
}
#shadow {
margin: 0 auto;
height: 300px;
width: 1024px;
}
ul {list-style:none;
}
ul li {float:left;
width:100px;
text-align:center;
padding:23px;
font-weight:bold;
font-family:Arial;
font-size:20px;
margin:21px;
box-shadow:-11px -3px 29px 4px;
border-radius:30px;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"main"
>
<
div
id
=
"shadow"
>
<
ul
>
<
li
>
Home
</
li
>
<
li
>
AboutUs
</
li
>
<
li
>
Contact
</
li
>
<
li
>
placement
</
li
>
</
ul
>
</
div
>
</
div
>
</
body
>
</
html
>
If you will change only:
box-shadow:-11px -3px 29px 4px inset;//You can give any color This type:
Here's a basic example of Input types showing a button and three text boxes:
<
style
>
#main {
height: 800px;
width: 100%;
}
#shadow {
margin: 0 auto;
height: 300px;
width: 1024px;
}
label {width:120px;
float:left;
font-weight:bold;
font-family:Arial;
font-size:18px;
margin:20px;
}
input.button {
box-shadow:-11px -3px 29px 4px ;
height:60px; width:120px;
border:none;
border-radius:10px;
margin-left:170px;
}
input.text {height:30px;
width:300px;
box-shadow:-11px -3px 29px 4px;
font-weight:bold;
font-family:Arial;
font-size:18px;
border-radius:10px;
margin:20px;
background:#808080;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"main"
>
<
div
id
=
"shadow"
>
<
label
>
First Name :
</
label
>
<
input
type
=
"text"
class
=
"text"
value
=
"Enter first name"
/>
<
br
/>
<
label
>
Last Name :
</
label
>
<
input
type
=
"text"
class
=
"text"
value
=
"Enter last name"
/>
<
br
/>
<
label
>
Addres :
</
label
>
<
input
type
=
"text"
class
=
"text"
value
=
"Enter your addres"
/>
<
br
/>
<
br
/>
<
input
type
=
"button"
class
=
"button"
value
=
" Button"
/>
</
div
>
</
div
>
</
body
>
</
html
>
Clipboard06.jpg
If you change the style in Box-shadow like:
box-shadow:-11px -3px 29px 4px inset;
background:none;
Then you will find this type:
Box shadow
css
Html5
ul box-shadow
Next Recommended Reading
FEATURED ARTICLES
View All
TRENDING UP
01
Azure Duration Functions - How To Use And Implement It
02
Creating Search Feature In Blazor Server Grid
03
Log Correlation In Microservices
04
Create A PowerApps Component Framework (PCFx ) Using Custom Code In PowerAPPs
05
Import PowerApps Component Framework (PCFx ) Into Model Driven PowerApps
06
Creating Various Layouts For Different Razor Pages In Blazor
07
Safest Way To Convert String To Int In C#
08
Top Three VS Code Extensions Worth The Money
09
How To Migrate From .NET Core 3.1 To .NET 6.0
10
Web3 Developer Salary Soars In 2022
View All
Learn Internet of Things in 21 Days
Challenge yourself
HTML
Get Certified
Microsoft Azure