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

[note] 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! [/note]

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

DEMO 1:

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:

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:

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:

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:

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;
}