Hey, developers! 👋 Today, I'm excited to share a simple yet effective way to create a professional card UI animations using just HTML, CSS, and Font Awesome. If you're looking to add a little extra polish to your website or project, this tutorial is perfect for you.
🚀 What You'll Learn:
How to create a clean and modern card layout
How to animate icons on hover for a more engaging UI
How to use Font Awesome to enhance your design
🎨 The Final Result:
We'll build a set of cards that animate smoothly when hovered, featuring rotating icons that scale up and change color. Perfect for showcasing services, features, or any content that needs to stand out.
🛠️ Prerequisites:
Basic knowledge of HTML and CSS
Familiarity with Font Awesome (optional)
Step 1: Setting Up the HTML
Let's start by structuring the HTML. We'll create three cards, each with an icon, a title, and a description.
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Professional Card UI with Icon Animation</title>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="card-container">
<div class="card">
<div class="card-icon">
<i class="fas fa-laptop-code"></i>
</div>
<div class="card-content">
<h3>Web Development</h3>
<p>Building responsive and modern websites with the latest technologies.</p>
</div>
<div class="card-extra-icon">
<i class="fas fa-arrow-right"></i>
</div>
</div>
<!-- Repeat the card structure for other cards -->
</div>
</body>
</html>
Step 2: Adding the CSS Styles
Next, let's style the cards using CSS. We'll apply a clean layout, add hover effects, and animate the icons.
css
Copy code
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: 'Arial', sans-serif;
background-color: #f4f7fc;
}
.card-container {
display: flex;
gap: 20px;
}
.card {
background-color: #fff;
border-radius: 12px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 300px;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
.card-icon {
font-size: 50px;
color: #007bff;
margin-bottom: 15px;
transition: transform 0.5s ease, color 0.3s ease;
}
.card:hover .card-icon {
transform: rotate(360deg);
color: #17a2b8;
}
.card-content h3 {
font-size: 1.5rem;
margin-bottom: 10px;
color: #333;
}
.card-content p {
font-size: 1rem;
color: #666;
}
.card-extra-icon {
font-size: 30px;
color: #17a2b8;
position: absolute;
bottom: 20px;
right: 20px;
opacity: 0;
transform: scale(0.5);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.card:hover .card-extra-icon {
opacity: 1;
transform: scale(1);
}
Step 3: Testing and Customizing
Finally, open the HTML file in your browser to see the cards in action. You should see the icons rotate, scale, and change color when you hover over the cards.
Feel free to customize the colors, icons, and content to match your brand or project needs. You can also add more cards by duplicating the HTML structure.
Conclusion
With just a few lines of code, you can create a stylish and interactive UI that enhances user experience. Whether you're showcasing services or highlighting features, these animated cards are sure to grab attention.
If you found this tutorial helpful, don't forget to leave a reaction! 🧡
Happy coding! 💻
shop Link : https://buymeacoffee.com/pratik1110r/extras
LinkedIn : https://www.linkedin.com/in/pratik-tamhane-583023217/
Behance : https://www.behance.net/pratiktamhane
Top comments (0)