Header Ads Widget

Applying shadow effect to html element.

My codding spot August 14, 2021

HTML element represents with shadow gives realistic impact. CSS provides properties to styles html element in different looks. 

This post will describes how to give shadow effect to html element, different kinds of shadow styles, etc.. 

The shadow effect can be applied by two CSS properties. 

1) box-shadow property

2) text-shadow property

1) box-shadow property

The box-shadow property adds shadow to an html element. 

Syntax of box-shadow 

box-shadow: [horizontal offset] [vertical offset] [blur] [spread] [color];

This is the basic syntax. By default value of box-shadow property is none means no shadow will display. 

Let’s understand the components of box-shadow.

Syntax explanation of box-shadow property 

• [horizontal offset] 

This component is required. As name suggest this offset puts shadow at left side or right side of the box. Two values can be specified. Positive and Negative. 

Positive value generate shadow at right of box. 

Negative value generate shadow at left of box. 

• [vertical offset]

This component is also required. This offset puts shadow at top or bottom. This offset have also positive and negative value.

Positive value puts shadow at bottom of box. 

Negative value puts shadow at top of box. 

• blur (optional value) 

Gives blur effect to shadow.

 Higher blur value gives more blur effect and lower blur value gives less blur effect.

 Negative value don’t work. Always specify positive value. 

• spread (optional value) 

spread value specify the size of shadow. 

The default value is zero.

 Positive value increase the area acquired by shadow. 

Negative value decrease the area acquired by shadow. 

• color

The color value is not compulsory but if you want shadow in different color specify color value. 

When color value is not present the shadow will display in color of text. (If text color is black shadow will also black color. ) 

Color value can be specified by many color values like rgba, hsla, color code, name. 

Examples

1) Following example defines shadow at horizontal offset. The shadow at right side. (With positive value) 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<title>box-shadow</title>
<style>
.hshadow{
margin:100px;
height:300px;
padding:15px;
font-size:18pt;
width:300px;
background-color:#f0f0f0;
box-shadow:6px 0px #ccc;}
</style>
</head>
<body>
<div class="hshadow"> shadow at horizontal offset.</div>
</body>
</body>
</html>

Output:-
Shadow at horizontal offset
Shadow at horizontal offset (positive value)

The shadow at left side. (With negative value) 

box-shadow:-6px 0px #ccc;

Output:-
Shadow at Horizontal offset negative value
Shadow at horizontal offset (negative value)

2) Following example defines shadow at vertical offset.

 The shadow at below the box. (Positive value) 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<title>box-shadow</title>
<style>
.vshadow{
margin:100px;
height:300px;
padding:15px;
font-size:18pt;
width:300px;
background-color:#f0f0f0;
box-shadow:0px 6px #ccc;}
</style>
</head>
<body>
<div class="vshadow"> shadow at vertical offset.</div>
</body>
</body>
</html>

Output:-
Shadow at vertical offset (bottom)
Shadow at vertical offset (bottom)

The shadow at top of the box. (Negative value) 

box-shadow:0px -6px #ccc;

Output:-
Shadow at Vertical offset (negative value)
Shadow at vertical offset (negative value)

3) Following example specify blur effect in shadow. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<html>
<head>
<title>box-shadow</title>
<style>
.blureffect{
margin:100px;
height:100px;
width:100px;
padding:15px;
background-color:#0f0;
box-shadow:6px 6px 3px #c0c0c0;}
</style>
</head>
<body>
<p class="blureffect">blur effect</p>
</body>
</body>
</html>

Output:-
shadow with blue effect
Shadow with blue effect 

4) Following example specify the spread radius. The area acquired by shadow is 9px wider.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<html>
<head>
<title>box-shadow</title>
<style>
.sprd{
height:300px;
width:300px;
margin:100px;
background-color:#a2f;
box-shadow:5px 5px 4px 9px #ccc;}
</style>
</head>
<body>
<div class="sprd">shadow spreads to 6px .</div>
</body>
</body>
</html>

Output:-
Shadow with spread effect
Shadow with spread effect 

The area acquired by shadow is -2px. In output you can show very minor shadow. 

box-shadow:5px 5px 4px -2px #ccc;

Output:-
Shadow with spread effect -2px
Shadow with blue effect negative value 
5) This example specify box-shadow without color value. 

box-shadow:6px 6px 4px;

Output:-
Shadow with text color value
Shadow with text color value

Multiple shadows effect with box-shadow 


Previous example defines single shadow. 

