Tìm theo từ khóa
Generic filters
Exact matches only
Trang chủ › Lập trình Wordpress › Thủ thuật › CSS › Các mẫu tiêu đề đẹp dùng cho web
CSS, Thủ thuật, Tiêu đề (Title css)

Các mẫu tiêu đề đẹp dùng cho web

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


Các mẫu tiêu đề website đẹp mình sưu tầm và hệ thống lại để tiện tra cứu sử dụng khi cần

MS01: BÁCH HÓA ONLINE

Chăm sóc cơ thểThược phẩm khôĐồ uốngXem tất cả »

Code

<div class="cf-header"><i></i>
	<h3 class="cf-left-title pull-left">BÁCH HÓA ONLINE</h3>
	<div class="cf-right-link pull-right">
		<a href="#">Chăm sóc cơ thể</a><a href="#">Thược phẩm khô</a><a href="#">Đồ uống</a><a class="cf-more" href="#">Xem thêm</a>
	</div>
</div>

Css

/* codfe.com - code 1 */
.cf-header {
	border-top:solid 1px #0056a8;
}
.cf-left-title {
	width:auto;
	background:#0056a8;
	color:#fff;
	line-height:42px;
	font-size:18px;
	position:relative;
	margin:0;
	padding-left:50px;
	
}
.pull-left {
	float:left;
}
.pull-left {
	margin-left:0 !important;
}
.cf-left-title a {
	color:#fff;
}
.cf-left-title:after {
 border: 17px solid transparent;
 border-left-color: #0056a8;
 border-bottom-color: #0056a8;
 position: absolute;
 top: 0;
 left: 100%;
 content: "";	
}


.pull-right {
	float:right;
	margin-right:0 !important;
}

.cf-right-link a:first-child {
	margin-left:0;
}

.cf-right-link a {
	color:#555;
	font-size:14px;
	margin-left:15px;
}

.cf-right-link a.cf-more,.cf-right-link a:hover {
	color:#0056a8;
}

.cf-right-link a.cf-more:after {
	content:"f101";
	font-family:FontAwesome;
	margin-left: 4px;
}

.cf-header i {
    background: #3e2520 url(https://duan.codfe.com/2022/testcode/wp-content/uploads/2022/04/codfe-logo.png) top 5px left 5px no-repeat;
    background-size: 32px 32px;
}
.cf-header i {
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 42px;
	color: #fff;
	text-align: center;
	line-height: 42px;
	background-color: #3e2520;
	z-index:1;
}

 

 

MS01: BÁCH HÓA ONLINE

Chăm sóc cơ thểThược phẩm khôĐồ uốngXem tất cả »

Code

<div class="cf-header"><i></i>
	<h3 class="cf-left-title pull-left">BÁCH HÓA ONLINE</h3>
	<div class="cf-right-link pull-right">
		<a href="#">Chăm sóc cơ thể</a><a href="#">Thược phẩm khô</a><a href="#">Đồ uống</a><a class="cf-more" href="#">Xem thêm</a>
	</div>
</div>

Css

/* codfe.com - code 1 */
.cf-header {
	border-top:solid 1px #0056a8;
}
.cf-left-title {
	width:auto;
	background:#0056a8;
	color:#fff;
	line-height:42px;
	font-size:18px;
	position:relative;
	margin:0;
	padding-left:50px;
	
}
.pull-left {
	float:left;
}
.pull-left {
	margin-left:0 !important;
}
.cf-left-title a {
	color:#fff;
}
.cf-left-title:after {
	position:absolute;
	content:"";
	right: -42px;
	border: 21px solid transparent;
	border-top: 21px solid #0056a8;
	border-left: 21px solid #0056a8;	
}


.pull-right {
	float:right;
	margin-right:0 !important;
}

.cf-right-link a:first-child {
	margin-left:0;
}

.cf-right-link a {
	color:#555;
	font-size:14px;
	margin-left:15px;
}

.cf-right-link a.cf-more,.cf-right-link a:hover {
	color:#0056a8;
}

.cf-right-link a.cf-more:after {
	content:"f101";
	font-family:FontAwesome;
	margin-left: 4px;
}

.cf-header i {
    background: #3e2520 url(https://duan.codfe.com/2022/testcode/wp-content/uploads/2022/04/codfe-logo.png) top 5px left 5px no-repeat;
    background-size: 32px 32px;
}
.cf-header i {
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 42px;
	color: #fff;
	text-align: center;
	line-height: 42px;
	background-color: #3e2520;
	z-index:1;
}

 

