Tìm hiểu về CSS Gradient
TIL
719
CSS3
49
White

Tấn Huy viết ngày 04/08/2018

CSS Gradients

Nói đơn giản nhất thì cái gradients này kiểu như dùng để chuyển giao hai màu sắc trong cùng một background và khiến người xem cảm thấy rất hòa hợp chứ không đơn thuần là ghép 1 nửa màu này và màu kia lại với nhau.Và trước hết phải lưu ý nếu muốn dùng gradient thì chúng ta phải biết rằng bắt buộc dùng 2 màu trở lên cho background (vì một màu thì trải đi đâu).. Đây là ví dụ minh họa cho sự "hòa hợp" đó:
alt text
(hình 1)
Chứ không kiểu thô thiển như này :laughing:
alt text
(hình 2)
Sơ lược thì CSS Gradients sẽ có hai kiểu là kiểu trải dài (linear-gradient) và kiểu vòng tròn :v (radial-gradient). (mình dịch ra tiếng Việt khá chuối)

CSS Linear Gradients

Các hướng của Linear Gradients

linear-gradient là kiểu trải dài như hình minh họa ở trên (hình 1). Với linear-gradient chúng ta có 4 hướng cơ bản và cách viết trong CSS tương ứng:

  • Từ trên xuống dưới (linear-gradient(to bottom, color, color,..))
  • Từ dưới lên trên (linear-gradient(to top, color, color,..))
  • Từ trái qua phải (linear-gradient(to right, color, color,..))
  • Từ phải qua trái (linear-gradient(to left, color, color,..)) Dưới đây là hình minh họa: alt text

Ngoài ra chúng ta có thể tùy chỉnh rộng hơn (theo góc độ chúng ta muốn) bằng angle. Như việc mình không muốn nó từ trên xuống vuông góc 90 độ như trên mà muốn nó đổ tà tà cở 120 độ thì chỉ cần đơn giản như sau: linear-gradient(120deg, red ,blue); (thay chỗ to bottom và thay vào đó là độ 'deg là kí hiệu của độ: degrees'). Lưu ý phần góc là góc giữa cạnh đáy (horizontal line) và cạnh của màu bắt đầu (gradient line). Hình minh họa:
alt text

Mutiple color stops

Mutiple color stops nôm na là điểm dừng của một màu trong một đống màu mà chúng ta đã cho và từ đó nó sẽ bắt đầu chuyển hóa thành màu khác bằng việc đặt %(tức khoảng muốn kết thúc vào cuối màu đó, như thế nàybackground: linear-gradient(color %điểm dừng, color %điểm dừng, color %điểm dừng;).
Ví dụ:
Đây là 3 màu được cho và với điểm dừng là bằng nhau:
alt text
Sau khi ta thay đổi điểm dừng lại một tí như sau background:linear-gradient(to right,red 60%, yellow 70%, blue 90%);
alt text
Rõ ràng là đã thấy được sự chênh lệch nhẹ :v

Repeating a linear-gradient

Cách giải thích tốt nhất là xem ví dụ :laughing:
Đây là một Gradient bình thường:
alt text
Sau khi sử dụng repeating-linear-gradient:
alt text
Tada!!! (mù mắt :laughing:)
Việc repeat này dựa vào cái multiple color stops ở trên, nếu chúng ta cho việc dừng lại của từng màu trong background ở khoảng cách nhỏ thì sẽ tạo thành đoạn nhỏ và nó sẽ còn dư khoảng trống rất nhiều + với repeating-linear-gradient sẽ khiến cho các đoạn nhỏ đó lặp lại và ta được kết quả như hình trên. Dĩ nhiên nếu ta cho điểm dừng là quá lớn, như thế này
alt text
Kết quả:
alt text
Thì nó sẽ k lặp lại thành nhiều đoạn nhỏ được. Đáng lẽ ra phải là thế này:
alt text
Và kết quả giống như ban nãy:
alt text

CSS Radial Gradients

Phần này thì cũng tương tự như linear gradient thay vì trải từ bên này sang bên kia thì nó sẽ là trải từ trung tâm ra ngoài theo "hình tròn".
alt text
alt text

Nhưng gì chúng ta biết về linear-gradient thì bên radial-gradient cũng tương tự, chỉ là khác chút ít. Như là việc color stops ở trên
alt text
Kết quả:
alt text

Hay là repeating
alt text
Kết quả:
alt text
(Nhìn ma thuật thế :laughing:)
Chỉ có một thứ khác với linear-gradient đó là radial-gradient có hai hình dạng đó là circleellipse. (Hình dạng tỏa từ trung tâm theo hình vòng ra ngoài)

  • Cirle: sẽ được biểu diễn như sau background: radial-gradient(circle, red, yellow, green); alt text
  • Ellipse: background: radial-gradient( red, yellow, green); đây là kiểu mặc định nên ta không cần ghi gì thêm alt text

Về việc sử dụng các Gradient này thì minh hay sử dụng nó làm các background cho phần branding ở header hay một số background cho content trông đẹp hơn. Ví dụ, thay vì bình thường mình hay để branding là một màu (xám chẳng hạn) với cú pháp như này
alt text
Thì đây là cái branding của mình:
alt text
Nhưng sau khi thay đổi một tí
alt text
Nhìn trông cool hơn :laughing:
alt text
Chúng ta hoàn toàn có thể sáng tạo để tạo ra các kiểu background khác trông ngầu và đẹp hơn, có thể là như này :3
alt text
Code:
alt text
hay ảo diệu như này
alt text
Code:
alt text

Link tham khảo

Mình tham khảo Ở đây

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Tấn Huy

17 bài viết.
21 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
12 2
Tạo thanh tìm kiếm với hiệu ứng "gậy như ý" bằng HTML và CSS Trong bài viết này chúng ta sẽ tìm hiểu việc tạo ra một thanh tìm kiếm và khi nhấp ch...
Tấn Huy viết 1 năm trước
12 2
White
8 1
Ở phần trước mình đã nói về các property của phần parent trong CSS Flexbox (xem lại (Link)). Hôm nay chúng ta sẽ nói tiếp phần còn lại đó là các pr...
Tấn Huy viết 1 năm trước
8 1
White
7 0
Sau khi đã tìm hiể về Grid ở hai phần trước về các property thông dụng của grid ((Link), (Link)) thì chúng ta cũng đã thấy grid rất hữu dụng vì tha...
Tấn Huy viết 1 năm trước
7 0
Bài viết liên quan
White
36 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hà Phạm viết gần 4 năm trước
36 8
White
0 4
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết hơn 1 năm trước
0 4
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
17 bài viết.
21 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!