Radial-gradient trong CSS
|
Linear Gradient được sử dụng để sắp xếp hai hoặc nhiều màu trong các định dạng tuyến tính, ví dụ như định dạng từ trên xuống dưới (Top to Bottom) Show
Từ trên xuống dưới
Kết quả là Trái sang phải
Kết quả là Đường chéo trong CSSĐường chéo bắt đầu từ góc trái trên cùng và góc phải dưới cùng
Kết quả là Nhiều màu trong CSS
Kết quả là Radial Gradient trong CSSRadial Gradient xuất hiện tại vị trí trung tâm
Kết quả là Lặp lại Radial Gradient trong CSS
Kết quả là Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng. miễn phí. Tải ngay ứng dụng trên Android và iOS Theo dõi fanpage của nhóm https. //www. Facebook. com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https. //www. Facebook. com/tuyen. vietjack to continue theo dõi hàng loạt bài viết mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile. mới nhất của chúng tôi Gradient - color change linear variable in CSS - QuanTriMang. com định lượng. com
Thông báo
Học CNTT CSS và CSS3 Gradient - biến đổi màu tuyến tính trong CSSBài trước lục mục bài sau Chuyển màu - biến đổi màu tuyến tính trong CSS cho phép tạo ra các phần tử có màu nền nền là các hiệu ứng chuyển màu giữa hai hoặc nhiều màu sắc được chỉ định Có 2 loại Gradient được CSS hỗ trợ
Độ dốc tuyến tínhĐể tạo một Linear Gradient, cần phải xác định ít nhất hai điểm dừng của màu. Điểm dừng màu là các màu bạn muốn hiển thị chuyển tiếp Bạn có thể xác định thêm các hướng (direction) hoặc góc (góc) bắt đầu hiệu ứng chuyển màu. Some direction format as
Cú pháp Linear GradientTham số
Ví dụ1. Linear Gradient - Top to Bottom (Hướng mặc định) Ví dụ sau đây biểu diễn một Linear Gradient bắt đầu từ phía trên (trên cùng). Linear Gradient bắt đầu bằng màu tím và chuyển dần sang màu hồng
Lưu ý . Internet Explorer 9 và các phiên bản trước đó không hỗ trợ gradient. 2. Gradient tuyến tính - Trái sang phải Ví dụ sau đây biểu diễn một Linear Gradient bắt đầu từ bên trái. Linear Gradient bắt đầu bằng màu tím và chuyển dần sang màu hồng
3. Gradient tuyến tính - Đường chéo (Hướng chéo) Bạn có thể tạo gradient theo đường chéo bằng cách xác định cả hướng dọc và ngang Ví dụ sau đây biểu diễn một Linear Gradient bắt đầu từ trên cùng bên trái (và đi xuống dưới cùng bên phải). Linear Gradient bắt đầu bằng màu tím và chuyển dần sang màu hồng
Sử dụng Góc (Angle)Bạn có thể lựa chọn một cách khác để định dạng kiểu gradient đó là sử dụng góc thay vì xác định hướng (đến dưới, lên trên, sang phải, sang trái, xuống dưới bên phải. ) bằng cách sử dụng cú pháp sau Tham số
Ví dụ. Sử dụng góc trong Linear Gradient
Sử dụng nhiều điểm dừng màuVí dụ sau đây để thấy một Linear Gradient (từ trên xuống dưới) với nhiều điểm dừng màu 3 point stop color cách đều nhau 0 7 point stop color cách đều nhau 1 3 điểm dừng màu không cách đều nhau 2 Chú thích. Nếu không chỉ định giá trị % theo sau mỗi điểm dừng màu, thì gradient tự động cách đều nhau Full code 3 7 point stop color cách đều nhau từ trái sang phải 4 5 Sử dụng TransparencyNgoài những cách sử dụng chuyển màu như trên, bạn có thể sử dụng độ trong suốt - transparent trong CSS để tạo hiệu ứng mờ dần kiểu gradient Để bổ sung độ trong suốt cho màu, bạn sử dụng Màu RGBA như đã giới thiệu ở bài học chuyên sâu về màu sắc để xác định các điểm dừng màu. Tham số cuối trong RGBA() quy định độ mờ/độ trong suốt của màu sắc, có giá trị từ 0. 0 - 1. 0, giá trị càng nhỏ thì độ trong suốt càng nhiều Ví dụ. Một gradient tuyến tính nền bắt đầu với màu trong suốt hoàn toàn và chuyển dần dần về màu tím 6 7 lặp lại một Linear GradientHàm repeat-linear-gradient() được sử dụng để lặp lại các Linear Gradient 8 9 0 1 Full code 2 Độ dốc xuyên tâmRadial Gradient tạo hiệu ứng chuyển màu xuất phát từ tâm của phần tử Để tạo một Radial Gradient, bạn cũng phải xác định ít nhất hai điểm dừng màu Cú pháp Radial Gradient3 Tham số
Ví dụ1. Các điểm dừng màu cách đều nhau 4 5 2. Các điểm dừng màu không cách đều nhau 6 7 Tham số value valueTham số hình dạng được sử dụng để xác định hình dạng của gradient, nó có thể là giá trị hình tròn (hình tròn) hoặc hình elip (hình elip) Ví dụ một gradient xuất phát từ tâm với hình dạng là hình tròn 8 9 Tham số value valueTham số kích thước xác định kích thước của gradient. Các giá trị khả thi
phía gần nhất 0 phía xa nhất 1 góc gần nhất. 2 góc xa nhất (default) 3 Mã đầy đủ. 4 lặp lại một Radial GradientHàm repeat-radial-gradient() được sử dụng để lặp lại các Radial Gradient 5 6 Bài trước. Tìm hiểu sâu về Color trong CSS Bài tiếp theo. Hiệu ứng Shadow trong CSS
Thứ Sáu, 31/05/2019 08. 05 4,7 ★ 13 👨 44. 520 #CSS 0 Bình luận Sắp xếp theo Delete Login to Send Bạn nên đọc
CSS và CSS3
CSS và CSS3
Giới thiệu. Điều khoản. bảo mật. Hướng dẫn. Ứng dụng. Liên hệ. Quảng cáo. Facebook. YouTube. DMCA Giấy phép số 362/GP-BTTTT. Bộ Thông tin và Truyền thông cấp ngày 30/06/2016. Cơ quan chủ quản. CÔNG TY CỔ PHẦN MẠNG TRỰC TUYẾN META. address. 56 Duy Tân, Dịch Vọng Hậu, Cầu Giấy, Hà Nội. Điện thoại. 024 2242 6188. E-mail. thông tin @ meta. vn. Chịu trách nhiệm nội dung. Lê Ngọc Lâm Bản quyền © 2003-2023 QuanTriMang. com. Giữ toàn quyền. Không thể sao chép hoặc sử dụng hoặc phát hành lại bất kỳ nội dung nào thuộc về QuanTriMang. com khi chưa được cấp phép |
