Mỗi dịp Tết Nguyên Đán, bên cạnh việc cập nhật nội dung hoặc chương trình ưu đãi, trang trí website Tết là một cách hiệu quả để tạo không khí xuân, tăng cảm xúc tích cực cho người truy cập và giúp website trở nên gần gũi hơn.
Thay vì sử dụng những hiệu ứng nặng như pháo hoa hay animation phức tạp, nhiều webmaster hiện nay ưu tiên các code trang trí Tết nhẹ, tinh tế, dễ triển khai và không ảnh hưởng đến hiệu năng. Trong đó, lồng đèn đỏ kết hợp liễn đối là một trong những lựa chọn phổ biến và mang đậm nét văn hoá Á Đông. Nếu anh em quan tâm đến các hiệu ứng HTML CSS nhẹ, không dùng JavaScript, có thể tham khảo thêm một số hiệu ứng HTML CSS khác cho website trên TruongDevs.
Trong bài viết này, TruongDevs chia sẻ một giải pháp trang trí website Tết bằng HTML CSS, sử dụng lồng đèn có hiệu ứng phát sáng nhẹ, liễn đối chúc Tết và khả năng responsive tốt trên mọi thiết bị.
Vì sao nên trang trí website Tết?
Trang trí website theo chủ đề Tết không chỉ mang yếu tố hình thức mà còn ảnh hưởng trực tiếp đến trải nghiệm người dùng. Khi truy cập vào một website có không khí xuân, người dùng thường có cảm giác thân thiện hơn, ở lại lâu hơn và dễ ghi nhớ thương hiệu hơn.
Đối với các website bán hàng, blog cá nhân hay website chia sẻ kiến thức, trang trí Tết cho website còn giúp tạo điểm nhấn khác biệt so với giao diện ngày thường. Điều quan trọng là lựa chọn cách trang trí phù hợp, không quá rối mắt và không làm giảm tốc độ tải trang.
Giải pháp trang trí website Tết bằng lồng đèn HTML CSS
Đoạn code trang trí Tết mà TruongDevs chia sẻ trong bài viết này được xây dựng hoàn toàn bằng HTML và CSS thuần. Điều này giúp đảm bảo website vẫn giữ được hiệu năng tốt, không bị ảnh hưởng đến Core Web Vitals hay SEO.
Lồng đèn được thiết kế treo cố định hai bên màn hình, có móc treo và dây treo giống lồng đèn thật, tạo cảm giác tự nhiên. Phần thân lồng đèn sử dụng hiệu ứng phát sáng nhẹ, đủ để tạo không khí Tết nhưng không gây chói hay khó chịu cho mắt.
Điểm đặc biệt của giải pháp này nằm ở phần liễn đối. Khi người dùng rê chuột vào lồng đèn, phần tua rua sẽ ẩn đi và liễn đối chúc Tết xuất hiện đúng tại vị trí đó. Cách xử lý này giúp hiệu ứng mượt mà, hợp lý và không làm vỡ bố cục giao diện.
Ưu điểm của code trang trí Tết TruongDevs
Nhẹ, chuẩn SEO, không dùng JavaScriptt
Toàn bộ hiệu ứng chỉ sử dụng HTML và CSS, không phụ thuộc JavaScript hay thư viện bên ngoài. Điều này giúp trang trí website Tết mà không làm tăng thời gian tải trang, rất phù hợp với các website chú trọng SEO.
Responsive tốt trên mobile và tablet
Code đã được kiểm tra hiển thị trên nhiều thiết bị như iPhone, iPad Mini, iPad Air, iPad Pro và các dòng điện thoại Samsung. Trên màn hình nhỏ, lồng đèn sẽ tự động thu gọn để không che nội dung chính.
Dễ tuỳ chỉnh nội dung và phù hợp nhiều website
Anh em có thể dễ dàng thay đổi nội dung liễn đối, màu sắc hoặc kích thước lồng đèn để phù hợp với giao diện website. Giải pháp này phù hợp cho blog cá nhân, website lập trình, landing page bán hàng hoặc website doanh nghiệp nhỏ.
Hướng dẫn sử dụng code trang trí website Tết
Cách sử dụng đoạn code này khá đơn giản. Anh em chỉ cần copy toàn bộ code và dán vào widget HTML, footer hoặc header của website. Với WordPress, có thể dán vào Custom HTML block hoặc trực tiếp trong theme. Với Blogger, chỉ cần thêm một gadget HTML/Javascript là có thể sử dụng ngay.
Sau khi chèn code, anh em nên kiểm tra lại giao diện trên mobile để đảm bảo vị trí lồng đèn không che nội dung quan trọng.
Để anh em có thể áp dụng nhanh, TruongDevs chia sẻ đầy đủ code trang trí website Tết bằng HTML CSS ngay bên dưới.
Đoạn code này không dùng JavaScript, tương thích tốt với Blogger, WordPress và các website HTML thuần.
Anh em chỉ cần copy toàn bộ, dán vào widget HTML, footer hoặc header của website là có thể sử dụng ngay.
Lưu ý trước khi dùng code:
- Nên đặt code ở Footer để không ảnh hưởng nội dung chính
- Có thể chỉnh nội dung liễn đối trực tiếp trong HTML
- Sau dịp Tết nên tắt hoặc xoá code để giữ giao diện gọn gàng
<div class="truongdevs-lantern-container left-side">
<div class="truongdevs-string"></div>
<div class="truongdevs-lantern">
<div class="truongdevs-lantern-top"></div>
<div class="truongdevs-lantern-body">
<span class="truongdevs-lantern-text">Xuân</span>
</div>
<div class="truongdevs-lantern-bottom"></div>
<div class="truongdevs-tassels">
<span></span><span></span><span></span>
</div>
<div class="truongdevs-scroll">
<div class="truongdevs-scroll-text">
<span>Chúc</span>
<span>Tết</span>
<span>Đến</span>
<span>Trăm</span>
<span>Điều</span>
<span>Như</span>
<span>Ý</span>
</div>
</div>
</div>
</div>
<div class="truongdevs-lantern-container right-side">
<div class="truongdevs-string"></div>
<div class="truongdevs-lantern">
<div class="truongdevs-lantern-top"></div>
<div class="truongdevs-lantern-body">
<span class="truongdevs-lantern-text">2026</span>
</div>
<div class="truongdevs-lantern-bottom"></div>
<div class="truongdevs-tassels">
<span></span><span></span><span></span>
</div>
<div class="truongdevs-scroll">
<div class="truongdevs-scroll-text">
<span>Mừng</span>
<span>Xuân</span>
<span>Sang</span>
<span>Vạn</span>
<span>Sự</span>
<span>Thành</span>
<span>Công</span>
</div>
</div>
</div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Mr+Dafoe&family=Mea+Culpa&display=swap');
.truongdevs-lantern-container{
position:fixed;
top:0;
z-index:9999;
pointer-events:none;
transform-origin:top center;
animation:truongdevs-swing 4s ease-in-out infinite alternate;
}
.left-side{left:40px}
.right-side{right:40px;animation-delay:1s}
.truongdevs-string{
width:2px;
height:70px;
margin:0 auto;
background:linear-gradient(to bottom,#cfc09f,#b8860b);
position:relative;
}
.truongdevs-string::before{
content:'';
position:absolute;
top:-6px;
left:-4px;
width:10px;
height:10px;
border-radius:50%;
background:radial-gradient(circle,#ffd700,#b8860b);
box-shadow:0 1px 2px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.6);
}
.truongdevs-lantern{
position:relative;
pointer-events:auto;
}
.truongdevs-lantern-body{
width:120px;
height:100px;
border-radius:35px;
background:radial-gradient(circle at 30% 30%,#ff5a5a,#7a0000);
display:flex;
align-items:center;
justify-content:center;
box-shadow:
inset 0 0 12px rgba(255,200,120,.35),
0 0 10px rgba(255,140,60,.25),
0 0 20px rgba(255,120,40,.15);
animation:truongdevs-glow 3s ease-in-out infinite;
}
.truongdevs-lantern-text{
font-family:'Mr Dafoe',cursive;
font-size:36px;
color:#ffd700;
text-shadow:0 0 4px rgba(255,220,150,.8),0 0 8px rgba(255,180,100,.5);
}
.truongdevs-lantern-top,
.truongdevs-lantern-bottom{
width:60px;
height:12px;
margin:0 auto;
background:linear-gradient(90deg,#b8860b,#ffd700,#b8860b);
}
.truongdevs-lantern-top{margin-bottom:-5px}
.truongdevs-lantern-bottom{margin-top:-5px}
.truongdevs-tassels{
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%);
text-align:center;
transition:opacity .25s ease;
}
.truongdevs-tassels span{
display:inline-block;
width:4px;
height:50px;
margin:0 2px;
background:linear-gradient(to bottom,#d2302c,#ff4d4d);
border-radius:0 0 5px 5px;
animation:truongdevs-tassel-sway 2s ease-in-out infinite alternate;
}
.truongdevs-tassels span:nth-child(2){height:65px}
.truongdevs-scroll{
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%);
width:0;
opacity:0;
background:
linear-gradient(to right,rgba(255,255,255,.06),rgba(0,0,0,.15),rgba(255,255,255,.06)),
#8b0000;
border:2px solid #d4af37;
box-shadow:
0 0 0 3px #8b0000,
0 0 0 5px #d4af37,
0 6px 12px rgba(0,0,0,.4);
border-radius:2px;
overflow:visible;
transition:width .45s ease, opacity .25s ease;
}
.truongdevs-scroll::before{
content:'';
position:absolute;
top:-10px;
left:50%;
transform:translateX(-50%);
width:2px;
height:10px;
background:#ffd700;
}
.truongdevs-scroll::after{
content:'';
position:absolute;
bottom:-12px;
left:-12px;
right:-12px;
height:14px;
background:linear-gradient(to right,#8a6e2f,#ffd700,#8a6e2f);
border-radius:12px;
box-shadow:0 2px 4px rgba(0,0,0,.45);
}
.truongdevs-scroll-text{
font-family:'Mea Culpa',cursive;
font-size:26px;
color:#ffd700;
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
padding:16px 8px 20px;
line-height:1.15;
text-shadow:0 1px 1px rgba(0,0,0,.6),0 0 6px rgba(255,215,0,.4);
}
.truongdevs-lantern:hover .truongdevs-tassels{opacity:0}
.truongdevs-lantern:hover .truongdevs-scroll{width:82px;opacity:1}
@keyframes truongdevs-swing{
from{transform:rotate(-3deg)}
to{transform:rotate(3deg)}
}
@keyframes truongdevs-tassel-sway{
from{transform:rotate(2deg)}
to{transform:rotate(-2deg)}
}
@keyframes truongdevs-glow{
0%{filter:brightness(1)}
50%{filter:brightness(1.08)}
100%{filter:brightness(1)}
}
@media (max-width:430px){
.truongdevs-lantern-container{transform:scale(.55);top:-12px}
.left-side{left:-8px}
.right-side{right:-8px}
}
@media (min-width:431px) and (max-width:820px){
.truongdevs-lantern-container{transform:scale(.7);top:-10px}
.left-side{left:10px}
.right-side{right:10px}
}
@media (min-width:821px) and (max-width:1024px){
.truongdevs-lantern-container{transform:scale(.85)}
}
@media (min-width:1025px) and (max-width:1280px){
.truongdevs-lantern-container{transform:scale(.95)}
}
</style>Tuỳ chỉnh nội dung liễn đối chúc Tết
Một ưu điểm lớn của đoạn code trang trí Tết này là khả năng tuỳ chỉnh nội dung liễn rất linh hoạt. Mỗi từ trong câu chúc được đặt trong một thẻ riêng, giúp hiển thị đẹp với font thư pháp và tránh lỗi tách chữ. Font chữ sử dụng trong liễn đối được lấy từ Google Fonts , giúp hiển thị đẹp và ổn định trên mọi trình duyệt.
Anh em có thể thay đổi câu chúc thành các nội dung như “Chúc Tết Đến Trăm Điều Như Ý” hoặc “Mừng Xuân Sang Vạn Sự Thành Công” tuỳ theo mục đích sử dụng.
Lưu ý khi trang trí website Tết
Khi áp dụng các hiệu ứng trang trí, anh em nên cân nhắc mức độ vừa phải. Việc trang trí website Tết nên tập trung vào cảm xúc và thẩm mỹ, tránh làm website trở nên nặng hoặc rối mắt. Sau dịp Tết, nên tắt hiệu ứng để giữ giao diện gọn gàng và chuyên nghiệp.
Lời kết
Nếu anh em đang tìm một giải pháp trang trí website Tết vừa đẹp, vừa nhẹ và dễ sử dụng thì đoạn code trang trí Tết HTML CSS mà TruongDevs chia sẻ trong bài viết này là một lựa chọn rất đáng thử. Không cần plugin, không cần JavaScript, chỉ cần copy và sử dụng ngay.
Hy vọng bài viết này sẽ giúp website của anh em có thêm không khí xuân và tạo ấn tượng tốt hơn với người truy cập trong dịp Tết Nguyên Đán sắp tới. Nếu thấy bài viết hữu ích, anh em có thể lưu lại hoặc chia sẻ cho bạn bè cùng tham khảo. TruongDevs sẽ tiếp tục cập nhật thêm nhiều bài viết về trang trí Tết cho website, HTML, CSS và các thủ thuật lập trình hữu ích khác.
