In the world of web development, creating visually captivating elements can significantly enhance the user experience. One such element is the 3D Ethereum logo, which not only looks impressive but also showcases your skills in HTML and CSS. In this article, we’ll explore how to create a 3D Ethereum logo that responds to user interactions, adding an interactive and modern touch to your website.
Why Create a 3D Ethereum Logo?
Ethereum, as one of the leading blockchain technologies, has a recognizable logo that symbolizes innovation and decentralization. By creating a 3D version of this logo, you can make your website stand out, particularly if it is related to cryptocurrency, blockchain technology, or fintech. This tutorial will help you enhance your site’s visual appeal and demonstrate your proficiency in front-end development.
The Power of HTML and CSS
HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the building blocks of web design. HTML provides the structure of the page, while CSS allows you to control the layout and style. When combined creatively, they can produce stunning visual effects, such as the 3D Ethereum logo we’ll discuss.
Key Concepts Used in This Project
To create the 3D Ethereum logo, we’ll leverage several advanced CSS techniques, including:
- CSS Transformations: We’ll use
rotate,translate, andperspectiveproperties to manipulate the appearance of the logo, giving it a three-dimensional look. - CSS Animations: Adding animations will make the logo respond to user interactions, creating a dynamic and engaging experience.
- Positioning and Layers: By strategically positioning elements and using layers, we can build a complex 3D structure from simple shapes.
Step-by-Step Guide
- Setting Up the HTML Structure: We’ll start with a basic HTML structure to hold our logo elements. This will include divs for each part of the logo.
- Styling with CSS: Next, we’ll apply styles to these elements. This includes defining their size, position, and appearance. Using CSS transformations, we’ll create the illusion of depth.
- Adding Animations: Finally, we’ll add hover effects and animations to make the logo interactive. This will involve keyframes and transition properties in CSS.
Why This Approach Works
By using pure HTML and CSS, this approach ensures that your 3D Ethereum logo is lightweight and performs well across different browsers and devices. There’s no need for JavaScript or external libraries, making it a clean and efficient solution.
Copy the Code
To help you get started, you can copy the complete code for this 3D Ethereum logo below. Simply paste it into your HTML and CSS files, and you’re ready to go. This code is fully customizable, so feel free to tweak it to fit your design needs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ethereum Logo</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300" rel="stylesheet">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: 'Roboto', sans-serif;
}
h1 {
font-size: 110px;
font-weight: 100;
letter-spacing: 30px;
}
h3 {
margin: 0;
font-weight: 300;
line-height: 24px;
}
#space {
text-align: center;
}
.elogo {
position: relative;
width: 400px;
height: 400px;
transform-style: preserve-3d;
transform-origin: 110px 110px 0;
transform: perspective(400px) rotateY(46deg) rotateX(-5deg) rotateZ(-5deg);
margin: auto;
}
.elogo:hover {
animation: aniether 6s infinite;
}
.trif {
position: absolute;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
.u1 {
transform: translateZ(50px) rotateX(23.5deg);
border-bottom: 250px solid rgba(50, 50, 51, 0.8);
}
.u2 {
transform: rotateY(90deg) translateZ(50px) rotateX(23.5deg);
border-bottom: 250px solid rgba(50, 50, 51, 0.6);
}
.u3 {
transform: rotateY(180deg) translateZ(50px) rotateX(23.5deg);
border-bottom: 250px solid rgba(50, 50, 51, 0.3);
}
.u4 {
transform: rotateY(-90deg) translateZ(50px) rotateX(23.5deg);
border-bottom: 250px solid rgba(50, 50, 51, 0.3);
}
.ct {
width: 200px;
height: 200px;
transform: rotateX(-90deg) translateZ(140px);
background-color: rgba(60, 60, 61, 1);
}
.l1 {
transform: translateY(55px) translateZ(50px) rotateX(156.5deg);
border-bottom: 250px solid rgba(50, 50, 51, 0.85);
}
.l4 {
transform: translateY(55px) rotateY(-90deg) translateZ(50px) rotateX(156.5deg);
border-bottom: 250px solid rgba(50, 50, 51, 0.45);
}
@keyframes aniether {
20% { transform: perspective(400px) rotateY(46deg); }
30% { transform: perspective(400px) rotateY(10deg); }
50% { transform: perspective(400px) rotateY(46deg); }
60% { transform: perspective(400px) rotateY(80deg); }
80% { transform: perspective(400px) rotateY(46deg); }
100% { transform: perspective(400px) rotateY(46deg) rotateX(-5deg) rotateZ(-5deg); }
}
</style>
</head>
<body>
<div id="space">
<h3>Hover over ethereum logo.</h3>
<div class="elogo">
<div class="trif u1"></div>
<div class="trif u2"></div>
<div class="trif u3"></div>
<div class="trif u4"></div>
<div class="ct"></div>
<div class="trif l1"></div>
<div class="trif l4"></div>
</div>
<h1>ethereum</h1>
</div>
</body>
</html>