Tìm theo từ khóa
Generic filters
Exact matches only
Trang chủ › Lập trình Wordpress › Thủ thuật › CSS › 14 kiểu html css title đẹp cho website của bạn thêm chuyên nghiệp
CSS, Tiêu đề (Title css)

14 kiểu html css title đẹp cho website của bạn thêm chuyên nghiệp

Aiken Trung Leave a comment 18851 Views Xem & chỉnh code online


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

<div class="cf-title-01">
  <h3>CODFE TITLE STYLE 01</h3>
</div>

 

/* === 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

<div class="cf-title-02">
<h3>Style Two<br />
    <span>Example Tagline Text</span><br />
  </h3>
</div>

 

/* === 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

<div class="cf-title-02 cf-title-alt-two">
<h3>Alternate<br />
    <span>Example Tagline Text</span><br />
  </h3>
</div>

/* === 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

<div class="cf-title-03">
<h3>04 Style Three</h3>
</div>

 

/* === 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

<div class="cf-title-04">
  <h3><span>Heading Tagline</span> Heading <em>Style</em> Four</h3>
</div>

 

/* ===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

<div class="cf-title-05">
  <h3>05 css tiêu đề đẹp codfe.com
    <span>Example Tagline Text</span>
  </h3>
</div>

 

/* ===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

<div class="cf-title-06">
  <h3>06 css tiêu đề đẹp codfe.com
    <span>Example Tagline Text</span>
  </h3>
</div>

 

/* ===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

<div class="cf-title-07">
  <h3>07 css tiêu đề đẹp codfe.com</h3>
</div>

 

/* ===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

<div class="cf-title-08">
  <h3>08 css tiêu đề đẹp codfe.com</h3>
</div>

 

/* ===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

<div class="cf-title-09">
  <h3>09 css tiêu đề đẹp codfe.com<span>Tagline Keywords</span></h3>
</div>

 

/* ===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

<div class="cf-title-10">
  <h3>10 css tiêu đề đẹp codfe.com</h3>
</div>

 

/* ===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

<div class="cf-title-11">
  <h3>11 css tiêu đề đẹp codfe.com</h3>
</div>

 

/* ===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

<div class="cf-title-12">
  <h3>12 css codfe.com</h3>
</div>
/* ===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

<div class="cf-title-13">
  <h3>13 codfe.com</h3>
</div>
/* ===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;
}

 

5/5 - (3 bình chọn)
Bài viết mới:

Bài viết cùng chủ đề:

Aiken Trung

Hệ thống, đúc kết lại những gì mình học và làm rồi chia sẻ

3 2 đánh giá
Đánh giá bài viết
Theo dõi
Thông báo của
guest
0 Góp ý
Mới nhất
Cũ nhất Được bỏ phiếu nhiều nhất
Bạn phải là thành viên mới có thể lưu code! Đăng ký thành viên



    Vui lòng nhập email để nhận code!

      0
      Rất thích suy nghĩ của bạn, hãy bình luận.x