BreadCrumb Design

Developer
Hemant Aggarwal
Size
1,913 Kb
Views
4,048
  1. BreadCrumb Design Previews
  2. BreadCrumb Design HTML Codes
  3. BreadCrumb Design CSS Codes

How do I make an breadcrumb design?

What is a breadcrumb design? How do you make a breadcrumb design? This script and codes were developed by Hemant Aggarwal on 09 January 2023, Monday.

BreadCrumb Design Previews
IQ Test

BreadCrumb Design - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>BreadCrumb Design</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="breadcrumbs" xmlns:v="http://rdf.data-vocabulary.org/#"><span class="home"><a href="http://localhost/Theme/" rel="v:url" property="v:title">Home</a></span><span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="http://localhost/Theme/archives/category/uncategorized">Uncategorized</a></span><span class="current">asap</span></div>
</body>
</html>

BreadCrumb Design - Script Codes CSS Codes

.breadcrumbs {	text-align: center;	display: table;	width: 100%;	padding: 10px;	box-shadow:0 1px 2px rgba(0,0,0,.1);
}
.breadcrumbs span.current, .breadcrumbs a {	display: block;	float: left;	height: 30px;	background: #3498db;	text-align: center;	padding: 2px 5px 2px 15px;	position: relative;	margin: 0 10px 0 0;	font-size: 15px;	color: #fff;	transition: all .4s;
}
.breadcrumbs span a:after, .breadcrumbs span.current:after, .breadcrumbs span a:before, .breadcrumbs span.current:before { content: "";	border-top: 15px solid transparent;	border-bottom: 15px solid transparent;	position: absolute;	top: 0;
}
.breadcrumbs span a:after, .breadcrumbs span.current:after {	border-left: 10px solid #3498db;	right: -10px;
}
.breadcrumbs span a:before, .breadcrumbs span.current:before {	border-left: 10px solid #FFF;	left: 0;
}
.breadcrumbs span:first-child a {	border-top-left-radius: 3px; border-bottom-left-radius: 3px;
}
.breadcrumbs span:first-child a:before {	display: none;
}
.breadcrumbs span.current { padding-right: 10px;	border-top-right-radius: 3px; border-bottom-right-radius: 3px;
}
.breadcrumbs span.current:after {	display: none;
}
.breadcrumbs span a:hover {
background: #fa5ba5;
}
.breadcrumbs span a:hover:after {	border-left-color: #fa5ba5;
}
BreadCrumb Design - Script Codes
BreadCrumb Design - Script Codes
Home Page Home
Developer Hemant Aggarwal
Username mstoic
Uploaded January 09, 2023
Rating 3
Size 1,913 Kb
Views 4,048
Do you need developer help for BreadCrumb Design?

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!

Hemant Aggarwal (mstoic) Script Codes
Name
NAV WPMANAGER
Images For ThemeForest - Envato
Continuous News Ticker jQuery
DEL - SIP Calculator
Amazing Hover Effect
Adsense Code Converter - Mstoic.com
Divider Shadow
Material Visiting Card Back
Navigation for Touch
Working Ticker
Create amazing SEO content 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!