Làm thế nào để sử dụng CSS3 Gradients - Dummies

Một gradient CSS3 (là một sự pha trộn giữa hai hay nhiều màu sắc) có thể là một nền tảng tốt đẹp. Trước đây, các nhà phát triển sẽ tạo ra một dải bằng cách xây dựng dải gradient mỏng trong trình chỉnh sửa hình ảnh và sau đó sử dụng các quy tắc lặp lại-x hoặc lặp lại-y để làm cho hình ảnh nhỏ hơn sao chép trên trang. Đây là một kỹ thuật tốt, nhưng nó không phải là rất linh hoạt, và chỉ có các gradient tuyến tính tương đối đơn giản.

CSS3 đã thêm một quy tắc gradient xuất sắc để tạo gradients trực tiếp thông qua CSS. Khi kỹ thuật này được chấp nhận hoàn toàn, nó làm cho gradient dễ dàng hơn để làm việc với.

CSS3 hỗ trợ hai loại gradient chính: tuyến tính và xuyên tâm. Một gradient tuyến tính thay đổi màu sắc dọc theo một đường thẳng, và một gradient xuyên tâm phát ra từ một điểm trung tâm.

Cơ chế gradient là một trong những phần chậm hơn của CSS được chuẩn hóa và áp dụng, vì vậy nó vẫn đang thay đổi, nhưng có vẻ như các trình duyệt cuối cùng đã được thiết lập trên một tiêu chuẩn. Thật không may, các tiền tố cụ thể của nhà cung cấp là cần thiết trong thời gian này.

# box1 {background-image: linear-gradient (trái, đỏ, trắng); background-image: -moz-linear-gradient (trái, đỏ, trắng); background-image: -webkit-linear-gradient (left, red, white);}

Đây là cách bạn tạo một gradient tuyến tính đơn giản:

Xác định bộ chọn.

Một gradient được định nghĩa trong CSS, và bạn sẽ cần phải sử dụng bất kỳ trình chọn CSS tiêu chuẩn nào để xác định phần tử nào bạn sẽ thêm gradient vào.

1. Sử dụng quy tắc hình nền.

   Một gradient là một hình thức đặc biệt của hình ảnh. Bạn có thể sử dụng quy tắc hình nền để áp dụng một gradient vào nền của bất kỳ phần tử, bao gồm cả toàn bộ phần của trang.

2. Gọi chức năng gradient tuyến tính.

   Một vài yếu tố CSS yêu cầu dấu ngoặc đơn vì về mặt kỹ thuật chúng là các hàm. Sự khác biệt không quan trọng ngay bây giờ, nhưng bạn cần phải kết hợp các dấu ngoặc đơn khi bạn sử dụng loại giá trị này. Kỹ thuật gradient tuyến tính là một hàm.

3. Xác định hướng gradient sẽ chảy.

   Bạn có thể tạo ra một luồng gradient trong bất kỳ hướng nào bạn muốn bên trong phần tử. Dấu bên trái làm cho phần tử chảy từ trái sang phải. Bạn có thể sử dụng để di chuyển từ trên xuống dưới, hoặc trên cùng bên trái để đi từ trên xuống dưới lên dưới cùng bên phải. Sử dụng bất kỳ sự kết hợp nào của đỉnh, trái, dưới và phải. Bạn cũng có thể chỉ định một góc theo độ, như thể hiện trong ví dụ tiếp theo.

