Cách tạo chữ sáng tạo cùng hiệu ứng nét dùng cho tiêu đề blogspot

Trong thế giới phức tạp của thiết kế web ngày nay, kiểu chữ đóng vai trò là phương tiện biểu đạt mạnh mẽ, cải thiện khả năng sử dụng trang web và vượt ra ngoài phạm vi lựa chọn phông chữ và kích thước. Trong bài viết này, chúng ta sẽ khám phá một phần phụ của Kiểu chữ web, tức là xử lý phác thảo văn bản CSS, còn được gọi là nét chữ, cùng với các phương pháp khác nhau mà chúng ta có thể làm theo để đạt được hiệu ứng nét trong CSS.

Kiểu chữ nét trong CSS

- Sử dụng thuộc tính webkit-text-stroke không chuẩn.
Thuộc tính webkit -text-stroke là một thuộc tính CSS không chuẩn được sử dụng để áp dụng chiều rộng và màu của nét hoặc đường viền cho các ký tự văn bản. Đây là thuộc tính viết tắt cho các thuộc tính viết tắt -webkit-text-stroke-width và -webkit-text-stroke-color.
Được làm bằng:
HTML / CSS
Về mã:
Đây là một hiệu ứng văn bản động tuyệt đẹp được tạo bằng CSS.
Trình duyệt tương thích: Chrome, Edge, Firefox, Opera, Safari.

Preview

text fill effect

Cách thực hiện:
Thêm css

.text-fill {
	background:
		linear-gradient(blue 0 0) 
			0/ 100% repeat-y text;
	color: #0000; 
	animation: text-fill 8s 
		cubic-bezier(.35, 0, .35, 1) 
		infinite alternate
}

h1 {
	place-self: center;
    -webkit-text-stroke: 2px #386641;
    color: #0000;
	font-size: 70px;
    font-weight:900;
	font-family:"Open Sans",Helvetica,Arial,sans-serif;
	text-transform: capitalize;
}

HTML

<h1 class='text-fill'>thủ thuật blogspot</h1>

Áp dụng cho tiêu đề blogspot
Tùy thuộc vào phần thiết kế css của từng template nhưng cơ bản là sửa toàn bộ "header title" hoặc "blog title" của template dưới là một ví dụ.
Sửa css

#header h1 , #header h2, #header h1 a, #header h2 a, #header h1 a:hover,#header h2 a:hover { 
    place-self: center; 
    color:#0000;
	font-size: 70px;
    font-weight:900;
	font-family:"Open Sans",Helvetica,Arial,sans-serif;
	text-transform: capitalize;
}

Thêm css vào phần css chung của mẫu.

.text-fill {
	background:
		linear-gradient(blue 0 0) 
			0/ 100% repeat-y text;
	color: #0000; 
	-webkit-text-stroke: 2px #386641;
	animation: text-fill 8s 
		cubic-bezier(.35, 0, .35, 1) 
		infinite alternate
}  
  
@keyframes text-fill {
	0% { background-size: 0 }
}

Sửa HTML
Tìm:

<!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
          <b:include name='title'/>
      </div>

Hoặc class='blog-title' ... vvv
Thay thành:

<!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper text-fill'>
          <b:include name='title'/>
      </div>

Hoặc class='blog-title text-fill' ...vvv
DEMO