While a pixel here or there can be overlooked, in this case, precision is essential for the perfect rendering of this simple menu.
The spacing between menu items must be impeccably equal to avoid any merging or disjointed appearance.
Currently, the separators within the menu look messy and blurry, with some items blending together while others stand too far apart.
After a night's rest, it's evident that accepting whatever visual outcome presents itself is not an option - a designer must intervene.
Regardless of whether I try dashed or solid lines, the issue persists in every approach attempted.
Applying negative margins and adding borders does not resolve the problem,
These examples were tested on the latest versions of Chrome and Firefox in 2022.
Is there a method to create clear, sharp lines that separate the items evenly without the fuzzy, inconsistent anti-aliasing effect?
Feel free to rewrite the code completely or utilize flexbox or any other sophisticated CSS solution!
https://i.sstatic.net/Urwi2.png .............................. https://i.sstatic.net/bnbIk.png
nav ul{
list-style: none;
margin: 0;
padding: 0;
}
nav {
top: 0px;
left: 0px;
position: absolute;
height: auto;
display: inline-block;
font-style: italic;
font-size: 1.25em;
padding: 0px 0 0 0;
}
nav li {
background-color: blue;
writing-mode: vertical-rl;
transform: scale(-1);
line-height: 1em;
border-top: 1px dashed white;
}
nav li a {
display:block;
text-decoration: none;
color: #fff;
padding: 2em;
}<nav>
<ul>
<li><a href="#">Bureau</a></li>
<li><a href="#">Projecten</a></li>
<li><a href="#">Diensten</a></li>
<li><a href="#">Ontwerpen</a></li>
<li><a href="#">Concepten</a></li>
<li><a href="#">Kunsten</a></li>
</ul>
</nav>