Chia sẻ Top 5 mẫu tiêu đề đẹp dùng cho website
Huy Đạt 1 tháng trước

Chia sẻ Top 5 mẫu tiêu đề đẹp dùng cho website

Trên đây là top 5 mẫu tiêu đề dùng cho website mà mình sưu tầm được, hy vọng sẽ giúp các bạn trang trí cho website của mình thêm đẹp và chuyên nghiệp hơn. Nếu thấy hữu ích hãy thả tim và để lại bình luận ở phía dưới để mình biết nhé. Thanks!

Xem thêm: Chia sẻ khóa học trang trí website bằng CSS

DEMO 1: 

chia-se-top-5-mau-tieu-de-dep-dung-cho-website

HTML:

<div id='nhd-div'>
<h3 class="tde"> 
<span class="null">Mẫu tiêu đề đẹp dùng cho website: Số 1 </span> 
</h3>
<div class="sub-cat">
   <span>giày dép</span>
   <span>Túi xách</span>
   <span>Ví da</span>
   <span>Đồng hồ</span>
   <span>Thắt lưng</span>
</div>
</div>

CSS:

* {
font-family: "Play", sans-serif;
}

div#nhd-div {
border-bottom: 2px solid #2ecc71;
margin-bottom: 40px;
display: block;
}

#nhd-div h3.tde {
margin: 0;
font-size: 16px;
line-height: 20px;
display: inline-block;
text-transform: uppercase;
}

#nhd-div h3.tde :after {
content: "";
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 20px solid #2ecc71;
border-bottom: 0px solid transparent;
border-right: 0 solid transparent;
position: absolute;
top: 0px;
right: -20px;
}

#nhd-div h3.tde span {
background: #2ecc71;
padding: 10px 20px 8px 20px;
color: white;
position: relative;
display: inline-block;
margin: 0;
}

.sub-cat {
color: #2ecc71;
display: inline-block;
margin: 0;
line-height: 45px;
margin-left: 100px;
float: right;
}

DEMO 2:

nguyenhuydat chia se top 5 mau tieu de dep dung cho website 02

HTML:

<div id='nhd-div-2'>
<h3 class="tde"> 
<span>MẪU TIÊU ĐỀ ĐẸP DÙNG CHO WEBSITE: SỐ 2</span>
</h3>
</div>

CODE:

* {
font-family: "Play", sans-serif;
}
#nhd-div-2 h3.tde :after {
content: "";
width: 0;
height: 0;
border-top: 19px solid transparent;
border-left: 15px solid #3498db;
border-bottom: 19px solid transparent;
border-right: 0 solid transparent;
position: absolute;
top: 0px;
right: -15px;
}

#nhd-div-2 h3.tde span {
background: #3498db;
padding: 11px 20px 9px 20px;
color: white;
position: relative;
display: inline-block;
margin: 0;
}

#nhd-div-2 h3.tde {
margin: 15px 0;
font-size: 16px;
line-height: 20px;
text-transform: uppercase;
}

#nhd-div-2 hr {
margin: -34px 0px 54px 0px;
border: 1px solid #3498db;
}

 

DEMO 3:

nguyenhuydat chia se top 5 mau tieu de dep dung cho website 03 e1656508797807

HTML:

<div id='nhd-div-2'>
<h3 class="tde addicon"> 
<span>MẪU TIÊU ĐỀ ĐẸP DÙNG CHO WEBSITE:SỐ 3</span>
</h3>
<hr>
</div>

CODE:

* {
font-family: "Play", sans-serif;
}
#nhd-div-2 h3.tde :after {
content: "";
width: 0;
height: 0;
border-top: 19px solid transparent;
border-left: 15px solid #3498db;
border-bottom: 19px solid transparent;
border-right: 0 solid transparent;
position: absolute;
top: 0px;
right: -15px;
}

#nhd-div-2 h3.tde span {
background: #3498db;
padding: 11px 20px 9px 20px;
color: white;
position: relative;
display: inline-block;
margin: 0;
}

#nhd-div-2 h3.tde {
margin: 15px 0;
font-size: 16px;
line-height: 20px;
text-transform: uppercase;
}

