In today's digital age, user engagement is paramount. One effective way to captivate your audience and enhance their browsing experience is through captivating card animations. These dynamic elements not only add visual appeal to your website but also improve usability and interaction. In this tutorial, we'll explore how to create stunning card animations using HTML and CSS, empowering you to elevate your web design skills and create seamless connections with your users.
Today's Video Link: Watch Now!!
The Power of Card Animations
Cards are a versatile design element commonly used to display information in a visually appealing and organized manner. By adding animations to these cards, you can bring them to life and create an immersive user experience. Whether you're showcasing products, articles, or portfolio items, animated cards grab attention and encourage interaction, leading to higher user engagement and retention.
Creating Card Animations with HTML/CSS
Now, let's dive into the tutorial. Below, you'll find step-by-step instructions along with HTML and CSS code snippets to help you create your own card animations. From subtle hover effects to animated transitions, there are endless possibilities to explore. Feel free to customize the code to match your website's design and branding.
HTML Code:
<div class="parent">
<div class="card">
<div class="logo">
<span class="circle circle1"></span>
<span class="circle circle2"></span>
<span class="circle circle3"></span>
<span class="circle circle4"></span>
<span class="circle circle5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.667 31.69" class="svg">
<path id="Path_6" data-name="Path 6" d="M12.827,1.628A1.561,1.561,0,0,1,14.31,0h2.964a1.561,1.561,0,0,1,1.483,1.628v11.9a9.252,9.252,0,0,1-2.432,6.852q-2.432,2.409-6.963,2.409T2.4,20.452Q0,18.094,0,13.669V1.628A1.561,1.561,0,0,1,1.483,0h2.98A1.561,1.561,0,0,1,5.947,1.628V13.191a5.635,5.635,0,0,0,.85,3.451,3.153,3.153,0,0,0,2.632,1.094,3.032,3.032,0,0,0,2.582-1.076,5.836,5.836,0,0,0,.816-3.486Z" transform="translate(0 0)"></path>
<path id="Path_7" data-name="Path 7" d="M75.207,20.857a1.561,1.561,0,0,1-1.483,1.628h-2.98a1.561,1.561,0,0,1-1.483-1.628V1.628A1.561,1.561,0,0,1,70.743,0h2.98a1.561,1.561,0,0,1,1.483,1.628Z" transform="translate(-45.91 0)"></path>
<path id="Path_8" data-name="Path 8" d="M0,80.018A1.561,1.561,0,0,1,1.483,78.39h26.7a1.561,1.561,0,0,1,1.483,1.628v2.006a1.561,1.561,0,0,1-1.483,1.628H1.483A1.561,1.561,0,0,1,0,82.025Z" transform="translate(0 -51.963)"></path>
</svg>
</span>
</div>
<div class="glass"></div>
<div class="content">
<span class="title">Dev Area</span>
<span class="text">Create and use beautiful custom elements made with CSS by DevArea.</span>
</div>
<div class="bottom">
<div class="social-buttons-container">
<button class="social-button .social-button1">
<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" class="svg">
<path d="M 9.9980469 3 C 6.1390469 3 3 6.1419531 3 10.001953 L 3 20.001953 C 3 23.860953 6.1419531 27 10.001953 27 L 20.001953 27 C 23.860953 27 27 23.858047 27 19.998047 L 27 9.9980469 C 27 6.1390469 23.858047 3 19.998047 3 L 9.9980469 3 z M 22 7 C 22.552 7 23 7.448 23 8 C 23 8.552 22.552 9 22 9 C 21.448 9 21 8.552 21 8 C 21 7.448 21.448 7 22 7 z M 15 9 C 18.309 9 21 11.691 21 15 C 21 18.309 18.309 21 15 21 C 11.691 21 9 18.309 9 15 C 9 11.691 11.691 9 15 9 z M 15 11 A 4 4 0 0 0 11 15 A 4 4 0 0 0 15 19 A 4 4 0 0 0 19 15 A 4 4 0 0 0 15 11 z"></path>
</svg></button>
<button class="social-button .social-button2">
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="svg">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</button>
<button class="social-button .social-button3">
<svg viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg" class="svg">
<path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"></path>
</svg>
</button>
</div>
<div class="view-more">
<button class="view-more-button">View more</button>
<svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
</div>
</div>
</div>
</div>
CSS Code:
.parent {
width: 290px;
height: 300px;
perspective: 1000px;
}
.card {
height: 100%;
border-radius: 50px;
background: linear-gradient(135deg, rgb(0, 255, 214) 0%, rgb(8, 226, 96) 100%);
transition: all 0.5s ease-in-out;
transform-style: preserve-3d;
box-shadow: rgba(5, 71, 17, 0) 40px 50px 25px -40px, rgba(5, 71, 17, 0.2) 0px 25px 25px -5px;
}
.glass {
transform-style: preserve-3d;
position: absolute;
inset: 8px;
border-radius: 55px;
border-top-right-radius: 100%;
background: linear-gradient(0deg, rgba(255, 255, 255, 0.349) 0%, rgba(255, 255, 255, 0.815) 100%);
/* -webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px); */
transform: translate3d(0px, 0px, 25px);
border-left: 1px solid white;
border-bottom: 1px solid white;
transition: all 0.5s ease-in-out;
}
.content {
padding: 100px 60px 0px 30px;
transform: translate3d(0, 0, 26px);
}
.content .title {
display: block;
color: #00894d;
font-weight: 900;
font-size: 20px;
}
.content .text {
display: block;
color: rgba(0, 137, 78, 0.7647058824);
font-size: 15px;
margin-top: 20px;
}
.bottom {
padding: 10px 12px;
transform-style: preserve-3d;
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
display: flex;
align-items: center;
justify-content: space-between;
transform: translate3d(0, 0, 26px);
}
.bottom .view-more {
display: flex;
align-items: center;
width: 40%;
justify-content: flex-end;
transition: all 0.2s ease-in-out;
}
.bottom .view-more:hover {
transform: translate3d(0, 0, 10px);
}
.bottom .view-more .view-more-button {
background: none;
border: none;
color: #00c37b;
font-weight: bolder;
font-size: 12px;
}
.bottom .view-more .svg {
fill: none;
stroke: #00c37b;
stroke-width: 3px;
max-height: 15px;
}
.bottom .social-buttons-container {
display: flex;
gap: 10px;
transform-style: preserve-3d;
}
.bottom .social-buttons-container .social-button {
width: 30px;
aspect-ratio: 1;
padding: 5px;
background: rgb(255, 255, 255);
border-radius: 50%;
border: none;
display: grid;
place-content: center;
box-shadow: rgba(5, 71, 17, 0.5) 0px 7px 5px -5px;
}
.bottom .social-buttons-container .social-button:first-child {
transition: transform 0.2s ease-in-out 0.4s, box-shadow 0.2s ease-in-out 0.4s;
}
.bottom .social-buttons-container .social-button:nth-child(2) {
transition: transform 0.2s ease-in-out 0.6s, box-shadow 0.2s ease-in-out 0.6s;
}
.bottom .social-buttons-container .social-button:nth-child(3) {
transition: transform 0.2s ease-in-out 0.8s, box-shadow 0.2s ease-in-out 0.8s;
}
.bottom .social-buttons-container .social-button .svg {
width: 15px;
fill: #00894d;
}
.bottom .social-buttons-container .social-button:hover {
background: black;
}
.bottom .social-buttons-container .social-button:hover .svg {
fill: white;
}
.bottom .social-buttons-container .social-button:active {
background: rgb(255, 234, 0);
}
.bottom .social-buttons-container .social-button:active .svg {
fill: black;
}
.logo {
position: absolute;
right: 0;
top: 0;
transform-style: preserve-3d;
}
.logo .circle {
display: block;
position: absolute;
aspect-ratio: 1;
border-radius: 50%;
top: 0;
right: 0;
box-shadow: rgba(100, 100, 111, 0.2) -10px 10px 20px 0px;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
background: rgba(0, 249, 203, 0.2);
transition: all 0.5s ease-in-out;
}
.logo .circle1 {
width: 170px;
transform: translate3d(0, 0, 20px);
top: 8px;
right: 8px;
}
.logo .circle2 {
width: 140px;
transform: translate3d(0, 0, 40px);
top: 10px;
right: 10px;
-webkit-backdrop-filter: blur(1px);
backdrop-filter: blur(1px);
transition-delay: 0.4s;
}
.logo .circle3 {
width: 110px;
transform: translate3d(0, 0, 60px);
top: 17px;
right: 17px;
transition-delay: 0.8s;
}
.logo .circle4 {
width: 80px;
transform: translate3d(0, 0, 80px);
top: 23px;
right: 23px;
transition-delay: 1.2s;
}
.logo .circle5 {
width: 50px;
transform: translate3d(0, 0, 100px);
top: 30px;
right: 30px;
display: grid;
place-content: center;
transition-delay: 1.6s;
}
.logo .circle5 .svg {
width: 20px;
fill: white;
}
.parent:hover .card {
transform: rotate3d(1, 1, 0, 30deg);
box-shadow: rgba(5, 71, 17, 0.3) 30px 50px 25px -40px, rgba(5, 71, 17, 0.1) 0px 25px 30px 0px;
}
.parent:hover .card .bottom .social-buttons-container .social-button {
transform: translate3d(0, 0, 50px);
box-shadow: rgba(5, 71, 17, 0.2) -5px 20px 10px 0px;
}
.parent:hover .card .logo .circle2 {
transform: translate3d(0, 0, 60px);
}
.parent:hover .card .logo .circle3 {
transform: translate3d(0, 0, 80px);
}
.parent:hover .card .logo .circle4 {
transform: translate3d(0, 0, 100px);
}
.parent:hover .card .logo .circle5 {
transform: translate3d(0, 0, 120px);
}
Testing and Optimization
Once you've implemented the card animations, it's important to test them across various devices and browsers to ensure compatibility and responsiveness. Additionally, consider soliciting feedback from users to identify any usability issues or areas for improvement. Continuous testing and optimization are key to ensuring that your card animations enhance, rather than detract from, the user experience.
Conclusion
By incorporating captivating card animations into your website, you can create a more engaging and interactive user experience that sets you apart from the competition. Whether you're a seasoned web developer or just starting out, mastering card animations with HTML and CSS opens up a world of creative possibilities. Subscribe to our channel for more web design tutorials and tips, and let's continue to push the boundaries of web development together!
Now, armed with the knowledge and tools to create stunning card animations, it's time to unleash your creativity and elevate your website's user engagement. Let's build meaningful connections one animation at a time!
Reason to Follow Us: Stay updated with the latest web design tutorials, tips, and tricks by subscribing to our channel. Join our community of developers and enthusiasts for more coding adventures!
"Code like an artist, design like a developer. Let's craft digital experiences that leave a lasting impression."
0 Comments