Obligatory CSS3 UI Nav

Developer
Roman Diaz
Size
9,017 Kb
Views
36,414
  1. Obligatory CSS3 UI Nav Previews
  2. Obligatory CSS3 UI Nav HTML Codes
  3. Obligatory CSS3 UI Nav CSS Codes
  4. Obligatory CSS3 UI Nav JS Codes

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 Previews
IQ Test

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"); });
});
Obligatory CSS3 UI Nav - Script Codes
Obligatory CSS3 UI Nav - Script Codes
Home Page Home
Developer Roman Diaz
Username romandiaz
Uploaded July 23, 2022
Rating 4.5
Size 9,017 Kb
Views 36,414
Do you need developer help for Obligatory CSS3 UI Nav?

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!

Roman Diaz (romandiaz) Script Codes
Name
The Creation of Adam - Pure CSS
Browser window
4 Element CSS Clock
Pure CSS tooltips
CSS full size background
Snazzy glass buttons
Basic Usage
A Pen by Roman Diaz
A Pen by Roman Diaz
The Creation of Adam - Pure CSS
Create amazing blog posts with AI!

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!