#nhd-div-2 hr {
margin: -34px 0px 54px 0px;
border: 1px solid #3498db;
}
#nz-div-2, #nz-div-2 h3.tde { display: block;}
#nz-div-2 h3.addicon span { margin: 0 0 0 41px;}
h3.addicon:before {
content: "\f036";
position: absolute;
display: inline-block;
width: 40px;
text-align: center;
z-index: 1;
font-family: FontAwesome;
font-size: 20px;
line-height: 40px;
background: #b20000;
color: #fff;
border-right: 1px solid #fff;
}

DEMO 4:

nguyenhuydat chia se top 5 mau tieu de dep dung cho website 04

HTML:

<div id='nhd-div-3'>
<h3 class="tde"> 
<span>MẪU TIÊU ĐỀ ĐẸP DÙNG CHO WEBSITE:SỐ 4</span> 
</h3>
</div>

CSS:

* {
font-family: "Play", sans-serif;
}

#nhd-div-3 h3.tde span {
background: #e74c3c;
padding: 10px 20px 8px 20px;
color: white;
position: relative;
display: inline-block;
margin: 0;
border-radius: 23px 23px 0px 0px;
}

#nhd-div-3 h3.tde {
margin: 15px 0;
border-bottom: 2px solid #e74c3c;
font-size: 16px;
line-height: 20px;
text-transform: uppercase;
}

DEMO 5:

nguyenhuydat chia se top 5 mau tieu de dep dung cho website 05

HTML:

<div id='nhd-div-5'>  <h3 class="tde"><span>MẪU TIÊU ĐỀ ĐẸP DÙNG CHO WEBSITE:SỐ 5</span></h3></div>

CSS:

* { font-family: "Play", sans-serif; }

#nhd-div-5 {
text-align: center;
}

#nhd-div-5 h3.tde {
text-align: center;
margin: 45px 0;
font-size: 16px;
line-height: 20px;
text-transform: uppercase;
}

#nhd-div-5 h3.tde span {
background: #8cc63f;
height: 50px;
line-height: 50px;
padding: 0px 20px;
color: white;
position: relative;
display: inline-block;
margin: 0;
z-index: 45;
border-radius: 10px 10px 0px 0px;
border: 1px solid #8bb54b;
}

#nhd-div-5 h3.tde :before,
#nhd-div-5 h3.tde :after {
content: "";
background: url(https://i.ibb.co/jTWPGWF/bgh-nhd-01.png);
width: 87px;
height: 50px;
position: absolute;
top: 19px;
z-index: -1;
}
#nhd-div-5 h3.tde :before {
left: -44px;
}
#nhd-div-5 h3.tde :after {
transform: rotateY(180deg);
right: -44px !important;
}
5/5 - (1 bình chọn)
394 lượt xem | 2 bình luận
Chào mọi người,mình là Đạt, mình xây dựng Blog nho nhỏ này với hy vọng ghi lại những kiến thức đã học, quá trình trải nghiệm để chia sẻ với mọi người cũng như nhìn lại được quá trình của mình.
  1. Quỳnh

    rất hữu ích, cảm ơn bạn



Bình luận

https://nguyenhuydat.com
Huy Đạt 1 tháng trước
https://nguyenhuydat.com
harry 2 tháng trước
bạn có dịch vụ bảo vệ trang web bị hack chuyển hướng không ạh
https://nguyenhuydat.com
Huy Đạt 2 tháng trước
Cảm ơn bạn, hy vọng bài viết có thể giúp ích được cho công việc của bạn <3
https://nguyenhuydat.com
Kiều 3 tháng trước
tuyệt vời, cảm ơn bạn cho mình biết đến khái niệm này
https://nguyenhuydat.com
Quỳnh 5 tháng trước
rất hữu ích, cảm ơn bạn
https://nguyenhuydat.com
Huy Đạt 6 tháng trước
Cảm ơn bạn, hy vọng khóa học sẽ giúp ích cho cv của bạn :))
https://nguyenhuydat.com
Quỳnh 6 tháng trước
Cảm ơn bạn nhé, đúng thứ mình đang cần
https://nguyenhuydat.com
HƯƠNG 7 tháng trước
bài viết hay và bổ ích lắm
https://nguyenhuydat.com
Huy Đạt 7 tháng trước
Cảm ơn bạn nhé
https://nguyenhuydat.com
Hương Phạm 7 tháng trước
Hay quá, đúng thứ mình đang tìm kiếm