Blob Maker Using HTML, CSS, and JavaScript: Step by Step
Salutations to everybody. I'm delighted you're here for the ziontutorial lesson today. We'll learn about the pie-shaped Blob Maker Step By Step Using HTML, CSS & JavaScript. The software will offer the syntax required to add that shape to the project's CSS code once we only supply the height and width. We'll use HTML, CSS, and JavaScript in today's session to complete this project.
Do you want to design a blob tool in JavaScript? blob tool are useful tools. This article will show you how to make Blob Maker Step By Step Using HTML, CSS & JavaScript
In order to build Blob Maker, we will need to arrange the list using a few HTML (Hypertext Markup Language) characteristics and components.
👉Source Code : https://bit.ly/3hXyvsQ
In order to make the Blob Maker project responsive from the user’s perspective, we will finally use JS (JavaScript).
With source code accessible for you to copy and paste into your own project, we give Blob Maker Step By Step Using HTML, CSS, & JavaScript projects using CSS.
Hopefully, you now have a general idea of the project.
HTML Code
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blob Maker | ziotutorial</title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css">
<
</head>
<body>
<div class="wrapper">
<div class="output">
<div id="blob"></div>
</div>
<div class="dimensions">
<div>
<label for="blob-height">
Height
</label>
<input type="number" value="200" id="blob-height">
</div>
<div>
<label for="blob-width">
Width
</label>
<input type="number" value="200" id="blob-width">
</div>
</div>
<div class="sliders">
<input type="range" value="30">
<input type="range" value="80">
<input type="range" value="60">
<input type="range" value="40">
</div>
<input type="text" id="css-code" readonly>
<button id="copy">Copy</button>
</div>
<!--Script-->
<script src="app.js"></script>
</body>
</html>
CSS Code
*{
padding: 0;
margin: 0;
box-sizing: border-box;
outline: none;
font-family: "Roboto Mono",monospace;
font-weight: 400;
color: #010120;
}
body{
background-color: #ffffff;
background-image: url(./bg.png );
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.wrapper{
background-color: #ffffff;
width: 45%;
min-width: 550px;
padding: 30px;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
border-radius: 8px;
}
.output{
background-color: #eef3f8;
width: 100%;
min-height: 250px;
padding: 20px 0;
overflow: hidden;
border-radius: 5px;
position: relative;
display: grid;
place-items: center;
}
blob{
height: 300px;
width: 300px;
background: rgb(94,92,122);
background: linear-gradient(90deg, rgba(94,92,122,1) 0%, rgba(9,9,121,1) 42%, rgba(0,212,255,1) 100%);
box-shadow: 15px 20px 30px rgba(0,0,0,0.15);
}
.dimensions{
display: flex;
justify-content: space-around;
width: 100%;
margin: 20px 0 40px 0;
}
label{
font-weight: 500;
}
input[type="number"]{
height: 40px;
width: 80px;
padding: 10px;
margin-top: 5px;
border: 1px solid #a0a0b0;
border-radius: 3px;
}
input[type="number"]:focus{
background-color: #f1f5fa;
border-color: #025eaa;
color: #025eaa;
}
.sliders{
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
input[type="text"]{
width: 82%;
margin-top: 50px;
padding: 10px;
font-size: 12px;
border: none;
background-color: #f1eff9;
border-radius: 3px;
}
button{
width: 12%;
margin-left: 4%;
padding: 10px 0;
background-color: #0075ff;
border: none;
cursor: pointer;
border-radius: 3px;
color: #ffffff;
font-size: 12px;
}
Javascript part 👇
👉Source Code : https://bit.ly/3hXyvsQ
After applying JavaScript its look like this
if you have any query regarding this you can comment in the comment box . Hope you like this article for more such article you can follow and visit my website Link
also you can follow me on below social media platforms too.
Top comments (0)