Liên hệ
css

Tạo ra Linear Gradient với CSS

Sử dụng các hàm để tạo ra gradient tuyến tính trong CSS ví dụ như hàm linear-gradient với các tham số khác nhau

Linear Gradient

CSS3 gradient cho phép bạn hiện thị biến đổi liên tục giữa hai hoặc nhiều màu. CSS3 có hai kiểu chuyển đổi màu LinearRadial

Tạo ra linear gradient bạn phải định nghĩa tối thiểu điểm dừng màu. Điểm dừng màu là màu nằm giữa khoảng màu cần biến đổi liên tục. Bạn cũng cần thiết lập một điểm bắt đầu và hướng hoặc góc qua đó màu biến đổi.

Ví dụ sau, màu xanh và trắng tạo ra gradient biến đổi từ trên xuống dưới.

<style>
    .exam1 {
        width: 300px;
        height: 100px;
        margin: 4px;
        color: #FFF;
        background: linear-gradient(DeepSkyBlue, Black);
    }
</style>

<div class="exam1">
Ví dụ gradient
</div> 
Ví dụ gradient
 

Có thể thêm nhiều điểm màu, mỗi màu cách nhau bởi dấu phảy ,

Ví dụ: background: linear-gradient(blue, yellow, green, pink, white);

Ví dụ gradient blue, yellow, green, pink, white

Các điểm dừng màu có thể chỉ ra không đều cho từng màu khoảng cách tính từ gốc của hướng (theo phần trăm, px, em)

Ví dụ: background:linear-gradient(blue 20%, yellow 30%, green 85%);

Ví dụ gradient blue 50%, yellow 75%, green 100%

Hướng Linear gradient

Để chỉ ra hướng bạn cần chỉ ra điểm bắt đầu của gradient với các giá trị: left right top bottom

Ví dụ tô từ trái qua phải background: linear-gradient(left, blue, green, white);

Chrome: background: linear-gradient(left, blue, green, white);

Ví dụ gradient left

Ví dụ tô từ dưới lên background: linear-gradient(bottom, blue, green, white);

Chrome: background: linear-gradient(bottom, blue, green, white);

Ví dụ gradient bottom

left, right, top, bottom dùng để xác định hướng gradient. Bạn có thể kết hợp vài hướng trong một ví dụ (bottom right biến đổi từ dưới lên đồng thời từ phải sang trái)

Góc xác định hướng gradient

Ví dụ dùng left, right, top, bottom kết hợp để tạo ra các hướng như bottom left tương đương 45 độ

Ví dụ tô từ dưới lên background: linear-gradient(bottom left, blue, green, white);

Chrome: background: linear-gradient(bottom left, blue, green, white);

Ví dụ gradient bottom left

Ngoài ra có thể chỉ thắng ra góc chuyển đổi ví dụ 100 độ: background:linear-gradient(100deg, blue, green, white);

Ví dụ gradient 100deg

repeating-linear-gradient

Tạo ra các gradient lặp lại bằng hàm: repeating-linear-gradient()

Ví dụ: background:-moz-repeating-linear-gradient(blue, green 20px);

Ví dụ gradient 100deg

Vui lòng đăng ký ủng hộ kênh