Trong thời đại công nghệ hiện nay, việc tạo ra các giao diện người dùng (UI) hấp dẫn và hiện đại là điều vô cùng quan trọng. Một trong những xu hướng thiết kế nổi bật và được ưa chuộng chính là Glassmorphism – phong cách thiết kế sử dụng hiệu ứng mờ (blur) và trong suốt (transparency) để tạo nên sự thanh thoát, tinh tế cho giao diện. Đặc biệt, khi kết hợp với định dạng HTML Post Product Card theo kiểu List Cards, cùng với sự hòa quyện của màu nền gradient, bạn sẽ có được một thiết kế không chỉ bắt mắt mà còn thể hiện sự chuyên nghiệp.
Bài viết này sẽ hướng dẫn bạn cách áp dụng những kỹ thuật này để nâng cao chất lượng bài đăng sản phẩm của mình, đồng thời tạo ra một trải nghiệm người dùng tuyệt vời.
Mẫu Số 1 : HTML Làm Đẹp Trang Bài Viết Dạng List Product Card Glassmorphism [ Màu Nền Gradient Dải Màu : #fddb92 -> #d1fdff ]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glassmorphism Responsive Cards</title>
<style>
/* Import Fonts */
@import url("https://use.fontawesome.com/releases/v5.15.3/css/all.css");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");
/* General Styles */
body {
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #fddb92 0%, #d1fdff 100%);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
color: #303030;
text-align: center;
}
.container {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 20px;
text-align: justify;
color: #303030;
}
/* Cards Container Styling */
.ol-cards {
list-style-type: none;
display: flex;
flex-direction: column;
margin: 0 auto;
max-width: 45em;
padding: 2em;
gap: 2em;
counter-reset: ol-cards-counter;
}
/* Individual Card Styling */
.ol-cards li {
display: grid;
grid-template-areas:
"step title"
"step content"
"card card";
padding: 1em 2em 1em 0;
row-gap: 0.5em;
column-gap: 2em;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 15px;
backdrop-filter: blur(10px);
box-shadow: 0.5em 0.5em 1em rgba(0, 0, 0, 0.1);
counter-increment: ol-cards-counter;
text-align: left;
}
/* Step Styling */
.ol-cards li .step {
grid-area: step;
display: flex;
align-self: flex-start;
background-color: #fddb92;
border-radius: 0 50em 50em 0;
padding: 1em;
justify-content: flex-end;
box-shadow: inset 0.25em 0.25em 0.5em rgba(0, 0, 0, 0.2),
0em 0.05em rgba(255, 255, 255, 0.8);
flex: 1;
gap: 1em;
}
.ol-cards li .step::before {
content: "0" counter(ol-cards-counter);
flex: 1;
align-self: center;
color: white;
font-weight: bold;
font-size: 2em;
text-shadow: 0.025em 0.025em 0.125em rgba(0, 0, 0, 0.2);
}
/* Title Styling */
.ol-cards li .title {
grid-area: title;
color: #303030;
font-weight: bold;
}
/* Content Styling */
.ol-cards li .content {
grid-area: content;
font-size: 0.9em;
color: #303030;
}
/* Product Card Container */
.product-card {
grid-area: card;
margin-top: 1em;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 10px;
padding: 1em;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: transform 0.3s ease;
}
.product-card img {
max-width: 100%;
border-radius: 10px;
margin-bottom: 1em;
}
.product-card .product-title {
font-weight: 600;
margin-bottom: 0.5em;
}
.product-card .product-description {
font-size: 0.9em;
color: #303030;
}
.buy-button {
background-color: rgba(255, 255, 255, 0.4);
color: #000;
border: none;
padding: 10px;
text-align: center;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s ease;
}
.buy-button:hover {
background-color: rgba(255, 255, 255, 0.6);
}
/* Hover Effect */
.product-card:hover {
transform: translateY(-10px);
}
/* Responsive Design */
@media only screen and (max-width: 500px) {
.ol-cards {
padding: 1em;
}
.ol-cards li {
column-gap: 0em;
grid-template-areas:
'step title'
'content content'
'card card';
grid-template-columns: min-content auto;
padding: 1em 0em;
}
.ol-cards li .title {
padding: 0 1em;
align-self: center;
width: auto;
}
.ol-cards li .step {
font-size: 0.5em;
}
.ol-cards li .content {
padding: 0 1em;
}
}
</style>
</head>
<body>
<div class="container">
<p>Đây là đoạn văn bản ví dụ trước product card. Card này sẽ được chèn vào giữa đoạn văn bản này và có khoảng cách đều từ các cạnh của card. Văn bản này sẽ phủ kín khoảng trống ở hai bên trái và phải của card.</p>
<ol class="ol-cards alternate">
<li>
<div class="step"><i class="fab fa-codepen"></i></div>
<div class="title">Step One</div>
<div class="product-card">
<img src="https://via.placeholder.com/150" alt="Product Image 1">
<div class="product-title">Product One</div>
<div class="product-description">This is a short description of product one.</div>
<a href="#" class="buy-button">Mua Ngay</a>
</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae culpa asperiores soluta officiis iusto quasi. Odio aliquid alias explicabo deleniti?</div>
</li>
<li>
<div class="step"><i class="fab fa-github"></i></div>
<div class="title">Step Two</div>
<div class="product-card">
<img src="https://via.placeholder.com/150" alt="Product Image 2">
<div class="product-title">Product Two</div>
<div class="product-description">This is a short description of product two.</div>
<a href="#" class="buy-button">Mua Ngay</a>
</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae culpa asperiores soluta officiis iusto quasi. Odio aliquid alias explicabo deleniti?</div>
</li>
<li>
<div class="step"><i class="fab fa-html5"></i></div>
<div class="title">Step Three</div>
<div class="product-card">
<img src="https://via.placeholder.com/150" alt="Product Image 3">
<div class="product-title">Product Three</div>
<div class="product-description">This is a short description of product three.</div>
<a href="#" class="buy-button">Mua Ngay</a>
</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae culpa asperiores soluta officiis iusto quasi. Odio aliquid alias explicabo deleniti?</div>
</li>
<li>
<div class="step"><i class="fab fa-css3"></i></div>
<div class="title">Step Four</div>
<div class="product-card">
<img src="https://via.placeholder.com/150" alt="Product Image 4">
<div class="product-title">Product Four</div>
<div class="product-description">This is a short description of product four.</div>
<a href="#" class="buy-button">Mua Ngay</a>
</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae culpa asperiores soluta officiis iusto quasi. Odio aliquid alias explicabo deleniti?</div>
</li>
<li>
<div class="step"><i class="fab fa-creative-commons"></i></div>
<div class="title">Step Five</div>
<div class="product-card">
<img src="https://via.placeholder.com/150" alt="Product Image 5">
<div class="product-title">Product Five</div>
<div class="product-description">This is a short description of product five.</div>
<a href="#" class="buy-button">Mua Ngay</a>
</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae culpa asperiores soluta officiis iusto quasi. Odio aliquid alias explicabo deleniti?</div>
</li>
</ol>
<p>Đây là đoạn văn bản ví dụ sau product card. Văn bản này cũng sẽ cách đều các cạnh của card và bao quanh nó. Văn bản sẽ tiếp tục phủ kín cả trên và dưới, bên trái và bên phải của card, tạo ra một bố cục gọn gàng và rõ ràng.</p>
</div>
</body>
</html>
Kết hợp giữa thiết kế Glassmorphism và định dạng HTML Post Product Card theo kiểu List Cards với nền gradient không chỉ tạo ra giao diện hiện đại và đẹp mắt mà còn nâng cao trải nghiệm người dùng, giúp sản phẩm của bạn nổi bật hơn trong mắt khách hàng. Với những hướng dẫn chi tiết và ví dụ thực tế trong bài viết này, hy vọng bạn đã nắm bắt được cách triển khai và ứng dụng những xu hướng thiết kế tiên tiến này vào dự án của mình.
Hãy thử nghiệm và điều chỉnh để tạo ra những giao diện mang đậm dấu ấn cá nhân, thu hút và giữ chân người dùng hiệu quả hơn. Thiết kế đẹp không chỉ là về cái nhìn bên ngoài mà còn là cách bạn kết nối và tương tác với khách hàng một cách tinh tế và thông minh.
