Pure CSS3 breadcrumb navigation, pixel perfect
How do I make an pure css3 breadcrumb navigation, pixel perfect?
The problem with most CSS3 based breadcrumbs is that they use border based triangles for the arrows which is awful because:. What is a pure css3 breadcrumb navigation, pixel perfect? How do you make a pure css3 breadcrumb navigation, pixel perfect? This script and codes were developed by Stan Williams on 08 September 2022, Thursday.
Pure CSS3 breadcrumb navigation, pixel perfect Previews
Pure CSS3 breadcrumb navigation, pixel perfect - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS3 breadcrumb navigation, pixel perfect </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- a simple div with some links -->
<div class="breadcrumb"> <a href="#" class="active">HOME</a> <a href="#">ABOUT</a> <a href="#">GALLERY</a> <a href="#">BLOG</a>
</div>
<br /><br />
<!-- another version - flat style with animated hover effect -->
<div class="breadcrumb flat"> <a href="#" class="active">BIO</a> <a href="#">LINKS</a> <a href="#">MUSIC</a> <a href="#">CONTACT</a>
</div>
<!-- Prefixfree -->
<!--<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script> <script src="js/index.js"></script>
</body>
</html>Pure CSS3 breadcrumb navigation, pixel perfect - Script Codes CSS Codes
/*custom font*/
@import url(https://fonts.googleapis.com/css?family=Merriweather+Sans);
* {margin: 0; padding: 0;}
html, body {min-height: 100%;}
body { text-align: center; padding-top: 100px; background: #333333; background: linear-gradient(#333333, #111111); font-family: 'Merriweather Sans', arial, verdana;
}
.breadcrumb { /*centering*/ display: inline-block; box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35); overflow: hidden; border-radius: 5px; /*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/ counter-reset: flag;
}
.breadcrumb a { text-decoration: none; outline: none; display: block; float: left; font-size: 12px; line-height: 36px; color: white; /*need more margin on the left of links to accomodate the numbers*/ padding: 0 10px 0 60px; background: #333; background: linear-gradient(#333, #111); position: relative;
}
/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb a:first-child { padding-left: 46px; border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
}
.breadcrumb a:first-child:before { left: 14px;
}
.breadcrumb a:last-child { border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/ padding-right: 20px;
}
/*hover/active styles*/
.breadcrumb a.active, .breadcrumb a:hover{ background: #111; background: linear-gradient(#333, #111);
}
.breadcrumb a.active:after, .breadcrumb a:hover:after { background: #222; background: linear-gradient(145deg, #333, #222);
}
/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb a:after { content: ''; position: absolute; top: 0; right: -18px; /*half of square's length*/ /*same dimension as the line-height of .breadcrumb a */ width: 36px; height: 36px; /*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's: length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem) if diagonal required = 1; length = 1/1.414 = 0.707*/ transform: scale(0.707) rotate(45deg); /*we need to prevent the arrows from getting buried under the next link*/ z-index: 1; /*background same as links but the gradient will be rotated to compensate with the transform applied*/ background: #555; background: linear-gradient(135deg, #777, #333); /*stylish arrow design using box shadow*/ box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1); /* 5px - for rounded arrows and 50px - to prevent hover glitches on the border created using shadows*/ border-radius: 0 5px 0 50px;
}
/*we dont need an arrow after the last link*/
.breadcrumb a:last-child:after { content: none;
}
/*we will use the :before element to show numbers*/
.breadcrumb a:before { content: counter(flag); counter-increment: flag; /*some styles now*/ border-radius: 100%; width: 20px; height: 20px; line-height: 20px; margin: 8px 0; position: absolute; top: 0; left: 30px; background: #333; background: linear-gradient(#333, #300); font-weight: bold;
}
.flat a, .flat a:after { background: #333333; color:#eee; transition: all 0.7s;
}
.flat a:before { background: #111; box-shadow: 0 0 0 1px #00c;
}
.flat a:hover, .flat a.active,
.flat a:hover:after, .flat a.active:after{ background: #3b5998;
}
Pure CSS3 breadcrumb navigation, pixel perfect - Script Codes JS Codes
//orig. code author https://twitter.com/thecodeplayer
// original source:
// http://thecodeplayer.com/walkthrough/css3-breadcrumb-navigation
/*
Forked and modified by Stan Williams http://stanwilliams.net http://stans-songs.com https://codepen.io/Stanssongs
*/
/** * StyleFix 1.0.3 & PrefixFree 1.0.7 * @author Lea Verou * MIT license */
| Developer | Stan Williams |
| Username | Stanssongs |
| Uploaded | September 08, 2022 |
| Rating | 3 |
| Size | 3,958 Kb |
| Views | 22,264 |
Do you need developer help for Pure CSS3 breadcrumb navigation, pixel perfect?
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!
Stan Williams (Stanssongs) Script Codes
| Name | Size |
| 3D Book | 7,405 Kb |
| Jquery and CSS3 powered Lightbox Gallery | 4,834 Kb |
| Animated Digital Flip Clock | 2,423 Kb |
| CSS only simple parallax scroll | 3,708 Kb |
| Off-Canvas LeftResponsive Page with hidden music player widget in left sidebar | 5,692 Kb |
| Background Image Slideshow Menu | 2,226 Kb |
| Cursor following menu demo | 8,080 Kb |
| Record Player with CSS3 Anims and HTML5 Audio | 3,404 Kb |
| HTML5 Player with Flash fallback for non supporting browsers. | 3,484 Kb |
| 3D Hover Effect for Images | 4,341 Kb |
Create amazing video scripts 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!
Similar Scripts & Codes
| Name | Username | Size |
| Bootstrap 3 Price Table | Honglio | 2,655 Kb |
| Ghost | Mghayour | 11,738 Kb |
| A Pen by Paul Sullivan | Pwsm50 | 2,349 Kb |
| See Through | Larrygeams | 77,410 Kb |
| Importable Clearfix | Corysimmons | 1,411 Kb |
| Clock Face Idea | Chrisburnell | 3,196 Kb |
| Replace url via jquery | Serluk | 1,429 Kb |
| Save for later... | Victorfreire | 1,359 Kb |
| Shopping cart | Andiio | 6,581 Kb |
| Under construction | GhostRider | 1,642 Kb |
Do you want hide your ip address?
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!