Bar Graph

Developer
Jon Graft
Size
3,752 Kb
Views
2,024
  1. Bar Graph Previews
  2. Bar Graph HTML Codes
  3. Bar Graph CSS Codes

How do I make an bar graph?

A clean bar graph designed in HTML/CSS.. What is a bar graph? How do you make a bar graph? This script and codes were developed by Jon Graft on 30 January 2023, Monday.

Bar Graph Previews
IQ Test

Bar Graph - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bar Graph</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;	font-weight: bold; font-size: 11px; color: #666;
}
body:after {	content: "By Jonathan Graft"; position: absolute; margin-top: 155px;
}
div span {	display: block;	float: left; padding-top:130px; cursor: default;
}
div span:after {	content:"%";
}
::-moz-selection, ::selection {	background: transparent;
}
.empty {	width: 40px;	height: 129px;	-moz-border-radius: 6px;	-webkit-border-radius: 6px;	border-radius: 6px;	-moz-background-clip: padding;	-webkit-background-clip: padding-box;	background-clip: padding-box;	-moz-box-shadow:	0 1px 1px rgba(255,255,255,.52),	inset 1px 2px 4px rgba(0,0,0,.36);	-webkit-box-shadow:	0 1px 1px rgba(255,255,255,.52),	inset 1px 2px 4px rgba(0,0,0,.36);	box-shadow:	0 1px 1px rgba(255,255,255,.52),	inset 1px 2px 4px rgba(0,0,0,.36);	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSIwJSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iMC43Ii8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMxMzEzMSIgc3RvcC1vcGFjaXR5PSIwLjciLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);	background-image: -moz-linear-gradient(90deg, rgba(255,255,255,.7) 0%, rgba(49,49,49,.7) 100%);	background-image: -o-linear-gradient(90deg, rgba(255,255,255,.7) 0%, rgba(49,49,49,.7) 100%);	background-image: -webkit-linear-gradient(90deg, rgba(255,255,255,.7) 0%, rgba(49,49,49,.7) 100%);	background-image: linear-gradient(90deg, rgba(255,255,255,.7) 0%, rgba(49,49,49,.7) 100%);	position: relative;	float: left;	margin: 5px;
}
.fill {	width: 38px;	-moz-border-radius: 6px;	-webkit-border-radius: 6px;	border-radius: 6px;	-moz-background-clip: padding;	-webkit-background-clip: padding-box;	background-clip: padding-box;	-moz-box-shadow:	0 -2px 5px rgba(0,0,0,.3),	inset 0 1px 2px rgba(255,255,255,.75);	-webkit-box-shadow:	0 -2px 5px rgba(0,0,0,.3),	inset 0 1px 2px rgba(255,255,255,.75);	box-shadow:	0 -2px 5px rgba(0,0,0,.3),	inset 0 1px 2px rgba(255,255,255,.75);	float: bottom;	position: absolute;	bottom: 0;
}
.uno {	height: 50%;	background-color: #f1a12d;	border: 1px solid #d37b00;
}
.dos {	height: 25%;	background-color: #80ff80;	border: 1px solid #41bb41;
}
.tres {	height: 75%;	background-color: #cd75b5;	border: 1px solid #bc3c9a;
}
.quatro {	height: 95%;	background-color: #85c7e1;	border: 1px solid #219cc9;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <img src="https://i.imgur.com/KPtCZ.png" alt="Scale" style="float:left; margin-top: 1px; margin-right: 4px;" />
<div class="empty"><div class="fill uno"></div><span>50</span></div>
<div class="empty"><div class="fill dos"></div><span>25</span></div>
<div class="empty"><div class="fill tres"></div><span>75</span></div>
<div class="empty"><div class="fill quatro"></div><span>95</span></div>
<div class="empty"><span>0</span></div>
</body>
</html>

Bar Graph - Script Codes CSS Codes

body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;	font-weight: bold; font-size: 11px; color: #666;
}
body:after {	content: "By Jonathan Graft"; position: absolute; margin-top: 155px;
}
div span {	display: block;	float: left; padding-top:130px; cursor: default;
}
div span:after {	content:"%";
}
::-moz-selection, ::selection {	background: transparent;
}
.empty {	width: 40px;	height: 129px;	-moz-border-radius: 6px;	-webkit-border-radius: 6px;	border-radius: 6px;	-moz-background-clip: padding;	-webkit-background-clip: padding-box;	background-clip: padding-box;	-moz-box-shadow:	0 1px 1px rgba(255,255,255,.52),	inset 1px 2px 4px rgba(0,0,0,.36);	-webkit-box-shadow:	0 1px 1px rgba(255,255,255,.52),	inset 1px 2px 4px rgba(0,0,0,.36);	box-shadow:	0 1px 1px rgba(255,255,255,.52),	inset 1px 2px 4px rgba(0,0,0,.36);	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSIwJSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iMC43Ii8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMxMzEzMSIgc3RvcC1vcGFjaXR5PSIwLjciLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);	background-image: -moz-linear-gradient(90deg, rgba(255,255,255,.7) 0%, rgba(49,49,49,.7) 100%);	background-image: -o-linear-gradient(90deg, rgba(255,255,255,.7) 0%, rgba(49,49,49,.7) 100%);	background-image: -webkit-linear-gradient(90deg, rgba(255,255,255,.7) 0%, rgba(49,49,49,.7) 100%);	background-image: linear-gradient(90deg, rgba(255,255,255,.7) 0%, rgba(49,49,49,.7) 100%);	position: relative;	float: left;	margin: 5px;
}
.fill {	width: 38px;	-moz-border-radius: 6px;	-webkit-border-radius: 6px;	border-radius: 6px;	-moz-background-clip: padding;	-webkit-background-clip: padding-box;	background-clip: padding-box;	-moz-box-shadow:	0 -2px 5px rgba(0,0,0,.3),	inset 0 1px 2px rgba(255,255,255,.75);	-webkit-box-shadow:	0 -2px 5px rgba(0,0,0,.3),	inset 0 1px 2px rgba(255,255,255,.75);	box-shadow:	0 -2px 5px rgba(0,0,0,.3),	inset 0 1px 2px rgba(255,255,255,.75);	float: bottom;	position: absolute;	bottom: 0;
}
.uno {	height: 50%;	background-color: #f1a12d;	border: 1px solid #d37b00;
}
.dos {	height: 25%;	background-color: #80ff80;	border: 1px solid #41bb41;
}
.tres {	height: 75%;	background-color: #cd75b5;	border: 1px solid #bc3c9a;
}
.quatro {	height: 95%;	background-color: #85c7e1;	border: 1px solid #219cc9;
}
Bar Graph - Script Codes
Bar Graph - Script Codes
Home Page Home
Developer Jon Graft
Username FlyersPh9
Uploaded January 30, 2023
Rating 3
Size 3,752 Kb
Views 2,024
Do you need developer help for Bar Graph?

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!

Jon Graft (FlyersPh9) Script Codes
Name
Bentley Systems Toggles
SVG icon theming
Bentley Systems Cards
Bentley Systems Progress Bar
Simple Social Buttons from Dribbble
Bentley Systems CSS Buttons
Bentley Systems Form Elements
Bentley Systems Dropdown Menus
User Profile in CSS
Pie Chart
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!