Ajouter un ombré aux lignes d'un menu "hamburger"

Bonsoir tout le monde,

Je ne trouve pas comment rajouter un ombré aux trois lignes d’un menu "hamburger"

Est-ce possible ?

Au cas où, voici mes CSS

.mynav-container .hamburger-lines
{
	display: block;
	height: 26px;
	width: 32px;
	position: absolute;
	top: 17px;
	left: 20px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-decoration:none;
}

.mynav-container .hamburger-lines .line
{
	display: block;
	height: 4px;
	width: 100%;
	border-radius: 10px;
	background: white;
}

nav .mynav-container .hamburger-lines .line1
{
	transform-origin: 0% 0%;
	transition: transform 0.4s ease-in-out;
}

nav .mynav-container .hamburger-lines .line2
{
	transition: transform 0.2s ease-in-out;
	transition: transform 0.4s ease-in-out;
}

nav .mynav-container .hamburger-lines .line3
{
	transform-origin: 0% 100%;
	transition: transform 0.4s ease-in-out;
}

nav .mynavbar .menu-items
{
	padding-top: 120px;
	background-color:  #0e2431;
	opacity: 0.5;
	height: 100vh;
	width: 80%;
	transform: translate(-150%);
	display: flex;
	flex-direction: column;
	margin-left: 10%;
	margin-right: 10%;
	transition: transform 0.5s ease-in-out;
	text-align: left;
	list-style-type:none;
	text-decoration:none;
	color: white;
	padding-left: 20px;
	line-height: 150%;
	text-decoration:none;
}

nav .mynavbar .menu-items li
{
	margin-bottom: 1.2rem;
	font-size: 1rem;
	font-weight: 500;
	text-decoration:none;
	text-align: left;
	margin-left: 10px;
	left: 0px;
}

Merci beaucoup, bonne fin de soirée

Bonjour

Il me semble qu’il t’a déjà été indiqué que le forum dev zone est réservé au développement de Zeste de Savoir. Merci de penser à poster tes sujets dans le bon forum, ici développement web.

Pardon Moté

Bonne journée

Hello,

Tu as essayé quoi pour le moment ?

box-shadow ? Avec quel sélecteur ?

Tu veux appliquer une ombre sur chaque barre ou bien sur l’ensemble du bouton ?

Bonjour viki53

J’ai testé text-shadow sur les "lines" (nav .mynav-container .hamburger-lines .line1) mais aucun résultat. Est-il donc possible de mettre un ombré sur chaque lignes ?

Merci viki53

text-shadow est faire pour ajouter une ombre sur du texte, pas sur un élément lui-même. box-shadow est là pour mettre une ombre sur un élément.

Est-ce que tes .line contiennent du texte ?

J’ai encore appris un truc, je pensais que les lignes étaient considérées comme du texte (comme sur InDesign etc…). Merci pour tes explications.

Souci résolu avec box-shadow. Merci beaucoup viki53

Bonne journée

Eh non, le texte du point de vue du CSS correspond au contenu textuel d’un élément, en gros les caractères imprimables.

Ici les lignes sont dessinées en appliquant une couleur de fond sur des éléments vides.