Bài viết này Hocban.vn chia sẻ đến bạn mẫu banner ngang HTML CSS responsive đẹp mắt trên nhiều kích thước màn hình. Bạn nào thấy ưng thì copy về mà dùng nhé !
Phương án sử dụng banner này giúp giải quyết vấn đề các website sử dụng banner bằng hình ảnh truyền thống bị quá thô trên giao diện máy tính hoặc thông điệp banner quá nhỏ, không đọc được trên di động.
Các nhu cầu có thể sử dụng banner này như: Chèn quảng cáo vào header của website, chèn bên trong bài viết bằng các plugin chèn ads (đầu, giữa, cuối bài viết), chèn vào footer với wiidget HTML CSS rộng rãi.
Ưu điểm mẫu banner ngang với HTML CSS của Hocban.vn
- Một đoạn code HTML CSS duy nhất, bạn chỉ cần copy và chèn vào widget HTML CSS hoặc khung quảng cáo ở đầu, giữa, cuối bài viết.
- Hiển thị khoa học trên các kích thước màn hình, tiêu biểu là trên di động và desktop. Khi trên desk top banner sẽ hiển thị theo chiều ngang. Còn trên di động banner sẽ hiển thị theo chiều dọc. Điều này khiến cho dù kích thước màn hình nào thì thông điệp quảng cáo vẫn hiển thị rõ ràng.
Sử dụng banner ngang HTML CSS của Hocban.vn
Banner với hình ảnh
Rất đơn giản, trên WordPress bạn tạo mới một widget HTML CSS (có độ rộng mà bạn thấy là hiển thị ngang oke), tiếp theo copy dán đoạn code bên dưới vào. Thay lại link ảnh và nội dung bên trong theo ý bạn nữa là được.
<div class="custom-banner">
<div class="banner-image">
<img src="https://template.canva.com/EAGhnrUT1Io/1/0/1600w-uxmbUNVs0jA.jpg" alt="Banner Image">
</div>
<div class="banner-text">
<span class="banner-title">Khám phá sản phẩm mới!</span>
<p>Ưu đãi đặc biệt chỉ trong hôm nay. Nhanh tay đặt hàng để nhận khuyến mãi hấp dẫn!</p>
<a href="https://2021.hocban.vn/link-mua">Mua ngay</a>
</div>
</div>
<style>
div.custom-banner {
display: flex;
align-items: center;
max-width: 1024px;
height: auto;
background-color: #ffffff;
border: 1px solid #e0e0e0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
overflow: hidden;
margin: 20px auto;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
transition: transform 0.2s ease;
z-index: 10;
}
div.custom-banner:hover {
transform: translateY(-2px);
}
div.custom-banner .banner-image {
flex-shrink: 0;
height: 100%;
width: 312px;
}
div.custom-banner .banner-image img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
margin: 0;
min-width: 312px;
}
div.custom-banner .banner-text {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px;
padding-left: o;
}
div.custom-banner .banner-text .banner-title {
font-size: 130%;
font-weight: 600;
line-height: 1.3;
margin: 0;
color: #1a1a1a;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
div.custom-banner .banner-text p {
font-size: 87%;
font-weight: normal;
line-height: 1.4;
margin: 4px 0 0;
color: #4a4a4a;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
div.custom-banner .banner-text a {
display: inline-block;
margin-top: 8px;
padding: 8px 16px;
background-color: #004aad;
color: #ffffff;
text-decoration: none;
border-radius: 8px;
font-size: 12px;
font-weight: 500;
transition: background-color 0.2s ease;
align-self: flex-start;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
div.custom-banner .banner-text a:hover {
background-color: #003780;
}
@media (max-width: 500px) {
div.custom-banner {
flex-direction: column;
height: auto;
padding: 0;
}
div.custom-banner .banner-image {
width: 100%;
}
div.custom-banner .banner-image img {
width: 100%;
height: auto; /* 120px (mobile content height) + 20% */
object-fit: contain;
margin: 0;
min-width: 0;
}
div.custom-banner .banner-text {
padding: 25px;
padding-left: 25px;
text-align: left;
align-items: initial;
}
div.custom-banner .banner-text .banner-title {
font-size: 120%;
white-space: normal;
}
div.custom-banner .banner-text p {
font-size: 80%;
-webkit-line-clamp: 3;
}
div.custom-banner .banner-text a {
padding: 8px 16px;
align-self: self-end;
}
}
</style>
Banner với video
Nếu bạn cần nhúng video thì sử dụng code HTML CSS bên dưới, sau đó thay link video của bạn cho link video mình chèn mẫu là được.
<div class="custom-banner">
<div class="banner-image">
<video autoplay muted loop>
<source src="https://template.canva.com/EAGJP2pziIk/2/0/800w-uY3P7LYx4Vc.mp4" type="video/mp4">
Trình duyệt của bạn không hỗ trợ video.
</video>
</div>
<div class="banner-text">
<span class="banner-title">Khám phá sản phẩm mới!</span>
<p>Ưu đãi đặc biệt chỉ trong hôm nay. Nhanh tay đặt hàng để nhận khuyến mãi hấp dẫn!</p>
<a href="https://2021.hocban.vn/link-mua">Mua ngay</a>
</div>
</div>
<style>
div.custom-banner {
display: flex;
align-items: center;
max-width: 1024px;
height: auto;
background-color: #ffffff;
border: 1px solid #e0e0e0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
overflow: hidden;
margin: 20px auto;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
transition: transform 0.2s ease;
z-index: 10;
}
div.custom-banner:hover {
transform: translateY(-2px);
}
div.custom-banner .banner-image {
flex-shrink: 0;
height: 100%;
width: 312px;
margin-right: 5%;
}
div.custom-banner .banner-image video {
width: 100%;
height: auto;
object-fit: contain;
display: block;
margin: 0;
min-width: 312px;
}
div.custom-banner .banner-text {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px;
padding-left: 0;
}
div.custom-banner .banner-text .banner-title {
font-size: 130%;
font-weight: 600;
line-height: 1.3;
margin: 0;
color: #1a1a1a;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
div.custom-banner .banner-text p {
font-size: 87%;
font-weight: normal;
line-height: 1.4;
margin: 4px 0 0;
color: #4a4a4a;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
div.custom-banner .banner-text a {
display: inline-block;
margin-top: 8px;
padding: 8px 16px;
background-color: #004aad;
color: #ffffff;
text-decoration: none;
border-radius: 8px;
font-size: 12px;
font-weight: 500;
transition: background-color 0.2s ease;
align-self: flex-start;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
div.custom-banner .banner-text a:hover {
background-color: #003780;
}
@media (max-width: 500px) {
div.custom-banner {
flex-direction: column;
height: auto;
padding: 0;
}
div.custom-banner .banner-image {
width: 100%;
}
div.custom-banner .banner-image video {
width: 100%;
height: AUTO;
object-fit: contain;
margin: 0;
min-width: 0;
}
div.custom-banner .banner-text {
padding: 25px;
padding-left: 25px;
text-align: left;
align-items: left;
}
div.custom-banner .banner-text .banner-title {
font-size: 120%;
white-space: normal;
}
div.custom-banner .banner-text p {
font-size: 80%;
-webkit-line-clamp: 3;
}
div.custom-banner .banner-text a {
padding: 8px 16px;
align-self: self-end;
}
}
</style>
Bạn nào có nhu cầu sử dụng banner dọc (banner đứng) thì tham khảo bài viết trước đó của mình: Mẫu banner quảng cáo HTML CSS responsive (kiểu dọc)
