Bài viết này Hotro.org 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é !
Ưu điểm mẫu banner ngang với HTML CSS
- 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.
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.
Sử dụng banner ngang HTML CSS
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://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
<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://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)
