Diễn Đàn Hỗ Trợ FM
Bạn có muốn phản ứng với tin nhắn này? Vui lòng đăng ký diễn đàn trong một vài cú nhấp chuột hoặc đăng nhập để tiếp tục.


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

Tác giả: - vào lúc:
blogger
Bài viết : 88
Points : 236
Like : 36
blogger
An toàn
bloggerMEM LV2
8/27/2017, 06:01
#1
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:

<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:

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




Admin
Bài viết : 431
Points : 820
Like : 120
Punbb
Quản trị
Status : test
AdminACP
6/20/2018, 09:06
#2
Mẫu Bất động sản

Code:

<div class="section-homepage">
<h2 style="text-align: center;"><span style="color: #339966;"><strong>www.danganhviet.com</strong></span></h2>
</div>

<style>
.section-homepage h2 {
    text-align: center;
    padding-bottom: 40px;
    color: #0b5f70;
    font-size: 28px;
    background: url(https://i91.servimg.com/u/f91/19/53/09/53/bg_con10.png) bottom center no-repeat;
}
</style>
Admin
Bài viết : 431
Points : 820
Like : 120
Punbb
Quản trị
Status : test
AdminACP
9/7/2018, 14:39
#3

Code:

<h3 class="section-title section-title-center"><b></b><span class="section-title-main">BÔNG TAI</span><b></b></h3>

<style>
.section-title.section-title-center {
    color: #232323!important;
    padding-bottom: 20px;
    background: url(https://i91.servimg.com/u/f91/19/53/09/53/styled10.png) no-repeat 50% 100%;
}
</style>
Sponsored content
#4