To define multiple shadows to an element separate shadows by commas. 
• Multiple shadows with positive values. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<html>
<head>
<title>box-shadow</title>
<style>
.multishad{
margin:100px;
height:300px;
width:300px;
background-color:#eaf;
box-shadow:10px 10px 5px #f00,20px 20px 5px #0f0,30px 30px 5px #00f;}
</style>
</head>
<body>
<div class="multishad"></div>
</body>
</body>
</html>

Output:-
Multiple shadows (positive value)
Multiple shadow with box-shadow 

In output you can see that element has three shadows: red, green and blue. 

• Multiple shadows with negative values. 

box-shadow:-7px -7px 4px #0af,-14px -14px 4px #f03;

Output:-
Multiple shadows - negative value
Multiple shadows (negative value)

• Multiple shadows with both positive and negative values. 

box-shadow:-17px 17px 5px #f00,20px -20px  5px #0c3;

Output:-
Multiple shadows with box-shadow
Multiple shadows with box-shadow 

These all are the example of outer shadow. The shadow is generate outside the box. 

You can also put shadow inside the box. So let’s create it. 

How to generate inner shadow? 

To generate inner shadow just add keyword inset. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<html>
<head>
<title>box-shadow</title>
<style>
.inner{
margin:100px;
height:300px;
width:300px;
background-color:#eee;
box-shadow:6px 6px 6px inset black;}
</style>
</head>
<body>
<div class="inner"></div>
</body>
</body>
</html>

Output:-
Inner shadow with box-shadow
Inner shadow with box-shadow 

In output you can see that shadow appears inside. 

Multiple inner shadows

This is example of multiple inner shadows with positive and negative values. 

box-shadow:inset 15px 15px 8px #aef,inset -15px -15px 8px #fcc,inset 25px 25px 8px #fcc,inset -25px -25px 8px #aef;

Output:-
Multiple inner shadows with box-shadow
Multiple inner shadows with box-shadow 

box-shadow:initial value

when box-shadow value set to initial, default value is applied. (that is none)

box-shadow:initial;

Output:-
box-shadow:initial
box-shadow:initial

Following example shows that how shadow looks in element with totally round corners means circle (border-radius is half). 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
<head>
<title>box-shadow</title>
<style>
.one{
position:relative;
height:700px;
width:700px;
background-color:#000;}
.two{
position:absolute;
left:200px;
top:100px;
height:300px;
width:300px;
border-radius:250px;
background-color:#eee;
box-shadow:inset 20px 20px 50px #000;
}
</style>
</head>
<body>
<div class="one">
<div class="two"></div>
</div>
</body>
</body>
</html>

Output:-

Example of Box-shadow - fully round element
box-shadow example (fully round element)

2) text-shadow property

The text-shadow property adds shadow to text. 

Syntax of text-shadow 


text-shadow: [horizontal offset] [vertical offset] [blur] [color];

By default value is none. 

Syntax explanation of text-shadow property 

• horizontal offset

This property is required. 
Positive and negative both values are applicable. 
With positive value shadow generates at right side of text. 
Negative value generates shadow at left. 

• vertical offset

This property is required. 
Positive value generates shadow at bottom of the text. 
Negative value generates shadow at top of the text. 
• blur

This value is optional. By default value is zero. 
• color

color is also optional value. 
If you not specify color value shadow generates with text's current color value. 

The initial value of text-shadow 

initial value sets text-property to it’s default value (none). 

Examples

1) Following example shows shadow at horizontal offset. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<html>
<head>
<title>Text-shadow</title>
<style>
.hoffset{
text-shadow:3px 0px #f00;
font-size:18pt;}
</style>
</head>
<body>
<p class="hoffset">This is paragraph.</p>
</div>
</body>
</body>
</html>

Output:-
Text-shadow horizontal offset
text-shadow horizontal offset 

2) Following example shows shadow at vertical offset. 

.voffset{
text-shadow:0px 3px #f00;
font-size:20pt;}

Output:-
text-shadow vertical offset
text-shadow vertical offset 

3) Text with blur effect. 

h1{text-shadow:5px 3px 5px #00f;}

Output:-
Text shadow with blur effect
Text shadow with blue effect 

4) Shadow with  negative values.

.negative{
text-shadow:-7px -7px 3px #0f0;}

Output:-
Text-shadow with negative value
Text shadow with negative value 

5) Multiple shadows in text

In example the text has 3 shadows with red, black and grey colors. 

h3{
text-shadow:5px 3px 3px #f00,
9px 7px 3px #000,
15px 17px 3px #ccc;}

Output:-
Multiple shadows text
Multiple shadows text

6) Multiple shadows with positive and negative values. 

In example text color is white. Both shadow have black color. Shadow with positive value appears at right-bottom and shadow with negative value appears at top-left.

h4{
color:#fff;
text-shadow:-5px -5px 3px #000,5px 5px 3px #000;}

Output:-

Multiple shadows with positive and negative value
Multiple shadows with positive and negative value

Conclusion:-

Both CSS properties are used to generates shadow. box-shadow property is used to generates shadow on containers. text-shadow property applied to text. 

To generate box-shadow you have to specify height and width of an element. 

Tags:
My codding spot

Posted by: My codding spot

Post a Comment

0 Comments