Tạo Gradient với CSS 3 - Dummies

Gradients là một hiệu ứng yêu thích của các nhà thiết kế đồ họa ở khắp mọi nơi vì gradients tạo ra một sự chuyển đổi màu sắc trơn tru. Việc thêm gradient vào nền của một trang web hoặc các phần trong một trang cho thấy sự phong phú và chiều sâu của một thiết kế.

Trong hình, bạn có thể thấy sự khác biệt giữa một gradient xuyên tâm và một tuyến tính.

Trong các phiên bản trước của CSS, nếu bạn muốn sử dụng một gradient trong nền của một phần tử, chẳng hạn như một thẻ, bạn phải sử dụng một hình ảnh. Nếu bạn thông minh, bạn đã tạo một đồ hoạ rộng 1 pixel rộng cao như bạn muốn và sau đó chèn nó làm nền để nó lặp lại để lấp đầy không gian. Nếu bạn thiết kế một hình nền tốt, kích thước tệp hình ảnh có thể là nhỏ nhưng nhiều hạn chế.

Ví dụ: bạn phải làm cho độ cao hoặc cao hơn không gian bạn muốn điền vào, làm hạn chế khả năng tạo các mẫu trang linh hoạt. Tương tự, kết hợp một hình nền thứ hai phía sau gradient, nếu một thiết kế đã có loại hình ảnh này, không phải là một công việc đơn giản. Tóm lại, việc thêm gradient vào các thiết kế trang là có thể, nhưng cũng là rắc rối thực sự.

Nhập CSS 3 và các nhà thiết kế ở khắp mọi nơi có thể tổ chức các tùy chọn gradient mới để giải quyết tất cả những vấn đề cũ một lúc. Gradients được tạo ra với CSS 3 tải nhanh hơn và tự động điều chỉnh để lấp đầy không gian một cách hoàn hảo.

CSS 3 gradients có thể được thiết kế như tuyến tính, hoặc xuyên tâm, và bạn có thể áp dụng các dải màu khác nhau ở các khoảng cách khác nhau dọc theo liên tục. Tất cả trong tất cả, gradient CSS 3 có thể được sử dụng trong hầu hết các tình huống mà một nhà thiết kế sẽ muốn sử dụng một và là một cải tiến đáng kể cho CSS.

Khi bạn thêm một dải vào nền - cho dù đó là nền của toàn bộ trang hoặc một phần tử bên trong một trang, chẳng hạn như một thẻ - gradient tự động điều chỉnh để lấp đầy toàn bộ không gian trừ khi bạn chỉ định một kích thước. Gradients cũng có thể được sử dụng trong biên giới của các phần tử và để điền vào trung tâm của một viên đạn trong một danh sách không có thứ tự.

Đây là cú pháp đơn giản nhất để tạo gradient tuyến tính trong CSS 3 cho các trình duyệt WebKit:

-webkit-gradient (tuyến tính, từ, (từ () đến ());

Xạ sắc được tạo theo cách này:

-chức nghiêng-gradient (xuyên tâm, [] *);

Dưới đây là hai ví dụ về gradient được sử dụng làm hình nền:

• Đoạn mã sau tạo gradient tuyến tính với hai màu:

  background-image: -webkit-gradient (tuyến tính, dưới cùng bên trái, bên trái, màu -stop (0, 32, #FFFFFF), color-stop (0, 66, # 245FAB));
  

• Ví dụ mã này tạo ra một gradient xuyên tâm với nhiều màu sắc:

  

nền: -chiều web-gradient xuyên tâm (xuyên tâm, trung tâm, 0, trung tâm, 70.5, từ (màu xanh lá cây), đến (màu vàng);

Đây là mã được sử dụng để tạo gradient trong các vùng nền của cơ thể, các đề mục, và bên trong trang web của Jelly Rancher được hiển thị trong hình.

body {background-image: -webkit-gradient (đường thẳng, trái trên cùng, dưới cùng bên trái, color-stop (0, màu xanh), color-stop (.25, # 98fc45), color-stop (1, minh bạch));}

Trong ví dụ, bạn có thể thấy rằng một gradient tuyến tính được tạo ra bắt đầu ở phía trên và di chuyển xuống dưới cùng. Bạn có thể thay đổi gradient bằng cách bắt đầu nó ở góc trên bên trái và kết thúc ở góc dưới bên phải, tạo thành gradient dọc theo đường chéo. Ngoài ra còn có một vài điểm dừng màu được hiển thị trong ví dụ, mỗi màu đều đại diện cho một màu dọc theo gradient. Ví dụ gradient tiến triển như sau:

• Bắt đầu với màu xanh lam: color-stop (0, màu xanh).

• Thay đổi thành màu thập lục phân # 98fc45 ở 25 phần trăm: color-stop (. 25, # 98fc45).

• Sau đó # 98fc45 trở nên trong suốt qua phần còn lại của gradient cho đến khi nền hoàn toàn trong suốt: color-stop (1, minh bạch).