Make a stereoscopic effect navigation menu based on CSS3

This article mainly introduces the CSS3-based production of three-dimensional effect navigation menu related materials, the need for friends can refer to the first to show you, the effect is as follows:

Source:

CSS Code copy content to clipboard

<style>. keleyi-com-nav{width:px;    HEIGHT:PX;    FONT:BOLD/PX Arial;    Text-align:center;    MARGIN:PX Auto;    BORDER-RADIUS:PX;    }. Keleyi-com-nav A{display:inline-block;    -webkit-transition:all. s ease-in;    -moz-transition:all. s ease-in;    -o-transition:all. s ease-in;    -ms-transition:all. s ease-in;    Transition:all. s ease-in;    }. Keleyi-com-nav a:hover{-webkit-transform:rotate (deg);    -moz-transform:rotate (deg);    -o-transform:rotate (deg);    -ms-transform:rotate (deg);    Transform:rotate (deg);    }. black{background: #ccc;    BOX-SHADOW:PX #bbb;    }. red{background: #ff;    BOX-SHADOW:PX #baa;    }. blue{background: #be;    BOX-SHADOW:PX #b;    }. green{background: #cd;    BOX-SHADOW:PX #bb;    }. Keleyi-com-nav li{position:relative;    Display:inline-block;    PADDING:PX;    FONT-SIZE:PX;    text-shadow:px px px rgba (,,,.);    List-style:none outside none; }. Keleyi-com-nav Li::bEfore,. Keleyi-com-nav li::after{content: "";    Position:absolute;    TOP:PX;    HEIGHT:PX;    WIDTH:PX;    }. Keleyi-com-nav li::after{rightright:;    Background:-moz-linear-gradient (top, Rgba (,,,), Rgba (,,,.)%, Rgba (,,,));    Background:-webkit-linear-gradient (top, Rgba (,,,), Rgba (,,,.)%, Rgba (,,,));    Background:-o-linear-gradient (top, Rgba (,,,), Rgba (,,,.)%, Rgba (,,,));    Background:-ms-linear-gradient (top, Rgba (,,,), Rgba (,,,.)%, Rgba (,,,));    Background:linear-gradient (Top, Rgba (,,,), Rgba (,,,.)%, Rgba (,,,));    }. Black li::before{left:;    Background:-moz-linear-gradient (Top, #ccc, #%, #ccc);    Background:-webkit-linear-gradient (Top, #ccc, #%, #ccc);    Background:-o-linear-gradient (Top, #ccc, #%, #ccc);    Background:-ms-linear-gradient (Top, #ccc, #%, #ccc);    Background:linear-gradient (Top, #ccc, #%, #ccc);    }. Red li::before{left:;    Background:-moz-linear-gradient (top, #ffa, #eea%, #ffa); Background:-webkit-Linear-gradient (Top, #ffa, #eea%, #ffa);    Background:-o-linear-gradient (top, #ffa, #eea%, #ffa);    Background:-ms-linear-gradient (top, #ffa, #eea%, #ffa);    Background:linear-gradient (Top, #ffa, #eea%, #ffa);    }. Blue li::before{left:;    Background:-moz-linear-gradient (top, #bdc, #a%, #bdc);    Background:-webkit-linear-gradient (top, #bdc, #a%, #bdc);    Background:-o-linear-gradient (top, #bdc, #a%, #bdc);    Background:-ms-linear-gradient (top, #bdc, #a%, #bdc);    Background:linear-gradient (Top, #bdc, #a%, #bdc);    }. Green li::before{left:;    Background:-moz-linear-gradient (top, #cd, #aa%, #cd);    Background:-webkit-linear-gradient (top, #cd, #aa%, #cd);    Background:-o-linear-gradient (top, #cd, #aa%, #cd);    Background:-ms-linear-gradient (top, #cd, #aa%, #cd);    Background:linear-gradient (Top, #cd, #aa%, #cd);    }. Keleyi-com-nav li:first-child::before{background:none; }. Keleyi-com-nav li:last-child::after{baCkground:none;    }. Keleyi-com-nav a,. Keleyi-com-nav a:hover{color: #fff;    Text-decoration:none; } </style> <ul class= "Keleyi-com-nav black" > <li><a href= "Http://keleyi.com/a/bjac/utovcdwr. HTM ">Home</a></li> <li><a href=" http://keleyi.com/dev/dba.htm ">about me</a></ li> <li><a href= "http://keleyi.com/dev/cdbafffcac.htm" >Portfolio</a></li> <li> <a href= "http://keleyi.com/a/bjac/kpiehx.htm" >Blog</a></li> <li><a href= "/http Keleyi.com/a/bjac/nmwpqgag.htm ">Resources</a></li> <li><a href=" http://keleyi.com/game// ">contact me</a></li> </ul> <ul class=" Keleyi-com-nav red "> <li><a href=" http ://keleyi.com/"> Home </a></li> <li><a href=" http://keleyi.com/ablut/"> About </a></ li> <li><a href= "http://keleyi.com/a/bjac/kjsrtb.htm" &Gt;jquery ajax</a></li> <li><a href= "http://keleyi.com/a/bjac/dib.htm" > Navigation style </a>< /li> <li><a href= "http://keleyi.com/a/bjac/mtpy.htm" > Side navigation </a></li> <li><a href = "Http://keleyi.com/dev/ae.htm" > Tree menu </a></li> </ul> <ul class= "Keleyi-com-nav Blue" > & Lt;li><a href= "http://keleyi.com/a/bjac/et.htm" >Home</a></li> <li><a href= "/http Keleyi.com/a/bjac/wjqxm.htm ">about me</a></li> <li><a href=" http://keleyi.com/a/bjac/ Slnymte.htm ">Portfolio</a></li> <li><a href=" http://keleyi.com/a/bjac/mnmpmbv.htm "> blog</a></li> <li><a href= "http://keleyi.com/a/bjac/cef.htm" >resources</a></li > <li><a href= "http://keleyi.com/a/bjac/bedbffcaaffa.htm" >contact me</a></li> </ul&    Gt <ul class= "Keleyi-com-nav green" > <li><a HREf= "http://keleyi.com/" > Home </a></li> <li><a href= "http://keleyi.com/ablut/" > About &LT;/A    ></li> <li><a href= "http://keleyi.com/a/bjac/kjsrtb.htm" >jquery ajax</a></li> <li><a href= "http://keleyi.com/a/bjac/dib.htm" > Navigation style </a></li> <li><a href= "http:/ /keleyi.com/a/bjac/mtpy.htm "> Side navigation </a></li> <li><a href=" http://keleyi.com/dev/ae.htm " > Tree Menu </a></li> </ul>

Below to share with you the use of CSS3 and pseudo-elements of a three-dimensional navigation bar

CSS Code copy content to clipboard

<!doctype html>