4. Cho biết màu bắt đầu.

   Sử dụng bất kỳ công cụ màu chuẩn nào (tên màu, màu lục, hexrg () / rgba () hoặc hsl () để xác định màu bắt đầu.

5. Cho biết màu kết thúc.

   Màu cuối cùng được chỉ ra sẽ là màu kết thúc của gradient. Màu gradient chảy từ đầu đến cuối kết thúc màu đều.

6. Lặp lại với các tiện ích mở rộng của trình duyệt.

   Bạn cần phải thêm các biến thể cho các trình duyệt cụ thể. Bạn sẽ cần tạo một phiên bản mới của nguyên tắc hình nền cho mỗi nhà cung cấp chính.

7. Làm thế nào để thực hiện một gradient thú vị hơn

   Khi bạn nhìn vào ô 2, bạn sẽ thấy một gradient phức tạp hơn cho thấy nhiều màu sắc và một góc độ thú vị.

# box2 {background-image: tuyến tính gradient (75deg, đỏ, trắng 33%, trắng 66%, màu xanh); background-image: -moz-linear-gradient (75deg, đỏ, trắng 33%, màu trắng 66%, màu xanh); background-image: -webkit-linear-gradient (75deg, red, white 33%, white 66%, blue);}

Đây là cách bạn thêm nhiều pizazz vào gradient của bạn.

Sử dụng một góc cho hướng.

Thay vì chỉ định hướng di chuyển của bạn bằng các từ khóa trên / bên trái tiêu chuẩn, bạn có thể chỉ định một góc bắt đầu. Góc được đo bằng toán học theo độ, với 0 đi từ bên phải và 90 từ trên xuống. Bạn phải chỉ định độ đo bằng deg, do đó 75 độ được viết là 75deg.

1. Thêm càng nhiều màu sắc càng tốt.

   Một gradient có thể có bất kỳ số lượng màu nào trong nó. Mỗi thay đổi về màu sắc được gọi là

2. dừng màu

   . Ví dụ cho thấy ba màu sắc khác nhau. Xác định nơi mà màu dừng xảy ra. Theo mặc định, màu sắc được phân bố đều theo gradient. Nếu bạn muốn, bạn có thể di chuyển bất kỳ màu nào để xuất hiện bất cứ nơi nào trên gradient mà bạn muốn. Các điểm dừng màu được biểu thị theo tỷ lệ phần trăm. Không cần thêm vị trí cho điểm dừng màu đầu tiên và cuối cùng, vì chúng được cho là 0% và 100%.

3. Tạo một dải màu bằng cách cung cấp hai điểm dừng có cùng màu.

   Hộp 2 có một dải màu trắng. Để có được hiệu ứng này, hai điểm dừng màu được tạo ra với màu trắng, một trong những xuất hiện ở 33%, và hai ở 66%. Điều này phá vỡ gradient khoảng vào phần ba.

4. Đặt hai màu ở cùng vị trí để thay đổi màu đột ngột.

   Nếu bạn muốn thay đổi màu đột ngột, chỉ cần đặt hai màu khác nhau ở cùng tỷ lệ phần trăm.

5. Lặp lại cho tất cả các trình duyệt.

   Một lần nữa, bạn sẽ cần phải xem xét các trình duyệt khác nhau cho đến khi kỹ thuật này trở nên chuẩn hóa hơn.

6. Cách tạo một gradient xuyên tâm

   CSS3 hỗ trợ một loại gradient thứ hai gọi là

gradient xuyên tâm

. Ý tưởng cơ bản là giống nhau, ngoại trừ thay vì theo một đường thẳng như một gradient tuyến tính, gradient xuyên tâm xuất hiện từ một điểm trung tâm trong phần tử và tỏa ra ngoài. Các gradient xuyên suốt cơ bản được hiển thị trong hộp 3 được tạo ra với mã CSS này: # box3 {background-image: gradient xuyên tâm (trắng, xanh dương); background-image: -moz-radial-gradient (trắng, xanh dương); background-image: -webkit-radial-gradient (white, blue);}

Như bạn thấy, gradient xuyên suốt cơ bản được tạo ra giống như một gradient tuyến tính, ngoại trừ nó sử dụng chức năng gradient xuyên tâm thay vì tuyến tính- gradient chức năng.

Radial gradient có nhiều lựa chọn, điều này làm cho chúng khá hứa hẹn, nhưng trình duyệt hỗ trợ cho các tiêu chuẩn khác nhau là khá đốm. Hộp 4 có một gradient xuyên tâm với ba màu sắc:

# box4 {background-image: gradient xuyên tâm (đỏ, trắng, xanh dương); background-image: -moz-radial-gradient (đỏ, trắng, xanh dương); background-image: -webkit-radial-gradient (đỏ, trắng, xanh);}

Cũng có thể thay đổi hình dạng của gradient từ hình tròn sang hình elip, để thay đổi tâm của gradient sang một điểm khác bên trong, và chỉ định điểm dừng màu. Bạn sẽ cần phải kiểm tra các thông số kỹ thuật hiện tại để xem những điều này đã được thực hiện như thế nào, vì chúng vẫn còn khá thử nghiệm.