In this video, we will create an awesome text effect CSS only. This video on how to clip image on text using -webkit-background-clip. For a preview click on Demo If you want to get the complete source code in a zip file then click the "Fork me on GitHub" button below that will redirect you to my GitHub account where you found all my source code files. Copy Code(select code part and copy using "CTRL + C" or using R Click to mouse)🡇 HTML <! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >How to clip image on text</ title > <!-- style.css --> < link rel = "stylesheet" href = "style.css" > </ head > < body >
In this video, we will create a pie chart using chart.js. That you can use it in your next project like the admin panel or dashboard to get more impressions and a better UI UX experience.
For a preview click on Demo
This tutorial is only on Pie chart but I describe all the type of charts that in the chart.js
If you have any error or doubts click on the link and read the docs carefully Chart.js
If you want to get the complete source code in a zip file then click the "Fork me on GitHub" button below that will redirect you to my GitHub account where you found all my source code files.
Copy Code(select code part and copy using "CTRL + C" or using R Click to mouse)🡇
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pie Chart Using ChartJS</title>
<!-- style css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<canvas id="myChart" width="450" height="450"></canvas>
</div>
<!-- chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- config/setup -->
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['HTML', 'CSS', 'JAVASCRIPT'],
datasets: [{
label: '# of Votes',
data: [10, 9, 7],
backgroundColor: [
'#f2672e',
'#30aadd',
'#f2bf26'
],
borderWidth: 0
}]
}
});
</script>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
min-height: 100vh;
background-color: #b1e7ef;
display: flex;
justify-content: center;
align-items: center;
}
Fork me on GitHub
Click on download zip to download complete source code in zip file.
Subscribe to me on YouTube
Like & Comment on my video on YouTube & press the bell icon to get notification first.
Follow me on Instagram
Comment down any query if you have.
Next video for blog related
ReplyDelete