*, *::before, *::after{ box-sizing: border-box } .nom_de_votre_menu{ list-style-type: none; margin:0; padding:0; display: flex; flex-direction: column; } .nom_de_votre_menu li a{ position: relative; z-index: 1; -webkit-box-reflect:below 0 linear-gradient(transparent 50%, rgba(0,0,0,.3)) /* reflet sur chrome + opera */; display: flex; justify-content: center; color: #fff; padding: 1rem 0; text-decoration: none; } .nom_de_votre_menu li a:not(.active){ background: linear-gradient(to top,#222,#606060); box-shadow: inset 0 5px 0 rgba(111, 111, 111, 0.59); transition: background .6s } a.active, a.active:hover{ box-shadow: inset 0 0 3px lightgreen; background:radial-gradient(farthest-corner at 50% 100%,rgba(91,171,38,1) 0%, rgba(0,77,9, 1) 100%) } .nom_de_votre_menu li a:not(.active):before{ background:radial-gradient(farthest-corner at 50% 100%,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%); content: ''; height: 100%; width: 100%; position: absolute; top: 0; left: 0; opacity: 0; z-index: -1; transition: opacity .3s } .nom_de_votre_menu li a:not(.active):hover:before { opacity: 1; } @media screen and (min-width:60rem){ .nom_de_votre_menu{ flex-flow: row } .nom_de_votre_menu li{ width:calc(100%/5) } .nom_de_votre_menu li a{ border-right:1px solid rgba(255,255,255,.1); } }
Your browser does not support JavaScript!
Facebook
info@didactecole.com
Le site DidactEcole est définitivement fermé !