CSS3 03 – CSS3 Gradient

0
85

Trước đây để đổ màu với các hiệu ứng chuyển tiếp cho một khối không có cách nào ngoài dùng một ảnh được đổ màu gradient trong Photoshop. Việc này làm cho tốc độ load trang web của chúng ta chậm hơn. Vì vậy CSS3 Gradient ra đời nhằm giúp chúng ta khắc phục điều này.

1. Các cách đổ màu gradient trong CSS3

Trong CSS3 Gradient có 2 cách đổ màu đó là:

Đổ màu theo một đường thẳng : Linear Gradient

Cú pháp

 

Đổ màu từ vị trí trung tâm: Radial Gradient

Cú pháp

mặc định: hình dạng là elip, và vị trí trung tâm

2. Linear-gradient

2.1. Đổ màu từ trên xuống dưới , từ dưới lên

Để thực hiện đổ màu từ trên xuống các bạn chỉ cần thêm vào vị trí đổ màu giá trị:

  • to top : Đổ màu từ dưới lên
  • to bottom: Đổ màu từ trên xuống

Ví dụ

See the Pen wqqqea by Cao Anh Nhất (@xeko995) on CodePen.dark

2.2. Đổ màu từ trái sang phải , phải sang trái

Tương tự như đổ màu từ trên xuống và dưới lên thì các bạn chỉ cần đổi vị trí đổ màu:

  • to right : Đổ màu từ trái sang phải
  • to left: Đổ màu từ phải sang trái

Ví dụ

See the Pen YxxxYM by Cao Anh Nhất (@xeko995) on CodePen.dark

2.3. Đổ màu theo hình chéo

Để đổ màu theo hình chéo các bạn thêm vị trí là góc muốn đổ tới :

Có 4 góc như sau

  • to top right 
  • to top left
  • to bottom right
  • to bottom right

Ví dụ

See the Pen qXXXyL by Cao Anh Nhất (@xeko995) on CodePen.dark

2.4. Đổ màu theo góc

Để  có thể đổ màu được nhiều hướng hơn các bạn có thể định nghĩa một góc thay vì các hướng xác định từ trước

Ví dụ

See the Pen YxYvaM by Cao Anh Nhất (@xeko995) on CodePen.dark

3. Radial Gradient

Ví dụ

See the Pen rzpKbv by Cao Anh Nhất (@xeko995) on CodePen.dark

4. Đổ màu gradient cho text

Chắc hẳn nhiều bạn có thắc mắc là tại sao chỉ có đổ màu cho background mà không đổ màu được cho text. Nếu đổ được màu cho text thì đổ bằng cách nào.

Xin trả lời với các bạn rằng là để đổ màu được cho text thì chúng ta phải sử dụng các thủ thuật. Trong bài viết này tôi sẽ giới thiệu cho các bạn một cách đổ màu đơn giản mà lại hiểu quả.

Để đổ màu cho text các bạn sử dụng công thức sau đây.

Ví dụ

See the Pen EvopNM by Cao Anh Nhất (@xeko995) on CodePen.dark

 

 

Tác giả: Cao Anh Nhất

[Total: 0    Average: 0/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here