Overview
In this article, we’ll walk through the process of designing a visually appealing blog card using HTML and CSS, with a special focus on incorporating dynamic background animations to enhance user interaction. This project demonstrates how subtle yet impactful design elements can elevate the user experience, inspired by challenges and projects on CodePen.
Designing the Blog Card Interface
Our blog card features a clean and modern design, encapsulating an image and textual content within a flexible, responsive container. The HTML structure is straightforward, consisting of an image section and a content section, styled using CSS to achieve a sleek, polished look.
HTML Structure
Here’s the basic HTML structure for our blog card:
<div class="blog-card">
<div class="img-container">
<img src="Nature.jpg" class="nature" alt="Scenic view of mountains and sunset over Halong Bay with vibrant sky colors">
</div>
<div class="content">
<h3>The best views and nature of Vietnam</h3>
<p>Join us we delve into the beautiful and diverse landscapes that our planet has to offer. Visit Halong Bay and the nature of Vietnam!</p>
<span class="tag">Nature</span>
<div class="meta">
<span class="author">Author: Derdin Klarck</span>
<span class="date">Date: 2024-07-23</span>
</div>
</div>
</div>
Dynamic Background Animation
A key feature of this design is the animated background, which transitions through a sequence of vibrant colors. This effect is achieved using CSS animations and variables:
:root {
--color-1: #ff0000;
--color-2: #00ff00;
--color-3: #0000ff;
--color-4: #ffff00;
--color-5: #00ffff;
--text-color-1: #fff;
--text-color-2: #000000;
--text-color-3: #fff;
--text-color-4: #000000;
--text-color-5: #000000;
--meta-bg-color: rgba(0, 0, 0, 0.6);
}
.blog-card {
background-color: var(--color-1);
animation: color-flash 50s infinite;
color: var(--text-color-1);
}
@keyframes color-flash {
0%, 20% {background-color: var(--color-1);
color: var(--text-color-1);}
25%, 45% {background-color: var(--color-2);
color : var(--text-color-2);}
50%, 70% {background-color: var(--color-3);
color: var(--text-color-3);}
75%, 95% {background-color: var(--color-4);
color: var(--text-color-4);}
100% {background-color: var(--color-5);
color: var(--text-color-5);}
}
CSS Styling
Below is the CSS used to style the blog card:
.blog-card {
background-color: var(--color-1);
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: flex;
align-items: center;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
width: 90%;
max-width: 800px;
margin: 20px auto;
flex-direction: column;
justify-content: center;
background-size: cover;
animation: color-flash 50s infinite;
transform: scale(1);
position: relative;
color: var(--text-color-1);
}
.blog-card:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.blog-card .img-container {
width: 50%;
max-height: 100%;
overflow: hidden;
}
.blog-card img.nature {
width: 100%;
height: auto;
object-fit: cover;
max-height: 400px;
transition: opacity 0.3s ease-in-out;
}
.blog-card:hover img.nature {
opacity: 0.85;
}
.blog-card .content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 20px;
width: 100%;
text-align: center;
box-sizing: border-box;
}
.blog-card .tag {
background-color: #3b82f6;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
font-size: 10px;
transition: background-color 0.3s ease-in-out;
}
.blog-card .meta {
display: flex;
justify-content: space-between;
font-size: 0.8em;
color: var(--text-color-1);
background-color: var(--meta-bg-color);
padding: 5px 10px;
border-radius: 5px;
margin-top: 10px;
}
Enhancing User Experience
The animated background serves as more than just an eye-catching feature; it helps in creating a more immersive and interactive experience. Users are greeted with a lively and modern interface that makes the content more inviting. Additionally, hover effects on the card itself, such as scaling and shadow adjustments, further enhance the user experience by providing visual feedback during interactions.
Further Learning and Resources
For those looking to dive deeper into CSS animations and advanced styling techniques, the MDN Web Docs offer a comprehensive guide. You can explore how to create and manage animations, use CSS variables, and implement advanced visual effects to bring your projects to life.
Conclusion
Incorporating dynamic background animations into your web projects can significantly improve user engagement and satisfaction. By leveraging CSS animations, you can create visually captivating elements that not only look great but also enhance the overall user experience. Experiment with different animations and styles to add a unique touch to your designs and captivate your audience.
For a live demo of the blog card with dynamic animations, check out the project on gihub.
Top comments (0)