Một số phong cách thẻ Tiêu Đề đẹp cho Website Blogspot

Xin chào các bạn, thì bài này mình xin chia sẻ một số Style thẻ tiêu đề H2, H3,... Tùy theo cách bạn áp dụng mà nó lằm ở thẻ nào nhé! Không luyên tha luyên thuyên linh ta linh tinh nữa vào nội dung bài luôn nhé... À quên xem qua Thumbnail cái mới đến nội dung bài viết.
Một số phong cách thẻ Tiêu Đề đẹp cho Website

Title Box 1

HTML và CSS
<style>
div#title-box {
    border-bottom: 2px solid #7577a9;
    margin-bottom: 40px;
    display: block;
}
#title-box h3.duy_dep_trai {
    margin: 0;
    font-size: 16px;
    line-height: 20px;
    display: inline-block;
    text-transform: uppercase;
}
#title-box h3.duy_dep_trai :after {
    content: "";
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-left: 20px solid #7577a9;
    border-bottom: 0px solid transparent;
    border-right: 0 solid transparent;
    position: absolute;
    top: 0px;
    right: -20px;
}
#title-box h3.duy_dep_trai span {
    background: #7577a9;
    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;
}
</style>
<div id='title-box'>
  <h3 class="duy_dep_trai">       
            <span class="null">Em là con gà con, bò lon ton, bơi nhong nhong</span> 
  </h3>
</div>

Title Box 2


HTML và CSS
<style>
#title-box-2 h3.duy_dep_trai :after {
content: "";
    width: 0;
    height: 0;
    border-top: 19px solid transparent;
    border-left: 15px solid #7577a9;
    border-bottom: 19px solid transparent;
    border-right: 0 solid transparent;
    position: absolute;
    top: 0px;
    right: -15px;
}
#title-box-2 h3.duy_dep_trai span {
background: #7577a9;
    padding: 10px 20px 8px 20px;
    color: white;
    position: relative;
    display: inline-block;
    margin: 0;
}
#title-box-2 h3.duy_dep_trai {
margin: 15px 0;
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase;
}
#title-box-2 hr {
    margin: -34px 0px 54px 0px;
    border: 1px solid #7577a9;
}
</style>
<div id='title-box-2'>
  <h3 class="duy_dep_trai">       
            <span>Gâu gâu gâu</span>
  </h3>
  <hr>
</div>

Title Box 3

HTML và CSS
<style>
#title-box-3 h3.duy_dep_trai span {
    background: #7577a9;
    padding: 10px 20px 8px 20px;
    color: white;
    position: relative;
    display: inline-block;
    margin: 0;
    border-radius: 23px 23px 0px 0px;
}
#title-box-3 h3.duy_dep_trai {
    margin: 15px 0;
    border-bottom: 2px solid #7577a9;
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase;
}
</style>
<div id='title-box-3'>
  <h3 class="duy_dep_trai">       
            <span>Tò tí te tò tò tò te</span>       
  </h3>
</div>

Title Box 4

HTML và CSS
<style>
#title-box-4 h3.duy_dep_trai :after {
    content: "";
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-left: 20px solid #7577a9;
    border-bottom: 0px solid transparent;
    border-right: 0 solid transparent;
    position: absolute;
    top: 0px;
    right: -20px;
}

#title-box-4 h3.duy_dep_trai :before {
    content: "";
    width: 0;
    height: 0;
    border-width: 40px 20px 0px 0px;
    border-style: solid;
    border-color: transparent;
    border-right-color: #7577a9;
    position: absolute;
    top: 0px;
    left: -20px;
}
#title-box-4 h3.duy_dep_trai span {
    background: #7577a9;
    padding: 10px 20px 8px 20px;
    color: white;
    position: relative;
    display: inline-block;
    margin: 0;

}
#title-box-4 h3.duy_dep_trai {
    text-align: center;
    margin: 45px 0;
    border-bottom: 2px solid #7577a9;
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase;
}
</style>
<div id='title-box-4'>
  <h3 class="duy_dep_trai">       
            <span>Sau cơn mưa thì trời vẫn tối</span>       
  </h3>
</div>

Title Box 5

HTML và CSS
<style>
#title-box-5 {
  text-align: center;
}
#title-box-5 h3.duy_dep_trai {
    display: inline-block;
    background: #7577a9;
    color: white;
    height: 50px;
    line-height: 50px;
    padding: 0 30px;
  width: auto;
}
</style>
<div id='title-box-5'>
  <h3 class="duy_dep_trai">       
            <span>Sau cơn mưa thì trời vẫn tối</span>       
  </h3>
</div>
Title Box 6
HTML và CSS
<style>
.title-box-6 {    position: relative;    margin: 50px 0; text-align: center;}
.title-box-6 .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;}
.title-box-6 .box-title-name:before {    content: "";    position: absolute;    border-top: 10px solid #7577a9;    border-left: 15px solid transparent;    border-bottom: 7px solid transparent;    border-right: 15px solid transparent;  left: calc(50% - 40px);
    bottom: -7px;
    width: 50px;}
.title-box-6 .box-title-name:after {    content: "";    position: absolute;    z-index: 2;    bottom: 0;    height: 9px;    width: 200px;    left: calc(50% - 100px);    border-top: 2px solid #7577a9;}
</style>
<div class="title-box-6">
               <div class="box-title-name"><span class="null">Quy trình</span> vận chuyển hàng hóa</div>
</div>

Lời Kết

Vừa trên thì là những Title Box đẹp mà do mình tìm được trên Google. Nếu các bạn có những Title Box khác đẹp thì có thể góp ý xuống dưới bài viết để mình cập nhật thêm vào bài viết nhé! Chúc các bạn vui vẻ.


Cùng tham gia bình luận bài viết này nhé!