CSS-Only Chart
How do I make an css-only chart?
Using CSS3's clip-path and pseudo elements to create a concept "area chart" example.. What is a css-only chart? How do you make a css-only chart? This script and codes were developed by Claudio Holanda on 18 October 2022, Tuesday.
CSS-Only Chart - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS-Only Chart</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="stats-container"> <h1>CSS-Only interactive chart</h1> <div class="stats-chart-wrapper"> <div class="stats-labels" data-labels="35 30 25 20 15 10"></div> <div class="stats-graph"></div> </div>
</div>
</body>
</html>
CSS-Only Chart - Script Codes CSS Codes
* { box-sizing: border-box;
}
html,
body { margin: 0; min-height: 100vh;
}
body { font-size: 15px; font-family: Lato, Helvetica Neue, sans-serif;
}
.stats-container { width: 500px; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); border-radius: 0.3em; padding: 1em; background: #fff;
}
.stats-container h1 { font-weight: 300; color: DarkBlue; text-align: center; font-size: 1.8em;
}
.stats-chart-wrapper { padding-left: 1.6em; position: relative; min-height: 140px; background-image: linear-gradient(rgba(153, 50, 204, 0.2) 3.33%, rgba(0, 0, 0, 0) 3.34%); background-size: auto 1.6em; background-repeat: repeat; background-position-y: 12px;
}
.stats-chart-wrapper .stats-labels:before { content: attr(data-labels); width: 1em; padding-right: 1em; left: 0; position: absolute; line-height: 2em; font-size: 0.8em; color: rgba(0, 0, 139, 0.5); background: #fff;
}
.stats-chart-wrapper .stats-graph { width: calc(94.9%); height: 100%; bottom: 0.5em; position: absolute; background-image: linear-gradient(Lavender, rgba(230, 230, 250, 0.2)); opacity: 1; transition: all 0.3s ease; -webkit-clip-path: polygon(0% 45%, 0% 100%, 100% 100%, 100% 71%, 90% 11%, 80% 46%, 70% 28%, 60% 67%, 50% 38%, 40% 28%, 30% 76%, 20% 35%, 10% 77%); clip-path: polygon(0% 45%, 0% 100%, 100% 100%, 100% 71%, 90% 11%, 80% 46%, 70% 28%, 60% 67%, 50% 38%, 40% 28%, 30% 76%, 20% 35%, 10% 77%);
}
.stats-chart-wrapper:hover .stats-graph { -webkit-clip-path: polygon(0% 55%, 0% 100%, 100% 100%, 100% 41%, 90% 81%, 80% 36%, 70% 78%, 60% 27%, 50% 78%, 40% 58%, 30% 36%, 20% 45%, 10% 27%); clip-path: polygon(0% 55%, 0% 100%, 100% 100%, 100% 41%, 90% 81%, 80% 36%, 70% 78%, 60% 27%, 50% 78%, 40% 58%, 30% 36%, 20% 45%, 10% 27%);
}
Developer | Claudio Holanda |
Username | kazzkiq |
Uploaded | October 18, 2022 |
Rating | 4 |
Size | 2,960 Kb |
Views | 34,408 |
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 |
Skewed Menu | 2,322 Kb |
Fully responsive CSS3 menu | 4,399 Kb |
Dynamic result form | 4,282 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 |
CSS eye follow | Pedrocampos | 2,592 Kb |
Coming Soon | MariamMassadeh | 1,680 Kb |
Plotting Points with D3.js | Laurakelly | 31,996 Kb |
Gradients | Karpovsystems | 2,394 Kb |
TinFoil Boats | Chandralil | 4,577 Kb |
NeeilTimer | Neeilan | 2,836 Kb |
Spinners using Font Icons | Keyamoon | 3,007 Kb |
Flex Chart | James_zedd | 4,111 Kb |
Mapbox Directions with geolocation tracking | Pollardld | 5,827 Kb |
Css or Czz.. | Judag | 4,111 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!