Mục lục:
Video: Dispersion Effect: Photoshop Tutorial 2025
Bạn đã nhìn thấy một số chương trình khác được mô tả tạo ra các hình ảnh gradient. Có vẻ như mọi trang web, bao gồm cả CSS3, cung cấp một trang. Dynamic Drive Gradient Image Maker là khác nhau, mặc dù: Nó thực sự tạo ra một tập tin hình ảnh, chứ không phải là tạo ra CSS cuối cùng tạo ra một hình ảnh trên màn hình.
Sự khác biệt rất quan trọng. Sử dụng hình ảnh có nghĩa là trình duyệt chỉ cần hỗ trợ hình ảnh - điều mà mọi trình duyệt hiện nay có thể làm được - nhưng khi sử dụng CSS, bạn cần phải biết rằng trình duyệt nguồn chủ thực hỗ trợ mức CSS yêu cầu. Bạn truy cập Gradient Image Maker bằng cách nhấp vào Hình Nền trên menu Công cụ của trang chính.
Gradient Image Maker có một giao diện đơn giản. Tất cả bạn làm là chọn loại gradient bạn muốn tạo (ngang, dọc hoặc chéo), xác định kích thước gradient, và chọn màu sắc bạn muốn sử dụng.
Khi chọn màu, bạn có thể nhấp vào một khu vực trong bộ chọn màu hoặc bạn có thể nhập mã thập lục phân cho màu bạn muốn sử dụng. Có ít sự linh hoạt trong việc sử dụng công cụ này. Nó được thiết kế đặc biệt để cung cấp một phương tiện đơn giản, nhanh chóng để tạo ra một gradient.
Khi bạn hài lòng với gradient, hãy chọn một định dạng xuất ra hình ảnh. Định dạng JPEG thường sẽ tạo ra các tệp nhỏ hơn, trong khi định dạng PNG nói chung sẽ tạo các tệp có chất lượng cao hơn. Nhấp vào Nhận hình ảnh Kích thước đầy đủ và bạn thấy một tab khác mở bằng hình ảnh độ dốc mà bạn yêu cầu. Nhấp chuột phải vào hình ảnh và chọn Lưu Hình ảnh Là từ trình đơn ngữ cảnh để lưu hình ảnh vào ổ cứng của bạn.
Có một cách để sử dụng hình ảnh làm nền. HTML hỗ trợ một thuộc tính nền cho thẻ. Giả sử thuộc tính này không được tán thành và bạn không nên dựa vào thuộc tính này để tồn tại mãi mãi. Tuy nhiên, nó vẫn hoạt động trong mọi trình duyệt (và trên tất cả các nền tảng). Đoạn mã sau sử dụng thuộc tính background, và sẽ hiển thị một trang với gradient như hình nền trong kích thước được yêu cầu.
Cách sử dụng hình ảnh hiện tại là áp dụng nó bằng CSS. Trong trường hợp này, bạn áp dụng nó bằng cách sử dụng thuộc tính nền cho kiểu body, như được hiển thị ở đây.Thử nghiệm hình nền Gradient Image {background: url ("Gradient. JPG"); background-size: 80px 80px;}
Thử nghiệm một ảnh Gradient
Một số văn bản mẫu
Lợi thế của cách tiếp cận này là bạn có thể kiểm soát kích thước nền, nguồn gốc, và các tính năng khác. Sử dụng CSS, bất cứ khi nào có thể, làm tăng đáng kể tính linh hoạt của việc sử dụng một hình ảnh gradient. Tuy nhiên, nếu bạn sẽ sử dụng CSS anyway, nó thường trả tiền để áp dụng gradient chính nó bằng cách sử dụng CSS.
Lợi thế chính của việc sử dụng hình ảnh qua CSS thuần túy là bạn có thể trao đổi nhanh một hình ảnh với một hình ảnh khác, sử dụng bất kỳ một số kỹ thuật để thay đổi sự xuất hiện của trang, mà không cần viết bất kỳ mã mới nào.
