Bạn có thể tạo độ dốc văn bản trong css không?

điều kiện tiên quyết

Trước khi tìm hiểu về text gradient trong CSS, chúng ta phải hiểu rõ về gradient và linear gradient trong CSS. Vì vậy, hãy để chúng tôi thảo luận chi tiết về chúng

Độ dốc. Độ dốc trong CSS là sự tiếp nối của các màu có điểm bắt đầu và điểm kết thúc, sự chuyển màu dần dần từ một màu (như màu đỏ) sang màu khác (như màu xanh lam), là một dải màu tuyến tính. Ví dụ hoàn hảo về gradient tuyến tính sẽ là cảnh hoàng hôn, chúng ta có thể quan sát cách có sự chuyển đổi màu sắc của hoàng hôn từ màu này sang màu khác một cách đẹp mắt và liền mạch

Khi chúng tôi đang sử dụng các gradient này trong CSS để thiết kế văn bản của bất kỳ trang web hoặc ứng dụng nào, chúng tôi gọi nó là CSS gradient văn bản. Chuyển sắc chữ cũng tương tự như chuyển sắc nhưng chỉ trong trường hợp chuyển sắc chữ, thay vì đổ nền, chúng ta sử dụng các hiệu ứng chuyển sắc này cho chữ. Tuy nhiên, chúng ta không bao giờ nên sử dụng độ dốc văn bản trong CSS cho các văn bản dài hơn. Thay vào đó, chúng ta nên sử dụng chúng để làm cho tiêu đề hoặc các từ cụ thể bắt mắt hơn. Nếu muốn tìm hiểu thêm về gradient bạn có thể tham khảo Gradient

Tại sao độ dốc văn bản lại quan trọng

Bây giờ, có một số lý do tại sao các lập trình viên và nhà phát triển web thường xuyên sử dụng văn bản chuyển màu. Chuyển màu là một trong những cơn sốt mới nhất trong thiết kế trang web vì một vài lý do.

• CSS chuyển màu văn bản rất dễ thực hiện, nghĩa là khi bạn biết bạn có thể sử dụng những hiệu ứng nào để làm cho văn bản trông thật hấp dẫn, nó sẽ là một công việc tuyệt vời dành cho bạn
• CSS chuyển màu văn bản có hiệu ứng hình ảnh tuyệt vời (đặc biệt, trong trường hợp các trang web hoặc ứng dụng có chủ đề tối)
• Nó là một công cụ rất hữu ích cho trang web của chúng tôi nếu chúng tôi biết cách tạo hiệu ứng chuyển màu văn bản với văn bản của mình (dù là chuyển màu văn bản bị tắt tiếng hay sáng và nhiều màu sắc)

cú pháp

Phần quan trọng nhất của CSS gradient văn bản của bạn là chính cú pháp CSS thực tế. Kiểm tra hình thức cơ bản của cú pháp CSS

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(rgb(188, 12, 241), rgb(212, 4, 4));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
Giải trình
Chúng tôi đang sử dụng phương pháp gradient tuyến tính để tạo nền gradient và sau đó chúng tôi đang sử dụng các thuộc tính WebKit để phủ nền đó bằng văn bản của chúng tôi
Hãy để chúng tôi hiểu cú pháp này với ví dụ dưới đây







    
    
    
    Gradient Text
    



    Hello World



