Độ dốc tuyến tính CSS3 [Mẹo CSS3]
Dốc là một bổ sung tính năng màu tuyệt vời trong CSS3. Thay vì chỉ thêm một màu, giờ đây chúng tôi có thể thêm nhiều kết hợp màu trong một khối khai báo mà không cần dựa vào hình ảnh, điều này có thể làm giảm yêu cầu HTTP trong trang web của chúng tôi cho phép trang web tải nhanh hơn.
Nếu bạn đã chơi xung quanh với độ dốc trong CSS3, có lẽ bạn đã quen thuộc với hai phương pháp: gradient xuyên tâm và gradient tuyến tính. Bài viết hôm nay sẽ là về sau.
Tạo sinh viên
Như thông số kỹ thuật cho biết độ dốc trong CSS3 là một hình ảnh, nó không có thuộc tính đặc biệt như các tính năng bổ sung mới khác, do đó, nó được khai báo bằng cách sử dụng hình nền tài sản thay thế.
Nếu chúng ta xem cú pháp đầy đủ cho gradient, có vẻ như một chút bội thực, Điều này có thể dẫn đến sự nhầm lẫn cho một số người.
div hình nền: -webkit-linear-gradient (trên cùng, # FF5A00 0%, # FFAE00 100%); hình nền: -moz-linear-gradient (trên cùng, # FF5A00 0%, # FFAE00 100%); hình nền: -ms-linear-gradient (trên cùng, # FF5A00 0%, # FFAE00 100%); hình nền: -o-linear-gradient (trên cùng, # FF5A00 0%, # FFAE00 100%); hình nền: tuyến tính-gradient (trên cùng, # FF5A00 0%, # FFAE00 100%);
Vì vậy, hãy đi sâu vào từng phần của cú pháp từng cái một để làm cho mọi thứ rõ ràng hơn.
Trước hết, gradient tuyến tính được khai báo với độ dốc tuyến tính () chức năng. Hàm này có ba giá trị chính. Giá trị đầu tiên xác định vị trí bắt đầu gradient. Bạn có thể sử dụng một từ khóa mô tả, như hàng đầu để bắt đầu chuyển dòng từ hàng đầu;
div hình nền: độ dốc tuyến tính (trên cùng, # FF5A00, # FFAE00);
Đoạn mã trên là phiên bản chính thức từ W3C để tạo độ dốc. Nó thực sự đơn giản và khá tự giải thích và nó cũng sẽ tạo ra gradient sau.
Bạn cũng có thể dùng dưới cùng làm ngược lại, nếu không đúng và trái.
Chúng tôi cũng có thể tạo một đường chéo bằng cách sử dụng độ góc là vị trí bắt đầu gradient. Đây là một ví dụ:
div hình nền: độ dốc tuyến tính (45deg, # FF5A00, # FFAE00);
Đoạn mã trên sẽ tạo ra dải màu sau:
Giá trị thứ hai của hàm sẽ cho biết màu đầu tiên thông tin và thông tin của nó vị trí dừng được ghi theo tỷ lệ phần trăm. Vị trí dừng thực sự là tùy chọn; trình duyệt đủ thông minh để xác định vị trí thích hợp, vì vậy khi chúng tôi không chỉ định màu dừng đầu tiên, trình duyệt sẽ lấy 0% như mặc định.
Và, giá trị tiếp theo là màu thứ hai sự phối hợp. Nó hoạt động như giá trị trước đó, chỉ có điều nếu đó là màu cuối cùng được áp dụng và chúng tôi không chỉ định vị trí dừng, một giá trị của 100% sẽ được lấy làm mặc định. Bây giờ, hãy xem ví dụ dưới đây:
div hình nền: độ dốc tuyến tính (trên cùng, # FF5A00 0%, # FFAE00 100%);
Đoạn mã trên sẽ tạo ra một độ dốc như những gì chúng ta đã thấy trước đó (không có sự khác biệt) nhưng bây giờ chúng tôi chỉ định vị trí dừng màu;
Bây giờ hãy thay đổi dừng màu, và lần này chúng tôi sẽ chỉ định 50% cho màu đầu tiên và 51% cho màu thứ hai, và hãy xem nó biến thành như thế nào;
div hình nền: độ dốc tuyến tính (trên cùng, # FF5A00 50%, # FFAE00 51%);
Minh bạch
Tạo minh bạch trong gradient cũng có thể. Để tạo hiệu ứng chúng ta cần dịch màu lục giác vào rgba chế độ và hạ thấp kênh alpha.
div hình nền: tuyến tính-gradient (trên cùng, rgba (255,90,0,0.2), rgb (255,174,0,0.2));
Đoạn mã trên sẽ giảm cường độ màu bằng 20%, và gradient sẽ bật ra như thế này:
Nhiều màu sắc
Nếu bạn muốn thêm nhiều màu sắc hơn, chỉ cần thêm các màu bên cạnh một dấu phân cách bằng dấu phẩy và để trình duyệt xác định từng vị trí dừng màu.
div nền-hình ảnh: tuyến tính-gradient (trên cùng, đỏ, cam, vàng, xanh lá cây, xanh dương, chàm, tím);
Đoạn trích trên sẽ tạo ra cầu vồng sau.
tính tương thích của trình duyệt web
Thật không may, tại thời điểm viết bài này, tất cả các trình duyệt hiện tại vẫn chưa hỗ trợ cú pháp tiêu chuẩn. Họ vẫn cần tiền tố nhà cung cấp (-webkit-, -moz-, -Cô- và -o-). Vì vậy, đó là lý do tại sao cú pháp hoàn chỉnh xuất hiện như thế này:
div hình nền: -webkit-linear-gradient (trên cùng, # FF5A00 0%, # FFAE00 100%); hình nền: -moz-linear-gradient (trên cùng, # FF5A00 0%, # FFAE00 100%); hình nền: -ms-linear-gradient (trên cùng, # FF5A00 0%, # FFAE00 100%); hình nền: -o-linear-gradient (trên cùng, # FF5A00 0%, # FFAE00 100%); hình nền: tuyến tính-gradient (trên cùng, # FF5A00 0%, # FFAE00 100%);
Mặt khác, Internet Explorer, cụ thể là phiên bản 9 trở xuống, khác xa so với tiêu chuẩn. Độ dốc trong IE9 và dưới đây được tuyên bố với bộ lọc, Vì vậy, nếu chúng ta muốn thêm gradient trên các trình duyệt đó, chúng ta phải viết một cái gì đó như thế này;
div bộ lọc: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);
Các bộ lọc có những hạn chế của nó: đầu tiên, nó không cho phép nhiều hơn ba màu được thêm vào và việc tạo hiệu ứng trong suốt cũng hơi khó khăn - nó không cho phép rgba, nhưng IE bộ lọc sử dụng #ARGB;
div bộ lọc: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
Đây là một công cụ giúp bạn chuyển đổi rgba đến #ARGB.
- Bản giới thiệu
- Tải xuống nguồn
Viết cú pháp nhanh hơn
Như bạn có thể thấy ở trên, để duy trì khả năng tương thích độ dốc trên các trình duyệt, chúng ta cần thêm năm dòng mã không hiệu quả.
Có nhiều cách chúng ta có thể làm để đơn giản hóa nhiệm vụ; chẳng hạn như sử dụng Prefix-free, Prefixr, LESS hoặc Sass để giúp biên dịch mã, nhưng trên hết, chúng tôi khuyên bạn nên sử dụng công cụ này, ColorZilla Gradient. Công cụ này sẽ chỉ tạo ra tất cả các mã cần thiết để gradient hoạt động trong tất cả các trình duyệt.
Từ cuối cùng
Hôm nay chúng tôi đã thảo luận khá nhiều về việc tạo độ dốc, chúng tôi đã xem xét từng phần của cú pháp, tạo hiệu ứng trong suốt và duy trì khả năng tương thích của trình duyệt. Vì vậy, tại thời điểm này, chúng tôi hy vọng rằng bạn đã hiểu rõ hơn về chủ đề này.
Vẫn còn nhiều điều chúng tôi dự định khám phá Học sinh CSS3 trong các bài viết trong tương lai của chúng tôi, vì vậy hãy theo dõi Hongkiat.com. Cuối cùng, cảm ơn bạn đã đọc bài viết này, chúng tôi hy vọng bạn thích nó.
Đọc thêm
- Hình nền trình duyệt Bullet Proof Cross RGBA - Lea Verou
- Hình ảnh CSS3 - W3.org
- Khi nào tôi có thể sử dụng CSS3 Gradents - CanIUse.com
