CSS3 – Gradient Background

Bởi Danh Do vào December 2015

Trong Photoshop bạn có thể tạo một hình ảnh với nhiều màu sắc và chúng trộn lẫn với nhau nhìn rất bắt mắt như hình dưới đây.

hoc-gradient-css3

 

Thì bạn hoàn toàn có thể làm điều này trong CSS3  bằng cách sử dụng thuộc tính background kêt hợp với giá trị Gradient.

Trong CSS3 hỗ trợ hai loại Gradient:

1. Linear Gradients trong CSS3

Cú pháp:

Trong đó direction gồm các giá trị:

Nếu ta không truyền direction thì theo mặc định nó sẽ có giá trị top (tức là top – bottom)

Tương tự chúng ta có code Hack CSS như sau:

Có một lưu ý là đối với code Hack CSS thì direction không có chữ to.

Ví dụ:

 

Kết quả:

gradient-linear-example

Sử dụng Angles:

Bạn có thêm sự lựa chọn đó là sử dụng góc thay vì xác định hướng (to left, to right …) bằng cách sử dụng cú pháp sau:

Trong đó Angle là góc xá định giữa đường ngang và đường Gradient đi ngược chiều của kim đồng hồ. Hay nói cách khác 0deg sẽ tạo bottom to top Gradient, 90deg sẽ tạo left to right Gradient.

Ví dụ:

Kết quả:

gradient-engles-example

Sử dụng nhiều màu:

Nếu bạn muốn trộn nhiều màu với nhau thì chỉ việc bổ sung màu vào thuộc tính Gradient, nhưng bạn phải lưu ý rằng thứ tự màu phải được sắp xếp cho đúng nhé.

Ví dụ:

 

Kết quả:

gradient-multiple

Sử dụng Transparency:

Ví dụ:

 

Kết quả:

transparency-gradient

Lặp – repeating-linear-gradient:

Bạn thấy dù chiều cao và chiều rộng của đối tượng HTML bao nhiêu đi nữa thì nó vẫn phủ đầy, nhưng giả sử giờ mình muốn nó chỉ chiếm một khoảng nào đó và lặp tiếp tục lặp lại thì ta dùng thuộc tính repeating-linear-gradient.

Ví dụ:

 

Kết quả:

repeating-gradient

2. Radial Gradients trong CSS3

Radial Gradient dùng để tạo hiệu ứng tại vị trí nào đó (do lập trình viên chọn)  và lan tỏa ra tứ phía, và để có được hiệu ứng thì chắc chắn ban phải sử dụng ít nhất hai màu sắc khác nhau.

Cú pháp:

Trong đó Shape mặc định là hình Ellipse, size là farthest-corner và position là center.

Code Hack CSS:

 

Lưu ý: Phải sử dụng đúng cấu trúc cú pháp trên

Phân chia khoảng màu đồng đều:

Theo mặc định thì các màu sẽ được chia một khoảng không gian bằng nhau.

Ví dụ:

 

Kết quả:

radial-gradient

Tùy chọn khoảng màu:

Nếu bạn muốn thiết lập mỗi màu sắc chiếm một khoảng bao nhiêu đó thì thêm số phần trăm (%) đằng sau màu đó (khoảng cách tính từ vị trí trung tâm, nghĩa là màu sau phải lớn hơn màu trước).

Ví dụ:

 

Kết quả:

radial-gradient-1

Tùy chọn Shape:

Mặc đình là ellipse nhưng bạn có thể thay thế bằng circle.

Ví dụ:

 

Kết quả:

radial-gradient-3

Tùy chọn Size:

Chúng ta có bốn giá trị sau:

Mặc định nếu không chọn size thì nó sẽ lấy farthest-side.

Ví dụ:

Kết quả:

radial-gradient-size

Tùy chọn Position:

Nếu bạn muốn vị trí trung tâm không nằm ở giữa nữa thì có thể chọn một vị trí bất kì bằng cách nhập khoảng cách so với lề trái và lề trên, đơn vị của nó có thể là % hoặc px.

Ví dụ:

 

Kết quả:

position-radial-gradient

Lặp – repeating-radial-gradient:

Tương tự như Linear Gradient bạn có thể repeat Radial Gradient bằng cách sử dụng thuộc tính repeating-radial-gradient.

Ví dụ:

 

Kết quả:

repeating-radial-gradient

3. Lời kết

Gradient trong CSS3 quả nhiên lợi hại phải không các bạn, ban đầu mình cũng không thể tưởng tượng được CSS lại có thể làm được những tấm hình như vậy nhưng khi nghiên cứu mới thực sự tin.

Bài này rất đơn giản nên bạn phải vận dụng thêm các thuộc tính khác nữa mới có thể tạo những hiệu ứng độc và đẹp mắt

Nguồn: http://freetuts.net/hoc-css3-gradient-background-480.html