MS02: ĐỒ DA CAO CẤP

Thắt lưng da cá sấuVí da cá sấuVí da đà điểuXem tất cả

Code

<div class="clearfix vi-header">
	<h3 class="vi-left-title-1 pull-left"><a href="/danh-muc/do-da-cao-cap/"><i class="fa fa-address-card"></i> MS02: ĐỒ DA CAO CẤP </a></h3>
	<div class="vi-right-link pull-right">
		<a href="/danh-muc/do-da-cao-cap/that-lung-da-ca-sau">Thắt lưng da cá sấu</a><a href="/danh-muc/do-da-cao-cap/vi-da-ca-sau">Ví da cá sấu</a><a href="/danh-muc/do-da-cao-cap/vi-da-da-dieu">Ví da đà điểu</a><a class="vi-more" href="/danh-muc/do-da-cao-cap/">Xem tất cả</a>
	</div>
</div>

Css

/* codfe.com.com – code 2 */
.vi-header {
	border-bottom:solid 1px #0056a8;
}
.vi-left-title-1:after {
	border:17px solid transparent;
	position:absolute;
	top:0;
	left:100%;
	content:“”;
}
.vi-left-title-1 {
	width:auto;
	background:#0056a8;
	color:#fff;
	padding:3px 10px;
	font-size:18px;
	position:relative;
	margin:0;
}
.vi-left-title-1 a {
	color:#fff;
}
.vi-right-link a:first-child {
	margin-left:0;
}
.vi-right-link a {
	color:#555;
	font-size:14px;
	margin-left:15px;
}
.vi-right-link a.vi-more,.vi-right-link a:hover {
	color:#0056a8;
}
.vi-right-link a.vi-more:after {
	content:"f101";
	font-family:FontAwesome;
	margin-left: 4px;
}

MS03: SÁCH CÁC LOẠI

Sách kinh tếSách giáo khoaSách tham khảoXem tất cả »

Code

<div class="clearfix vi-header">
	<h3 class="vi-left-title-2 pull-left">SÁCH CÁC LOẠI</h3>
	<div class="vi-right-link pull-right">
		<a href="#">Sách thiếu nhi</a><a href="#">Sách văn học</a><a href="#">Sách kinh tế</a><a href="#">Sách giáo khoa</a><a href="#">Sách tham khảo</a><a class="vi-more" href="#">Xem tất cả »</a>
	</div>
</div>

Css

/* codfe.com - code 3 */
.vi-header {
	border-bottom:solid 1px #0056a8;
}
.pull-right {
	float:right;
}
.pull-right {
	margin-right:0 !important;
}
.vi-right-link a:first-child {
	margin-left:0;
}
.vi-right-link a {
	color:#555;
	font-size:14px;
	margin-left:15px;
}
.vi-right-link a.vi-more,.vi-right-link a:hover {
	color:#0056a8;
}
.vi-right-link a.vi-more:after {
	content:"f101";
	font-family:FontAwesome;
	margin-left:4px;
}
.vi-left-title-2:after {
	border:17px solid transparent;
	border-left-color:#0056a8;
	position:absolute;
	top:0;
	left:100%;
	content:"";
}
.vi-left-title-2 {
	width:auto;
	background:#0056a8;
	color:#fff;
	padding:3px 10px;
	font-size:18px;
	position:relative;
	margin:0;
}
.vi-left-title-2 a {
	color: #fff;
}

MS 04 Sáng Tạo Sắc Việt

Code

<div id='stsv-02'>
	<h3 class="tde"><span>Sáng Tạo Sắc Việt</span></h3>
</div>

Css

#stsv-02 h3.tde {
	text-align:center;
	margin:45px 0;
	font-size:16px;
	line-height:20px;
	text-transform:uppercase;
}
#stsv-02 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;
}
#stsv-02 h3.tde:before,#stsv-02 h3.tde:after {
	content:"";
	background:url(https://codfe.com/wp-content/uploads/2020/04/tp-background-300x68.png);
	width:87px;
	height:50px;
	position:absolute;
	top:19px;
	z-index:-1;
}
#stsv-02 h3.tde:before {
	left:-44px;
}
#stsv-02 h3.tde:after {
	transform:rotateY(180deg);
	right: -44px !important;
}

