Obligatory CSS3 UI Nav
How do I make an obligatory css3 ui nav?
Here's a fun little nav bar. NO IMAGES. CSS3 FTWI relied on pseudo elements, gradients, data urls, icons by Stephen Hutchings and other fun things that may never work in Internet Explorer. Not great for production, but fun to play with.. What is a obligatory css3 ui nav? How do you make a obligatory css3 ui nav? This script and codes were developed by Roman Diaz on 23 July 2022, Saturday.
Obligatory CSS3 UI Nav - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Obligatory CSS3 UI Nav</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <ul id="nav"> <li><a href="#" class="icon-home"></a></li> <li class="active"><a href="#" class="icon-camera"></a></li> <li><a href="#" class="icon-mail"></a></li> <li><a href="#" class="icon-comment"></a></li> <li><a href="#" class="icon-user"></a></li> <li><a href="#" class="icon-cog"></a></li> </ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Obligatory CSS3 UI Nav - Script Codes CSS Codes
/*
yeah, we're using LESS.
*/
@neon:#00bff3;
// Border Radius
.border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;
}
// Drop shadows
.box-shadow(@shadow) { -webkit-box-shadow: @shadow; -moz-box-shadow: @shadow; box-shadow: @shadow;
}
// Onto the show!
body { display:block; background:lightgrey; .container { text-align:center; position:absolute; top:40%; left:0; right:0; bottom:0; } ul#nav { font-size:20px; display:inline-block; list-style:none; position:relative; padding:0; .box-shadow(0 .5em 12px rgba(0,0,0,0.75); li { display:block; position:relative; z-index:20; float:left; &:hover { &:before { top:2px; .box-shadow(inset 0 0 1.5em 0 rgba(0,0,0,.75)); } } &:active,&.active { a { padding-top:18px; padding-bottom:5px; color:@neon; text-shadow:0 -1px 0 rgba(0,0,0,1), 0 0 1em @neon; } &:before { top:7px; background: rgb(45,45,45); /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJkMmQyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzE0MTQxNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(top, rgba(45,45,45,1) 0%, rgba(20,20,20,1) 99%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(45,45,45,1)), color-stop(99%,rgba(20,20,20,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(45,45,45,1) 0%,rgba(20,20,20,1) 99%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(45,45,45,1) 0%,rgba(20,20,20,1) 99%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(45,45,45,1) 0%,rgba(20,20,20,1) 99%); /* IE10+ */ background: linear-gradient(to bottom, rgba(45,45,45,1) 0%,rgba(20,20,20,1) 99%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d2d2d', endColorstr='#141414',GradientType=0 ); /* IE6-8 */ border-bottom:1px solid black; } } &:before { content:""; position:absolute; z-index:10; width:100%; height:100%; border-bottom:1px solid rgba(255,255,255,0.05); .box-shadow(inset 0 0 1em 0 rgba(0,0,0,0.25)); border-left:1px solid rgba(0,0,0,0.35); } &:after { content:""; height:16px; position:absolute; z-index:5; bottom:-7px; width:100%; border-left:1px solid black; border-bottom:1px solid black; } &:before { left:0; background: rgb(86,86,86); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU2NTY1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyNjI2MjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(86,86,86,1) 0%, rgba(38,38,38,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(86,86,86,1)), color-stop(100%,rgba(38,38,38,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(86,86,86,1) 0%,rgba(38,38,38,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(86,86,86,1) 0%,rgba(38,38,38,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(86,86,86,1) 0%,rgba(38,38,38,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(86,86,86,1) 0%,rgba(38,38,38,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#565656', endColorstr='#262626',GradientType=0 ); /* IE6-8 */ } &:after { left:0; background: rgb(45,45,45); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIyMyUiIHN0b3AtY29sb3I9IiMyZDJkMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5OSUiIHN0b3AtY29sb3I9IiMxNDE0MTQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(45,45,45,1) 23%, rgba(20,20,20,1) 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(23%,rgba(45,45,45,1)), color-stop(99%,rgba(20,20,20,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(45,45,45,1) 23%,rgba(20,20,20,1) 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(45,45,45,1) 23%,rgba(20,20,20,1) 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(45,45,45,1) 23%,rgba(20,20,20,1) 99%); /* IE10+ */
background: linear-gradient(to bottom, rgba(45,45,45,1) 23%,rgba(20,20,20,1) 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d2d2d', endColorstr='#141414',GradientType=0 ); /* IE6-8 */ } &:first-of-type { &:before,&:after { .border-radius(4px 0 0 4px); } } &:last-of-type { &:before,&:after { .border-radius(0 4px 4px 0); } } a { position:relative; z-index:10; display:block; padding:12px 16px; color:#050505; text-decoration:none; text-shadow:0 1px 0 rgba(255,255,255,0.25); &:hover { color:@neon; text-shadow:0 -1px 0 rgba(0,0,0,1), 0 0 1em @neon; } } } }
}
@font-face { font-family: 'icomoon'; src:url(data:font/opentype;charset=utf-8;base64,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) format("woff"); font-weight: normal; font-style: normal;
}
[class^="icon-"]:before, [class*=" icon-"]:before { font-family: 'icomoon'; font-style: normal; speak: none; font-weight: normal; -webkit-font-smoothing: antialiased;
}
.icon-mail:before { content: "\e02b";
}
.icon-home:before { content: "\e012";
}
.icon-camera:before { content: "\e013";
}
.icon-cog:before { content: "\e01f";
}
.icon-comment:before { content: "\e02c";
}
.icon-user:before { content: "\e028";
}
Obligatory CSS3 UI Nav - Script Codes JS Codes
$(document).ready(function(){ $("#nav li").click(function(){ $("#nav .active").removeClass("active"); $(this).addClass("active"); });
});
Developer | Roman Diaz |
Username | romandiaz |
Uploaded | July 23, 2022 |
Rating | 4.5 |
Size | 9,017 Kb |
Views | 36,432 |
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 |
CSS full size background | 1,572 Kb |
Browser window | 4,200 Kb |
Pure CSS tooltips | 2,273 Kb |
A Pen by Roman Diaz | 2,874 Kb |
A Pen by Roman Diaz | 2,267 Kb |
Obligatory CSS3 UI Nav | 9,017 Kb |
The Creation of Adam - Pure CSS | 243,196 Kb |
The Creation of Adam - Pure CSS | 145,130 Kb |
Basic Usage | 3,310 Kb |
4 Element CSS Clock | 5,695 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 |
Main page display | BarryKe | 4,562 Kb |
Basic template | Tomcat | 1,675 Kb |
Force Counter | Kenlauguico | 2,732 Kb |
Smoke Shader - Frame Buffer | Omarshe7ta | 2,672 Kb |
Lecture 1 | Law | 0 Kb |
Mega menu | DimaZubkov | 5,066 Kb |
Apple website | Jds317 | 1,835 Kb |
Spilled Paint | Darrylhuffman | 3,894 Kb |
FreeCodeCamp - Simon Game | Ivhed | 8,481 Kb |
Vanilla modal window | Jasonhowmans | 3,554 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!