Zalo
078 675 7979

[Hướng dẫn] làm đẹp title box với css

Chào các bạn hôm nay mình có tổng hợp 1 số tiêu đề đẹp cho website . Anh em ai có nhu cầu thì vào xem và sử dụng
Demo : Tiêu đề đẹp

Code html : Chọn tiêu đề bạn thích và thêm vào nhé

Code 1 :

Code 2 :

Code 3 :

Code 4 :

Code 5 :

Code 6 :

 

Code css :

 

 

Sẽ update thêm 1 số mẫu đẹp nữa :

Demo : 

 

Lướt web thấy có vài title box khác đẹp cho ae.

[Hướng dẫn] làm đẹp title box với css HynAB86

Code:Copy toàn bộ
<style>
div#nz-div {
border-bottom: 2px solid red;
margin-bottom: 40px;
display: block;
}
#nz-div h3.tde {
margin: 0;
font-size: 16px;
line-height: 20px;
display: inline-block;
text-transform: uppercase;
}#nz-div h3.tde :after {
content: “”;
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 20px solid #EA3A3C;
border-bottom: 0px solid transparent;
border-right: 0 solid transparent;
position: absolute;
top: 0px;
right: -20px;
}#nz-div h3.tde span {
background: #EA3A3C;
padding: 10px 20px 8px 20px;
color: white;
position: relative;
display: inline-block;
margin: 0;
}.sub-cat {
display: inline-block;
margin: 0;
line-height: 45px;
margin-left: 100px;
float: right;
}/* 2  ========================= */#nz-div-2 h3.tde :after {
content: “”;
width: 0;
height: 0;
border-top: 19px solid transparent;
border-left: 15px solid #EA3A3C;
border-bottom: 19px solid transparent;
border-right: 0 solid transparent;
position: absolute;
top: 0px;
right: -15px;
}

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

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

#nz-div-2 hr {
margin: -34px 0px 54px 0px;
border: 1px solid red;
}

/* 3  ========================= */

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

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

/* 4  ========================= */

#nz-div-4 h3.tde :after {
content: “”;
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 20px solid #EA3A3C;
border-bottom: 0px solid transparent;
border-right: 0 solid transparent;
position: absolute;
top: 0px;
right: -20px;
}

#nz-div-4 h3.tde :before {
content: “”;
width: 0;
height: 0;
border-width: 40px 20px 0px 0px;
border-style: solid;
border-color: transparent;
border-right-color: #EA3A3C;
position: absolute;
top: 0px;
left: -20px;
}

#nz-div-4 h3.tde span {
background: #EA3A3C;
padding: 10px 20px 8px 20px;
color: white;
position: relative;
display: inline-block;
margin: 0;

}

#nz-div-4 h3.tde {
text-align: center;
margin: 45px 0;
border-bottom: 2px solid #ea3a3c;
font-size: 16px;
line-height: 20px;
text-transform: uppercase;
}

/*6  ========================= */

#nz-div-6 {
text-align: center;
}

#nz-div-6 h3.tde {
display: inline-block;
background: #ea3a3c;
color: white;
height: 50px;
line-height: 50px;
padding: 0 30px;
width: auto;
}

/*5 ========================= */

#nz-div-5 h3.tde {    text-align: center;    margin: 45px 0;    font-size: 16px;    line-height: 20px;    text-transform: uppercase;}
#nz-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;}
#nz-div-5 h3.tde :before,#nz-div-5 h3.tde :after {    content: “”;    background: url(http://web.ncnncn.com/wp-content/uploads/2017/06/bgh-nz1-l.png);    width: 87px;    height: 50px;    position: absolute;    top: 19px;    z-index: -1;}
#nz-div-5 h3.tde :before {    left: -44px;    }
#nz-div-5 h3.tde :after {    transform: rotateY(180deg);    right: -44px !important;}

/*7========================= */
.nz-div-7 {    position: relative;    margin: 50px 0; text-align: center;}
.nz-div-7 .box-title-name {    font-size: 24px;    font-weight: 900;    text-transform: uppercase;    color: #333;    display: inline-block;    vertical-align: top;    position: relative;    z-index: 1;    padding-bottom: 28px;}
.nz-div-7 .box-title-name:before {    content: “”;    position: absolute;    border-top: 10px solid #00aa46;    border-left: 15px solid transparent;    border-bottom: 7px solid transparent;    border-right: 15px solid transparent;  left: calc(50% – 40px);
bottom: -7px;
width: 50px;}
.nz-div-7 .box-title-name:after {    content: “”;    position: absolute;    z-index: 2;    bottom: 0;    height: 9px;    width: 200px;    left: calc(50% – 100px);    border-top: 2px solid #00aa46;}

</style>

Code:Copy toàn bộ
<div id='nz-div'>
<h3 class="tde">
<span class="null">Em là con gà con, bò lon ton, bơi nhong nhong</span>
</h3>
<div class="sub-cat">
<span>Abc Defgh</span>
</div>
</div>
<hr>
<div id='nz-div-2'>
<h3 class="tde">
<span>Gâu gâu gâu</span>
</h3>
<hr>
</div>
<hr>
<div id=’nz-div-3′>
<h3 class=”tde”>
<span>Tò tí te tò tò tò te</span>
</h3>
</div><hr>
<div id=’nz-div-4′>
<h3 class=”tde”>
<span>Sau cơn mưa thì trời vẫn tối</span>
</h3>
</div><hr>
<div id=’nz-div-5′>  <h3 class=”tde”><span>Sau cơn mưa thì trời vẫn tối</span></h3></div><hr><div id=’nz-div-6′>
<h3 class=”tde”>
<span>Sau cơn mưa thì trời vẫn tối</span>
</h3>
</div><hr>

<div class=”nz-div-7″>
<div class=”box-title-name”><span class=”null”>Quy trình</span> vận chuyển hàng hóa</div>
</div>

 

 

 

 

Trả lời

Ý KIẾN KHÁCH HÀNG

Anh ơi tranh vẽ quá tuyệt luôn ạ, em cứ ngắm mãi không chán, có dịp lại đặt anh vẽ nữa nha. cảm ơn anh rất nhiều ạ!

 

Quỳnh Kool / Facebook

Qúa tuyệt vời bạn ơi, hơn cả sự mong đợi của mình luôn, không ngờ tranh vẽ lại đẹp hơn hình chụp luôn, mình rất hài lòng. Cảm ơn bạn rất nhiều!

Việt Anh / Facebook

Mình đặt gấp mà các anh vẫn giao rất nhanh chỉ một hai hôm. Tranh cực đẹp luôn. Cảm ơn các anh rất nhiều!

 

Đinh Minh Phương / Fakebook