В настоящее время я работаю над целевой страницей для веб-сайта. Я хочу, чтобы в меню навигации было размытие тени, точно так же (https://ibb.co/9ZkJ8tD).
Проблема в том, что я не смог понять, как это сделать. Я попытался создать контейнер div с двумя отдельными div внутри (маска div и фактический div). Затем я попросил два блока зеркально отразить друг друга в спецификациях и положении. Это мой CSS пока (я создаю границы вокруг каждого элемента, чтобы видеть их на живом сервере):
HTML
<body>
<div class="wrapper">
<div class="main">
<div class="inner">
<div class="header">
<h1>Distinctive Brokers</h1>
</div>
<div class="nav-container">
<ul id = "menu" >
<li><a href = "#listings">Listings</a></li>
<li><a href = "#about">About</a></li>
<li><a href = "#contact">Contact</a></li>
</ul>
<div class="mask">
</div>
</div>
</div>
</div>
</div>
CSS
.mask
{
border: 2px solid gold;
margin: 0;
padding: 10px;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#menu{
border: 2px solid magenta;
list-style-type: none;
display: flex;
margin: 0;
padding: 10px;
align-items: center;
align-content: space-between;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
li{
padding-left: 10px;
padding-right: 10px;
margin: auto;
}
Вот как это выглядит на данный момент (https://ibb.co/xf80vFt).
Каким будет самый простой способ создать панель навигации? Я относительно новичок в веб-разработке, поэтому я бы избегал чего-либо с Javascript.