CODEWITHSUNDEEP
htmlcss
Mask
Mask

Reputation: 573

Create shadow element which overlap adjacent element

html <li> shadow is not appearing due to adjecent <li> element. How can I make it glow.

it looks like this :- enter image description here


<li style="box-shadow: 9px 8px 8px 10px rgba(9,180,219, 0.2), 0 6px 20px 0 rgba(9,180,219, 0.19);"><a href="<?= ScriptApp.getService().getUrl();?>?v=edatabase" class="waves-effect grey lighten-4" style="color:white; background: #4776e6; background: -webkit-linear-gradient(to right, #4776e6, #8e54e9); background: linear-gradient(to right, #4776e6, #8e54e9);">Employee Database<i class="material-icons">list</i></a></li>
<li><a href="<?= ScriptApp.getService().getUrl();?>?v=attendance_report" class="waves-effect grey lighten-4">Attendance Report<i class="material-icons">dashboard</i></a></li>
<li><a href="<?= ScriptApp.getService().getUrl();?>?v=shrinkage" class="waves-effect grey lighten-4">Shrinkage Report<i class="material-icons">chat</i></a></li>

Upvotes: 0

Views: 43

Answers (1)

ru4ert
ru4ert

Reputation: 1179

Make the item styled with this:

z-index: 1000;
position: relative; 
background-color: #ACFF32;
box-shadow: 0 0 10px 3px rgba(0,0,0,0.12);
-webkit-box-shadow: 0 0 10px 3px rgba(0,0,0,0.12);
-moz-box-shadow: 0 0 10px 3px rgba(0,0,0,0.12);

Upvotes: 1

Related Questions