Remove shadow from intersection area

HTML & CSS
1

hi

i want to remove shadow from intersection area

see screenshot attached for detail

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
body{margin:50px; padding:0px;}
.dropdown {
    position: relative;
    display: inline-block;
    padding:12px;
    margin:0px;
    z-index:2;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px;
    z-index: 1;
    margin-top:12px;
    left:0px;
    min-width:200px;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown:hover{
background-color: #fff;
    box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.2);
    padding: 12px;
    
}
</style>
</head>

<body>
<div class="dropdown">
  <span>Default view</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>
</body>
</html>

vineet

2

I created a little pseudo element to block out the shadow.

.dropdown:hover::after {}

1 Like
3

Hi

SamA74

Thanks for the solution.
Its working great.

Is it possible to have “equal shadow” effect on all sides ??
at present some sides have more shadow and some have less shadow

vineet

4

Sam’s way above is good and should work well.

Here’s another way just for good measure. :slight_smile:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
body {
	margin:50px;
	padding:0px;
}
.dropdown {
	position: relative;
	display: inline-block;
	z-index:2;
}
.dropdown span{
	display: block;
	padding:12px 12px 15px;
	position: relative;
	background:#fff;
	z-index:2;
}
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #fff;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	padding: 12px;
	z-index: 1;
	margin-top:-3px;
	left:0px;
	min-width:200px;
}
.dropdown:hover .dropdown-content {
	display: block;
}
.dropdown:hover {
	background-color: #fff;
	box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<div class="dropdown"> <span>Default view</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>
</body>
</html>

I just put the span on top of the shadow by adjusting the z-index and putting a background on the span.

1 Like
5

Set the offsets to 0 for the shadows (first two values).

box-shadow: 0 0 16px 0 rgba(0,0,0,0.2);
6

You need to set the shadow at 0 0 for the first two numbers and then it is equal.

e.g.

box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.2);

Edit: Beaten by Sam :slight_smile:

7

Hi PauOB

This solution is also working great.
good to know different solutions.

thanks
vineet

8

thanks to sam and paul
shadow is also working great now

vineet

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.