Trang trí title website với các css bên dưới nhé!
Các kiểu html css title đẹp cho website
01: Codfe title style
1 2 3 |
<div class="cf-title-01"> <h3>CODFE TITLE STYLE 01</h3> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
/* === CODFE HEADING STYLE #1 === */ .cf-title-01 h3 { text-align:center; text-transform:uppercase; padding-bottom:5px; } .cf-title-01 h3:before { width:28px; height:5px; display:block; content:""; position:absolute; bottom:3px; left:50%; margin-left:-14px; background-color:#b80000; } .cf-title-01 h3:after { width:100px; height:1px; display:block; content:""; position:relative; margin-top:25px; left:50%; margin-left:-50px; background-color: #b80000; } |
02 Style Two
Example Tagline Text
1 2 3 4 5 |
<div class="cf-title-02"> <h3>Style Two<br /> <span>Example Tagline Text</span><br /> </h3> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/* === CODFE HEADING STYLE #2 === */ .cf-title-02 h3 { text-transform: capitalize; } .cf-title-02 h3:before { position: absolute; left: 0; bottom: 0; width: 60px; height: 2px; content: ""; background-color: #c50000; } .cf-title-02 h3 span { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 4px; line-height: 3em; padding-left: 0.25em; color: rgba(0, 0, 0, 0.4); padding-bottom: 10px; } |
021 Alternate
Example Tagline Text
1 2 3 4 5 |
<div class="cf-title-02 cf-title-alt-two"> <h3>Alternate<br /> <span>Example Tagline Text</span><br /> </h3> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
/* === CODFE HEADING STYLE #2 === */ .cf-title-02 h3 { text-transform: capitalize; } .cf-title-02 h3:before { position: absolute; left: 0; bottom: 0; width: 60px; height: 2px; content: ""; background-color: #c50000; } .cf-title-02 h3 span { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 4px; line-height: 3em; padding-left: 0.25em; color: rgba(0, 0, 0, 0.4); padding-bottom: 10px; } . cf-title-alt-two h3 { text-align:center; } . cf-title-alt-two h3:before { left:50%; margin-left:-30px; } |
03 Style Three
1 2 3 |
<div class="cf-title-03"> <h3>04 Style Three</h3> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
/* === CODFE HEADING STYLE #3 === */ .cf-title-03 h3 { font-size: 28px; font-weight: 500; letter-spacing: 0; line-height: 1.5em; padding-bottom: 15px; position: relative; } .cf-title-03 h3:before { content: ""; position: absolute; left: 0; bottom: 0; height: 5px; width: 55px; background-color: #111; } .cf-title-03 h3:after { content: ""; position: absolute; left: 0; bottom: 2px; height: 1px; width: 95%; max-width: 255px; background-color: #333; } |
04 Heading Tagline Heading Style Four
1 2 3 |
<div class="cf-title-04"> <h3><span>Heading Tagline</span> Heading <em>Style</em> Four</h3> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/* ===CODFE HEADING STYLE #4 === */ .cf-title-04 h3 { text-align: center; padding-bottom: 0.7em; } .cf-title-04 h3 span { font-weight: 300; word-spacing: 3px; line-height: 2em; padding-bottom: 0.35em; color: rgba(0, 0, 0, 0.5); } .cf-title-04 h3:before { position: absolute; left: 0; bottom: 0; width: 60px; height: 1px; content: ""; left: 50%; margin-left: -30px; background-color: #777; } |
05 css tiêu đề đẹp codfe.com
Example Tagline Text
1 2 3 4 5 |
<div class="cf-title-05"> <h3>05 css tiêu đề đẹp codfe.com <span>Example Tagline Text</span> </h3> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
/* ===CODFE HEADING STYLE #5 === */ .cf-title-05 h3 { text-align: center; font-size: 22px; font-weight: 700; color:#202020; text-transform: uppercase; word-spacing: 1px; letter-spacing:2px; } .cf-title-05 h3 span { margin-top: 40px; text-transform: none; font-size:.75em; font-weight: normal; font-style: italic; font-family: "Playfair Display","Bookman",serif; color:#999; letter-spacing:-0.005em; word-spacing:1px; letter-spacing:none; } .cf-title-05 h3:before { position: absolute; left: 0; bottom: 38px; width: 60px; height: 4px; content: ""; left: 50%; margin-left: -30px; background-color: #dfdfdf; } |
06 css tiêu đề đẹp codfe.com
Example Tagline Text
1 2 3 4 5 |
<div class="cf-title-06"> <h3>06 css tiêu đề đẹp codfe.com <span>Example Tagline Text</span> </h3> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/* ===CODFE HEADING STYLE #6 === */ .cf-title-06 h3 { text-align: center; color:#222; font-size:30px; font-weight:400; text-transform: uppercase; word-spacing: 1px; letter-spacing:2px; color:#c50000; } .cf-title-06 h3 span { line-height:2em; padding-bottom:15px; text-transform: none; font-size:.7em; font-weight: normal; font-style: italic; font-family: "Playfair Display","Bookman",serif; color:#999; letter-spacing:-0.005em; word-spacing:1px; letter-spacing:none; } .cf-title-06 h3:after, .cf-title-06 h3:before { position: absolute; left: 0; bottom: 0; width: 45px; height: 4px; content: ""; right: 45px; margin:auto; background-color: #ccc; } .cf-title-06 h3:before { background-color:#d78b8b; left:45px; width:90px; } |
07 css tiêu đề đẹp codfe.com
1 2 3 |
<div class="cf-title-07"> <h3>07 css tiêu đề đẹp codfe.com</h3> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/* ===CODFE HEADING STYLE #7 === */ .cf-title-07 h3 { text-align: center; font-size:30px; font-weight:300; color:#222; letter-spacing:1px; text-transform: uppercase; display: grid; grid-template-columns: 1fr max-content 1fr; grid-template-rows: 27px 0; grid-gap: 20px; align-items: center; } .cf-title-07 h3:after,.cf-title-07 h3:before { content: " "; display: block; border-bottom: 1px solid #c50000; border-top: 1px solid #c50000; height: 5px; background-color:#f8f8f8; } |
08 css tiêu đề đẹp codfe.com
1 2 3 |
<div class="cf-title-08"> <h3>08 css tiêu đề đẹp codfe.com</h3> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/* ===CODFE HEADING STYLE #8 === */ .cf-title-08 h3 { text-align:center; text-transform:uppercase; font-size:26px; letter-spacing:1px; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 16px 0; grid-gap: 22px; } .cf-title-08 h3:after,.cf-title-08 h3:before { content: " "; display: block; border-bottom: 2px solid #ccc; background-color:#f8f8f8; } |
09 css tiêu đề đẹp codfe.comTagline Keywords
1 2 3 |
<div class="cf-title-09"> <h3>09 css tiêu đề đẹp codfe.com<span>Tagline Keywords</span></h3> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/* ===CODFE HEADING STYLE #9 === */ .cf-title-09 h3{ text-align:center; font-size:50px; text-transform:uppercase; color:#222; letter-spacing:1px; font-family:"Playfair Display", serif; font-weight:400; } .cf-title-09 h3 span { margin-top: 5px; font-size:15px; color:#444; word-spacing:1px; font-weight:normal; letter-spacing:2px; text-transform: uppercase; font-family:"Raleway", sans-serif; font-weight:500; display: grid; grid-template-columns: 1fr max-content 1fr; grid-template-rows: 27px 0; grid-gap: 20px; align-items: center; } .cf-title-09 h3 span:after,.cf-title-09 h3 span:before { content: " "; display: block; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; height: 5px; background-color:#f8f8f8; } |
10 css tiêu đề đẹp codfe.com
1 2 3 |
<div class="cf-title-10"> <h3>10 css tiêu đề đẹp codfe.com</h3> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* ===CODFE HEADING STYLE #10 === */ .cf-title-10 h3{ font-size:34px; font-weight:500; text-transform:uppercase; } .cf-title-10 h3:before { background-color: #c50000; border-radius: 0.25rem; content: ''; display: block; height: 0.25rem; width: 42px; margin-bottom: 1.25rem; } |
11 css tiêu đề đẹp codfe.com
1 2 3 |
<div class="cf-title-11"> <h3>11 css tiêu đề đẹp codfe.com</h3> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* ===CODFE HEADING STYLE #11 === */ .cf-title-11 h3 { font-size:30px;text-align:center; line-height:1.5em; padding-bottom:45px; font-family:"Playfair Display", serif; text-transform:uppercase;letter-spacing: 2px; color:#111; } .cf-title-11 h3:before { position: absolute; left: 0; bottom: 20px; width: 60%; left:50%; margin-left:-30%; height: 1px; content: ""; background-color: #777; z-index: 4; } .cf-title-11 h3:after { position:absolute; width:40px; height:40px; left:50%; margin-left:-20px; bottom:0px; content: '�0a7'; font-size:30px; line-height:40px; color:#c50000; font-weight:400; z-index: 5; display:block; background-color:#f8f8f8; } |
12 css codfe.com
1 2 3 |
<div class="cf-title-12"> <h3>12 css codfe.com</h3> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* ===CODFE HEADING STYLE #12 === */ .cf-title-12 h3 { font-size:26px; font-weight:700; letter-spacing:1px; text-transform:uppercase; width:160px; text-align:center; margin:auto; white-space:nowrap; padding-bottom:13px; } .cf-title-12 h3:before { background-color: #c50000; content: ''; display: block; height: 3px; width: 75px; margin-bottom: 5px; } .cf-title-12 h3:after { background-color: #c50000; content: ''; display: block; position:absolute; right:0; bottom:0; height: 3px; width: 75px; margin-bottom: 0.25em; } |
13 codfe.com
1 2 3 |
<div class="cf-title-13"> <h3>13 codfe.com</h3> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/* ===CODFE HEADING STYLE #13 === */ .cf-title-13 h3 { position:relative; font-size:20px; font-weight:700; letter-spacing:0px; text-transform:uppercase; width:150px; text-align:center; margin:auto; white-space:nowrap; border:2px solid #222;padding:5px 11px 3px 11px; } .cf-title-13 h3:before, .cf-title-13 h3:after { background-color: #c50000; position:absolute; content: ''; height: 7px; width: 7px; border-radius:50%; bottom: 12px; } .cf-title-13 h3:before { left:-20px; } .cf-title-13 h3:after { right:-20px; } |
Bài viết mới:
- Lấy đường dẫn của theme hiện hành, theme con trên wordpress
- 6 thủ thuật hay với thanh Taskbar trên Windows 10
- [code] Hiển thị số người xem bài viết wordpress
- Tạo nút Read More / Read Less (Xem thêm / Ẩn nội dung) cho nội dung quá dài trong wordpress
- Những ứng dụng có thể thay thế cho Microsoft Office