Alien using Pure CSS
Hello Guys! In this blog, I'm going to explain to you how to make an alien using pure CSS. The alien also consists neomorphic effect. We can use this effect to showcase our creativity and put it on our portfolio. This will be a step-by-step guide including HTML and CSS. Let's get started 🚀.
Here's the HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>alien pure css - @codingtorque & @julianvelez1997 </title>
</head>
<body>
<div class="alien"></div>
</body>
</html>No output till now
Let's understand CSS Part
In the below CSS code,
- We declare a * selectors to set the font Poppins that we have imported in our head tag.
- Next we declare a body selector which consists of styles for dark mode and aligns all elements in the body to the center.
- Next we used the border effect to give the shape of an alien to the div.
- Next we used box-shadow property for the neon effect.
- Next, we used before and after pseudo selectors for creating the eyes of the alien.
body {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background: radial-gradient(circle, #181818, black);
background: radial-gradient(circle, #2a2a2a, black);
background-size: cover;
background-repeat: no-repeat;
}
.alien {
position: relative;
background-color: #252525;
width: 300px;
height: 300px;
transform: rotate(45deg);
border-top-left-radius: 200px;
border-bottom-left-radius: 200px;
border-bottom-right-radius: 50px;
border-top-right-radius: 200px;
box-shadow: 0 0 15px 15px rgba(0, 0, 0, 0.5);
}
.alien:before {
content: "";
position: absolute;
width: 80px;
height: 80px;
background-color: #0b0b0b;
border-top-left-radius: 200px;
border-bottom-right-radius: 200px;
top: 200px;
left: 100px;
transform: rotate(45deg);
}
.alien:after {
content: "";
position: absolute;
width: 80px;
height: 80px;
background-color: #0b0b0b;
border-top-left-radius: 200px;
border-bottom-right-radius: 200px;
top: 100px;
left: 200px;
transform: rotate(-45deg);
}
.alien:hover {
background: radial-gradient(circle, #a2f793, #58f03e);
box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5),
0 0 20px 20px rgba(88, 240, 62, 0.4);
} Output Till Now
Final Output
If you want me to code any project or post any specific post,
feel free to DM me at IG @code.scientist or @codingtorque
If you have any doubt or any project ideas feel free to
Contact Us
Hope you find this post helpful💖
Written by: Coding Torque | Piyush Patil
Follow us on Instagram for more projects like
this👨💻