Colorful header navigation concept
How do I make an colorful header navigation concept?
Experimenting with an animating border with page specific color.. What is a colorful header navigation concept? How do you make a colorful header navigation concept? This script and codes were developed by Tbleckert on 16 October 2022, Sunday.
Colorful header navigation concept - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Colorful header navigation concept</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lato:300|Pacifico'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <div class="wrapper"> <h1 class="logo"> <img src="http://www.gravatar.com/avatar/ef34270d27d84c2f9440bc613ec651be.jpg?s=100" alt="My cool site"> <span></span> </h1> <nav> <!-- No list, I'm cool like that --> <a class="home active" href="#">home</a> <a class="portfolio" href="#">portfolio</a> <a class="about" href="#">about</a> <a class="contact" href="#">contact</a> <!-- Empty element, shame on me --> <span class="border"><span></span></span> </nav> </div>
</header> <script src='http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js'></script> <script src="js/index.js"></script>
</body>
</html>
Colorful header navigation concept - Script Codes CSS Codes
body { background: white; text-rendering: optimizeLegibility;
}
body > header { background: #f4f2f2; position: relative; overflow: hidden; -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-perspective: 1000; -webkit-perspective: 1000; perspective: 1000;
}
body > header .wrapper { width: 1100px; padding: 0 20px; margin: 0 auto;
}
body > header .wrapper > .logo { margin: 0 auto; width: 100px; height: 100px; border-radius: 50%; position: relative; border: 5px solid #fff; box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); top: 10px; -moz-transition: top 0.3s; -o-transition: top 0.3s; -webkit-transition: top 0.3s; transition: top 0.3s; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZWRlZGVkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-radial-gradient(center, ellipse cover, #ffffff 1%, #ededed 50%, #ffffff 100%); background-image: -webkit-radial-gradient(center, ellipse cover, #ffffff 1%, #ededed 50%, #ffffff 100%); background-image: radial-gradient(ellipse cover at center, #ffffff 1%, #ededed 50%, #ffffff 100%);
}
body > header .wrapper > .logo:hover { top: 0;
}
body > header .wrapper > .logo:hover > span { bottom: -20px; width: 60%; left: 20%;
}
body > header .wrapper > .logo::before { content: ""; width: 50%; height: 120%; background: rgba(255, 255, 255, 0.2); position: absolute; top: -15px; left: -5px; -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg);
}
body > header .wrapper > .logo > img { display: block; border-radius: 50%;
}
body > header .wrapper > .logo > span { content: ""; position: absolute; height: 10px; border-radius: 50%; background: rgba(0, 0, 0, 0.1); box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); -moz-transform: rotateX(80deg); -webkit-transform: rotateX(80deg); transform: rotateX(80deg); bottom: -10px; width: 40%; left: 30%; -moz-transition: left 0.3s, width 0.3s, bottom 0.3s; -o-transition: left 0.3s, width 0.3s, bottom 0.3s; -webkit-transition: left 0.3s, width 0.3s, bottom 0.3s; transition: left 0.3s, width 0.3s, bottom 0.3s;
}
body > header .wrapper > nav { font-size: 0; letter-spacing: -1px; margin: 20px 0 0; text-align: center;
}
body > header .wrapper > nav > a { font: 20px Pacifico; letter-spacing: normal; color: #888; text-decoration: none; margin: 0 30px; position: relative; display: inline-block; padding: 10px 0 20px; -moz-transition: -moz-transform 0.3s, color 0.3s; -o-transition: -o-transform 0.3s, color 0.3s; -webkit-transition: -webkit-transform 0.3s, color 0.3s; transition: transform 0.3s, color 0.3s;
}
body > header .wrapper > nav > a.active { -moz-transform: translateY(10px); -ms-transform: translateY(10px); -webkit-transform: translateY(10px); transform: translateY(10px);
}
body > header .wrapper > nav > a.active.home { color: #cb5c3e;
}
body > header .wrapper > nav > a.active.home ~ .border { background: #cb5c3e;
}
body > header .wrapper > nav > a.active.portfolio { color: #afcb3e;
}
body > header .wrapper > nav > a.active.portfolio ~ .border { background: #afcb3e;
}
body > header .wrapper > nav > a.active.about { color: #3eb5cb;
}
body > header .wrapper > nav > a.active.about ~ .border { background: #3eb5cb;
}
body > header .wrapper > nav > a.active.contact { color: #ab3ecb;
}
body > header .wrapper > nav > a.active.contact ~ .border { background: #ab3ecb;
}
body > header .wrapper > nav > a:hover { -moz-transform: translateY(10px); -ms-transform: translateY(10px); -webkit-transform: translateY(10px); transform: translateY(10px);
}
body > header .wrapper > nav > a:hover ~ .border > span { right: 0; -moz-transition: right 0.5s; -o-transition: right 0.5s; -webkit-transition: right 0.5s; transition: right 0.5s;
}
body > header .wrapper > nav > a:hover.home { color: #cb5c3e;
}
body > header .wrapper > nav > a:hover.home ~ .border > span { background: #cb5c3e;
}
body > header .wrapper > nav > a:hover.portfolio { color: #afcb3e;
}
body > header .wrapper > nav > a:hover.portfolio ~ .border > span { background: #afcb3e;
}
body > header .wrapper > nav > a:hover.about { color: #3eb5cb;
}
body > header .wrapper > nav > a:hover.about ~ .border > span { background: #3eb5cb;
}
body > header .wrapper > nav > a:hover.contact { color: #ab3ecb;
}
body > header .wrapper > nav > a:hover.contact ~ .border > span { background: #ab3ecb;
}
body > header .wrapper > nav > .border { position: absolute; left: 0; bottom: 0; height: 5px; width: 100%; background: #ccc;
}
body > header .wrapper > nav > .border > span { display: block; height: 100%; width: 100%; background: #fff; position: absolute; top: 0; right: -100%; -moz-transition: right 0.5s, background 0s 0.5s; -o-transition: right 0.5s, background 0s 0.5s; -webkit-transition: right 0.5s, background 0s; -webkit-transition-delay: 0s, 0.5s; transition: right 0.5s, background 0s 0.5s;
}
Colorful header navigation concept - Script Codes JS Codes
var link = $$('header > .wrapper > nav > a');
link.addEvent('click', function () { link.removeClass('active'); this.addClass('active');
});
Developer | Tbleckert |
Username | tbleckert |
Uploaded | October 16, 2022 |
Rating | 3.5 |
Size | 4,499 Kb |
Views | 10,120 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Extending Scoreboard.js | 2,935 Kb |
Pacman loader | 2,598 Kb |
Slider bullet clock animation | 3,579 Kb |
Scoreboard.js messages | 2,031 Kb |
CSS3 Cases | 3,330 Kb |
A Pen by tbleckert | 1,901 Kb |
Scoreboard.js basic usage | 1,733 Kb |
Google font effects | 1,951 Kb |
Loading concept with status message | 3,441 Kb |
Canvas circle hover test | 2,576 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Faces SVG animation | ScavengerFrontend | 2,957 Kb |
CSS Dynamic Width Square Div | Elleestcrimi | 2,861 Kb |
Perspective Origin Demo | Agelber | 3,614 Kb |
A simple log in form made with css | Mayurelbhar | 2,160 Kb |
React JS Movie Info App | MTushar | 4,870 Kb |
Minimal Menu | Achudars | 3,430 Kb |
Very Simple Slider | Doodlemarks | 2,682 Kb |
Weather App | Kw7oe | 3,162 Kb |
Image Hover | Johnheiner | 3,409 Kb |
Blog | Rottingroom | 1,430 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!