MS 05 – Sáng Tạo Sắc Việt 2017

Code

<div class="box-title-new">
	<div class="box-title-name-new">
		<span class="null">Sáng Tạo Sắc Việt 2017
	</div>
</div>

Css

.box-title-new {
	position:relative;
	margin:50px 0;
	text-align:center;
}
.box-title-new .box-title-name-new {
	font-size:24px;
	font-weight:900;
	text-transform:uppercase;
	color:#fff;
	background:#00AA46;
	display:inline-block;
	vertical-align:top;
	position:relative;
	z-index:1;
	padding:10px 20px;
	marrgin-bottom:20px;
	border-radius:15px;
}
.box-title-new .box-title-name-new: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:-25px;
	width:50px;
}
.box-title-new .box-title-name-new:after {
	content:"";
	position:absolute;
	z-index:2;
	bottom:-18px;
	height:9px;
	width:200px;
	left:calc(50% - 100px);
	border-top: 2px solid #00aa46;
}

THIẾT BỊ SỐ PHỤ KIỆN

THIẾT BỊ SỐ PHỤ KIỆN

THIẾT BỊ SỐ PHỤ KIỆN

THIẾT BỊ SỐ PHỤ KIỆN

THIẾT BỊ SỐ PHỤ KIỆN

THIẾT BỊ SỐ PHỤ KIỆN

Code

<div id='nz-div'>
	<h3 class="tde"><span class="null">THIẾT BỊ SỐ PHỤ KIỆN</span></h3>
</div>
<div id='nz-div-2'>
	<h3 class="tde"><span>THIẾT BỊ SỐ PHỤ KIỆN</span></h3>
	<hr>
</div>
<div id='nz-div-3'>
	<h3 class="tde"><span>THIẾT BỊ SỐ PHỤ KIỆN</span></h3>
</div>
<div id='nz-div-4'>
	<h3 class="tde"><span>THIẾT BỊ SỐ PHỤ KIỆN</span></h3>
</div>
<div id='nz-div-5'>
	<h3 class="tde"><span>THIẾT BỊ SỐ PHỤ KIỆN</span></h3>
</div>
<h3 class="title-comm"><span class="title-holder">THIẾT BỊ SỐ PHỤ KIỆN</span></h3>

Css

/* codfe.com - code new */
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;
}
/* 5 ========================= */#nz-div-5 {
	text-align:center;
}
#nz-div-5 h3.tde {
	display:inline-block;
	background:#ea3a3c;
	color:white;
	height:50px;
	line-height:50px;
	padding:0 30px;
	width:auto;
}
#nz-div-5 h3.tde span:before {
	content:'';
	background:url(https://web.ncnncn.com/wp-content/uploads/2017/06/bgh1l.png);
	width:80px;
	height:70px;
	z-index:-1;
}
/* ======================================= */.title-comm {
	color:#fff;
	font-size:18px;
	position:relative;
	margin-top:30px;
	margin-bottom:30px;
	font-weight:700;
	background-color:#fff;
	text-align:center;
}
h3.title-comm:before {
	content:'';
	position:absolute;
	top:50%;
	left:0;
	right:0;
	margin-top:0;
	border-top:2px solid #d0d2d3;
	z-index:1;
	display:block;
}
.title-comm .title-holder {
	min-width:350px;
	height:45px;
	background-color:#56bbe7;
	height:auto;
	line-height:45px;
	padding:0px 20px;
	position:relative;
	z-index:2;
	text-align:center;
	display:inline-block;
	min-width:280px;
}
.title-holder:before {
	content:"";
	position:absolute;
	right:-15px;
	border-width:0px;
	bottom:0px;
	border-style:solid;
	border-color:#5c9efe transparent;
	display:block;
	width:0;
	height:0;
	border-top:23px solid transparent;
	border-bottom:22px solid transparent;
	border-left:15px solid #56bbe7;
}
.title-holder:after {
	content:"";
	position:absolute;
	left:-15px;
	border-width:0px;
	bottom:0px;
	border-style:solid;
	border-color:#5c9efe transparent;
	display:block;
	width:0;
	height:0;
	border-top:23px solid transparent;
	border-bottom:22px solid transparent;
	border-right: 15px solid #56bbe7;
}

 

4/5 - (4 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ẻ

5 4 đá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