Bars Chart
How do I make an bars chart?
A lightweight, customizable and ready-to-use 3D chart.. What is a bars chart? How do you make a bars chart? This script and codes were developed by Tadaima on 01 December 2022, Thursday.
Bars Chart - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bars Chart</title> <title>Bars Chart</title> <meta charset="utf-8"> <meta name="description" content="Bars Chart. A lightweight, customizable and ready-to-use 3D chart."> <meta content="IE=edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="A group of digital interface crafters."> <meta name="author" content="Tadaima"> <meta name="organization" content="Tadaima Web Site"> <meta name="application-name" content="Tadaima Web Site"> <meta name="keywords" content="art direction, design, graphic design, simple, easy, ux, ui, ui/ux, interaction, interactive, interactive design, ecommerce, native app development app, iOS, Android, front-end development, creative development, visual coding, CSS3, HTML5"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='css/https___codepen_io_tadaim.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<main> <section class="section space--huge flexy__item flexy--column flexy--items-center"> <header class="header"> <h2>Bars Chart</h2> </header> <article class="flexy__item flexy--column flexy--items-center"> <header class="space--huge"> <h3>A liquid & 'light-weight' 3D CSS Chart.</h3> </header> <div class="chart"> <div class="bar" role="progress" valuemin="0" valuemax="355" valuenow="100"> <div class="bar__cover" role="tooltip" data-tooltip-content="100"></div> </div> <div class="bar" role="progress" valuemin="0" valuemax="355" valuenow="80"> <div class="bar__cover" role="tooltip" data-tooltip-content="80"></div> </div> <div class="bar" role="progress" valuemin="0" valuemax="355" valuenow="60"> <div class="bar__cover" role="tooltip" data-tooltip-content="60"></div> </div> <div class="bar" role="progress" valuemin="0" valuemax="355" valuenow="40"> <div class="bar__cover" role="tooltip" data-tooltip-content="40"></div> </div> <div class="bar" role="progress" valuemin="0" valuemax="355" valuenow="20"> <div class="bar__cover" role="tooltip" data-tooltip-content="20"></div> </div> <div class="bar" role="progress" valuemin="0" valuemax="355" valuenow="10"> <div class="bar__cover" role="tooltip" data-tooltip-content="10"></div> </div> </div> </article> </section> <header class="header"> <h1><a href="http://tadaima.studio" title="Go to Tadaima"> <svg class="logo-tadaima fill--white" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 80 80"> <title>Tadaima Studio.</title> <desc>A group of digital interface crafters.</desc> <g> <rect class="st5" y="0" width="80" height="80"></rect> </g> <lineargradient id="SVGID_1_" gradientunits="userSpaceOnUse" x1="27.7468" y1="18.248" x2="52.244" y2="42.7452"> <stop offset="0" style="stop-color:#FF5572"></stop> <stop offset="1" style="stop-color:#FF7555"></stop> </lineargradient> <polyline class="logo-tadaima--animated" style="fill:none;stroke:url(#SVGID_1_);stroke-width:2;stroke-miterlimit:10" points="52,27 25,27 25,23 55,23 55,31 40,31 40,54 "></polyline> <lineargradient id="SVGID_2_" gradientunits="userSpaceOnUse" x1="23.9948" y1="30.0043" x2="48.4901" y2="54.4996"> <stop offset="0" style="stop-color:#FF5572"></stop> <stop offset="1" style="stop-color:#FF7555"></stop> </lineargradient> <polyline class="logo-tadaima--animated" style="fill:none;stroke:url(#SVGID_2_);stroke-width:2;stroke-miterlimit:10" points="24,31 36,31 36,57 44,57 44,34 "></polyline> </svg></a></h1> </header>
</main>
<svg class="svg-bg" xmlns="http://www.w3.org/2000/svg"> <defs> <circle id="a" cx="1468" cy="133" r="35"></circle> <mask id="h" x="0" y="0" width="70" height="70" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use> </mask> <circle id="b" cx="236.5" cy="732.5" r="23.5"></circle> <mask id="i" x="0" y="0" width="47" height="47" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b"></use> </mask> <circle id="c" cx="1120.5" cy="945.5" r="28.5"></circle> <mask id="j" x="0" y="0" width="57" height="57" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#c"></use> </mask> <path id="d" d="M1193.375 302.875l44.6 77.25h-89.2z"></path> <mask id="k" x="0" y="0" width="89.201" height="77.25" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#d"></use> </mask> <path id="e" d="M1610.8 513.3l34.14 59.128h-68.278z"></path> <mask id="l" x="0" y="0" width="68.277" height="59.13" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#e"></use> </mask> <path id="f" d="M51.045 967.864l38.314 66.362H12.73z"></path> <mask id="m" x="0" y="0" width="76.629" height="66.362" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#f"></use> </mask> <path id="g" d="M46.045 311.097l26.5 45.897H19.546z"></path> <mask id="n" x="0" y="0" width="52.997" height="45.897" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#g"></use> </mask> </defs> <g style="mix-blend-mode:overlay" fill="none" fill-rule="evenodd" opacity=".35" stroke="#FFF"> <use class="svg-bg_element" mask="url(#h)" stroke-width="6" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use> <use class="svg-bg_element" mask="url(#i)" stroke-width="6" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b"></use> <use class="svg-bg_element opacity-anim" mask="url(#j)" stroke-width="6" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#c"></use> <path class="stroke-anim" d="M657.5 848.5l46 46" stroke-width="3" stroke-linecap="square"></path> <path d="M1360.5 1206.5l89-89M761.5 42.5l42-42" stroke-width="3" stroke-linecap="square"></path> <use class="svg-bg_element" mask="url(#k)" stroke-width="6" transform="rotate(90 1193.375 341.5)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#d"></use> <use class="svg-bg_element" mask="url(#l)" stroke-width="6" transform="rotate(45 1610.8 542.863)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#e"></use> <use class="svg-bg_element rotate-anim" mask="url(#m)" stroke-width="6" transform="rotate(45 51.045 1001.045)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#f"></use> <use class="svg-bg_element" mask="url(#n)" stroke-width="6" transform="rotate(20 46.045 334.045)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#g"></use> </g>
</svg> <script src="js/index.js"></script>
</body>
</html>
Bars Chart - Script Codes CSS Codes
$values: 100;
$animDuration: $slowDuration;
$boxSize: 2em;
$boxMaxHeight: $boxSize * 10;
$minValue: $boxMaxHeight / $values;
$minColor: $red;
$maxColor: complement($orange);
body { background-image: none; background-color: #424242;
}
.chart { font-size: 1em; display: flex; transform-style: preserve-3d; transition: all $slowDuration ease-in-out; margin-top: $boxSize*10; padding: $boxSize; background-color: $white; z-index: 1; position: relative; transform: rotateX(60deg) rotate(45deg); box-shadow: .05em .05em 0 darken($white, 20), .1em .1em 0 darken($white, 20), .15em .15em 0 darken($white, 20), .2em .2em 0 darken($white, 20), .25em .25em 0 darken($white, 20), 1.5em 1.5em 2em -.25em rgba(black, .2);
}
.bar { position: relative; transform-style: preserve-3d; width: $boxSize; height: $boxSize; margin: 0 ($boxSize / 4); &:after, &:before { width: $boxSize; height: $boxMaxHeight; content: ''; position: absolute; line-height: 1em; bottom: 0; left: 0; transform-origin: 50% 100%; } &:after { transform: rotateX(-90deg) rotateY(90deg) translate(($boxSize / 2), 0) translateZ(($boxSize / 2)); } &:before { transform: rotateX(-90deg) translateZ(0); } &__cover { width: $boxSize; height: $boxSize; transform: translateZ($boxMaxHeight); transform-style: preserve-3d; } @for $i from 1 through $values { $thisValue: $minValue * $i; $thisColor: mix($maxColor, $minColor, $i); &[valuenow='#{$i}'] { &:after, &:before { height: $thisValue; } &:after { background-color: darken($thisColor, 06); } &:before { background-color: darken($thisColor, 12); } .bar__cover { transform: translateZ($thisValue); background-color: $thisColor; } [role='tooltip']:before { color: darken($thisColor, 20); transform: rotateX(-90deg) translate(0,$thisValue) translateZ(.1em); } } } &:hover { z-index: 10; [role='tooltip']:before { opacity: 1; transform: rotateX(-90deg) translate(0,0) translateZ(.1em); } }
}
[role='tooltip'] { &:before { color: $gray; pointer-events: none; content: attr(data-tooltip-content); position: absolute; bottom: 0; right: 100%; line-height: 1em; padding: .5em 1em .5em .5em; transform-origin: 100% 100%; transform: rotateX(-90deg) translateZ(.1em); background-image: linear-gradient(-90deg, transparent .5em, $white .5em, $white), linear-gradient(-125deg, transparent 1.25em, $white 1.25em); background-position: right bottom; opacity: 0; transition: all $normalDuration ease-out; }
}
Bars Chart - Script Codes JS Codes
// ¯\_(ツ)_/¯
Developer | Tadaima |
Username | tadaima |
Uploaded | December 01, 2022 |
Rating | 4 |
Size | 98,019 Kb |
Views | 10,120 |
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 Random Mosaic | 107,691 Kb |
Letter I | 97,110 Kb |
Progress Ball | 105,332 Kb |
CSS Dropdown | 103,937 Kb |
Safe Range Tooltip | 100,215 Kb |
Logo Effect | 104,723 Kb |
Infinite Calendar | 104,555 Kb |
CSS Preloaders | 97,977 Kb |
Pure CSS Radial Chart | 105,429 Kb |
Ratings Inspiration | 106,676 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 |
Portfolio Layout Flex | Lahvjal | 3,489 Kb |
SVG Playground | Roygwells | 1,834 Kb |
Practice using Wixel | Emnk | 3,057 Kb |
Toggle menu | Seyedi | 2,279 Kb |
Scoreboard.js basic usage | Tbleckert | 1,733 Kb |
3D flipping card | Ssaakkaa | 2,238 Kb |
A Pen by lizz | Lizz | 10,068 Kb |
Using Flickr API | MoyArt | 6,761 Kb |
Pricing Table | Semenchenko | 6,784 Kb |
Owl Carousel - jumpTo | OwlFonk | 2,553 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!