Create Vertical Navigation Bar in HTML and CSS3 | Skewed Nav Bar
Skewed Nav Bar Using HTML5 and CSS3
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="3000">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nav Bar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav role='navigation'>
<a href="#" class='home'>Home</a>
<a href="#">About</a>
<a href="#">Gallery</a>
<a href="#">Contact Us</a>
</nav>
</body>
</html>
CSS Code(style.css)
@import url(https://fonts.googleapis.com/css?family=Voltaire);
*, *:before, *:after {
margin: 0;
padding: 0;
position: relative;
box-sizing: border-box;
}
body {
text-align: center;
background-color: hsl(49,97%,74%);
}
nav {
font-family: 'Voltaire', sans-serif;
color: #222;
display: inline-block;
}
nav > a {
display: block;
text-decoration: none;
color: inherit;
font-size: 1.4em;
text-transform: UPPERCASE;
transform-origin: 0 0;
transform: matrix(1, -0.4, 0, 1.2, 0, 100);
padding: .2em;
margin-bottom: .3em;
transition: .5s background;
}
.home {
font-size: 3em;
}
nav > a:nth-of-type(even) {
border-right: 6px solid;
border-top: 1px solid;
border-bottom: 1px solid;
}
nav > a:nth-of-type(odd) {
border-left: 6px solid;
}
nav > a:hover, nav > a:focus {
background: #222;
color: hsl(49,97%,74%);
border-color: #222;
}
Watch video
Comments
Post a Comment