đầu ra
Giải trình
Hãy để chúng tôi hiểu mã ví dụ trên
Trong đoạn mã trên, có một thẻ tiêu đề () bên trong thẻ nội dung (), chúng ta sẽ thêm hiệu ứng chuyển màu văn bản vào đó
Trong khối đầu, chúng tôi đã áp dụng CSS nội bộ hoặc nhúng
Trong đó chúng ta đã tạo kiểu cho thẻ body, bao gồm kiểu nền cơ bản
Sau đó, chúng tôi đã thực hiện một số kiểu dáng cơ bản cho thẻ tiêu đề (), bao gồm kích thước phông chữ
Sau đó, chúng tôi áp dụng hiệu ứng chuyển màu tuyến tính cho thẻ tiêu đề (), với màu rgb(188, 12, 241)torgb(212, 4, 4)`. Bạn có thể sử dụng bất kỳ màu nào bạn chọn
Sau đó, chúng tôi đã áp dụng các thuộc tính WebKit, thuộc tính đầu tiên -webkit-background-clip. chữ; . trong suốt; 

Những gì bạn sẽ cần biết

Để xây dựng cú pháp chuyển màu văn bản của bạn, trước tiên bạn phải chia nhỏ những điều cơ bản. Hãy để chúng tôi tìm hiểu về một số từ khóa sẽ giúp xây dựng những điều cơ bản về những gì bạn sẽ cần để tạo độ dốc văn bản của mình

Cỡ chữ

Điều này là tự giải thích. Trước khi thiết lập các thuộc tính chuyển màu khác, bạn sẽ cần thiết lập kích thước phông chữ của văn bản, nghĩa là bạn muốn phông chữ của mình lớn đến mức nào. Đơn vị kích thước phông chữ trong CSS dựa trên EMS, pixel, điểm và tỷ lệ phần trăm. Bạn có thể phải tra cứu các chuyển đổi, nhưng thông thường bạn có thể mong đợi 1em = 12pt = 16px = 100%

Ví dụ

Chúng ta hãy xem một ví dụ về kích thước phông chữ, để rõ ràng hơn và hiểu rõ hơn

	
	
	Font Size
	



	Font Size



đầu ra
Phương hướng
CSS gradient văn bản không khác nhiều so với gradient tuyến tính, đặc biệt là trong trường hợp hướng. Chúng tôi xác định góc của một gradient tuyến tính trong mã ở dạng từ khóa hoặc số và đơn vị. Có nhiều loại từ khóa như trên cùng, dưới cùng, bên trái và bên phải mà chúng ta có thể sử dụng với gradient tuyến tính để quyết định hướng của đường từ điểm bắt đầu. Chẳng hạn, chúng ta có thể kết hợp các từ khóa định hướng này - ở trên cùng bên phải hoặc ở dưới cùng bên trái (thường để tạo đường chéo). Các cặp số và đơn vị cũng có thể được sử dụng để quyết định góc và hướng của đường
Ví dụ
Chúng ta hãy xem một ví dụ để định hướng, để rõ ràng hơn và hiểu rõ hơn




	
	
	Gradient Text
	



	Direction: toward right side



đầu ra



Màu sắc và Điểm dừng màu
Chúng ta sẽ cần ít nhất hai màu cho gradient chuyển đổi giữa để tạo ra loại gradient văn bản đơn giản nhất trong CSS. Về bản chất, các điểm dừng màu đề cập đến điểm mã dọc theo dải màu văn bản nơi mỗi màu sẽ kết thúc. Những màu sắc này có thể có bất kỳ cơ sở nào, bao gồm tên, HEX, RGB hoặc HSL. Do đó, có rất nhiều lựa chọn thay thế về cách hiển thị độ dốc của bạn
Ví dụ
Chúng ta hãy xem một ví dụ về Màu sắc và Điểm dừng màu, để rõ ràng hơn và hiểu rõ hơn




	
	
	Gradient Text
	



	This text gradient starts red at the top, transitioning to yellow at the bottom:



đầu ra

Bây giờ chúng ta hãy xem cách chúng ta có thể từng bước tạo độ dốc văn bản trong CSS

Mã HTML

Trong phần sau, văn bản được sử dụng để trình diễn CSS chuyển màu văn bản được bao bọc bên trong thẻ tiêu đề thẻ h1. Hãy để chúng tôi nhìn vào mã cho nó

Mã số

  
    
    
    Gradient Text
  

    Hello World
  

Mã CSS
Đối với mã CSS, chúng ta cần làm theo các bước đã cho bên dưới
Bước 1. Bên trong mã CSS, trước tiên chúng ta sẽ áp dụng một số nền cơ bản cho phần thân và căn chỉnh văn bản vào giữa trang
Mã số




	
	
	Gradient Text
	



	Text Gradient CSS



đầu ra
Bước 2. Sau đó, chúng tôi sẽ thực hiện một số kiểu dáng cơ bản của thẻ tiêu đề (), như điều chỉnh kích thước và họ phông chữ, v.v.
Mã số




	
	
	Gradient Text
	



	Text Gradient CSS



đầu ra



Bước 3. Sau đó, chúng tôi sẽ áp dụng thuộc tính gradient tuyến tính trên văn bản thẻ tiêu đề với bất kỳ màu nào bạn chọn
Mã số




	
	
	Gradient Text
	



	Text Gradient CSS



đầu ra
Bước 4. Sau đó, với sự trợ giúp của các thuộc tính WebKit, chúng tôi sẽ làm cho toàn bộ nền dốc trong suốt, sau đó chúng tôi sẽ tô văn bản bằng nền dốc
Mã số




	
	
	Gradient Text
	



	Text Gradient CSS



đầu ra
Hoàn thành mã. Chúng ta hãy xem mã hoàn chỉnh bằng cách kết hợp cả hai phần mã trên




    
    
    
    Gradient Text
    



    Hello World



0
đầu ra
Ví dụ
Bây giờ chúng ta hãy xem một ví dụ về độ dốc văn bản CSS, để hiểu rõ hơn
Mã HTML




    
    
    
    Gradient Text
    



    Hello World



1
Mã CSS




    
    
    
    Gradient Text
    



    Hello World



2
đầu ra
Giải trình
Hãy để chúng tôi hiểu đoạn mã trên một cách chi tiết
Thứ nhất, bên trong mã HTML có thẻ heading() với tên lớp là Rainbow-text, bên trong thẻ body() chúng ta sẽ thêm hiệu ứng chuyển màu cho chữ
Sau đó, chúng tôi đang áp dụng CSS bên ngoài, cho mã HTML này
Bên trong mã CSS, lúc đầu, chúng tôi đã thực hiện kiểu dáng chung của trang, chẳng hạn như đặt màu nền, cỡ chữ, v.v.
Sau đó, chúng tôi tạo kiểu cho thẻ tiêu đề của mã HTML, bằng cách gọi tên lớp của nó là văn bản cầu vồng
Trong đó chúng tôi đã tạo kiểu cho văn bản bằng gradient hình nón, với tỷ lệ phần trăm gấp đôi để tránh mờ. Độ dốc hình nón cũng tương tự như độ dốc tuyến tính, chỉ trong trường hợp độ dốc hình nón, các chuyển màu xoay quanh một điểm trung tâm
sau đó. chúng tôi đã đặt kích thước nền và thuộc tính lặp lại
Sau đó, với sự trợ giúp của các thuộc tính WebKit, chúng tôi sẽ làm cho toàn bộ nền dốc trong suốt, sau đó chúng tôi sẽ tô văn bản bằng nền dốc
Sau đó, chúng tôi cũng đã thêm hoạt ảnh vào văn bản khi tải phần tử. Thuộc tính hoạt hình này tạo hiệu ứng động cho văn bản khi tải trang và khi di chuột ra ngoài
Chúng tôi cũng đã thêm hoạt ảnh khi di chuột
Sau đó, chúng tôi cũng đã thêm hiệu ứng di chuyển nền và làm cho nó lớn hơn. Hình ảnh động hiển thị khi di chuột qua văn bản
Ngoài ra, di chuyển nền và làm cho nó nhỏ hơn. Hoạt ảnh hiển thị khi vào trang và sau hoạt ảnh di chuột

Phần kết luận

Trong bài viết này, chúng ta đã tìm hiểu về CSS gradient văn bản. Hãy để chúng tôi tóm tắt lại những điểm chúng tôi đã thảo luận trong suốt bài viết

Tôi có thể sử dụng gradient trên CSS văn bản không?

Làm cách nào để thay đổi màu của văn bản trong CSS?