3K
Apple logo design with HTML and CSS
Hello, guys welcome to techmidpoint tutorial. In this tutorial, I am going to show you How to make an apple logo design with HTML and CSS. We can design a logo without using other application software. The Apple logo can be designed using HTML and CSS.
The CSS also uses border-radius and position properties to create the rounded shapes of the apple and its components.
It’s important to note that this is a simple example, and the design of the apple logo can be more complex. Also, this is just one way to create the Apple logo using HTML and CSS, and there might be other ways to achieve the same result.
Here is an example of how it can be done:
HTML
<!DOCTYPE html>
<html>
<head>
<title> Apple logo design with HTML and CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="apple"></div>
</div>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
background: #000;
}
.apple {
left:50%;
top:50%;
position:absolute;
transform:translate(-50%,-50%);
background:#fff;
width: 208px;
height: 198px;
position: absolute;
border-radius: 35% 35% 41% 41% / 42% 42% 75% 75%;
}
.apple:before {
background: #fff;
content: "";
width: 55px;
height: 55px;
position: absolute;
margin: -51px 0 0 100px;
border-radius: 100px 0;
z-index: 5;
}
.apple:after {
background: #000;
content: "";
width: 90px;
height: 90px;
position: absolute;
margin: 28px 0 0 174px;
border-radius: 50%;
transform: rotate (-53deg);
z-index: 4;
box-shadow: -127px -109.5px 0 #000,
-118px -107px 0 #000,
-115.5px -102.5px 0 #000,
-105.5px -109.5px 0 #000,
-105px -109.5px 0 #000,
-129px 166px 0 #000,
-107.5px 166px 0 #000,
-119px 161px 0 #000;
}
For More Tutorials Please Click Here
