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

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