Tóm Tắt
Cơ bản
Bất kỳ cách chỉnh sửa hình ảnh không phải là chính thống thường đòi hỏi không chỉ một phần tử. Điều này có thể được thực hiện với các phần tử giả. Thật không may, có là một cái phức tạp hơn. Phần tử img rơi vào các phần tử thay thế. Kết quả là :before khi và :after sẽ không hoạt động với các thẻ hình ảnh. Để giải quyết vấn đề này, chúng ta sẽ cần một wrapper quanh hình ảnh của chúng ta, và thẻ figure có vẻ là ứng cử viên tốt nhất trong trường hợp này. Vì vậy, mã đánh dấu của chúng ta sẽ giống như thế này:
Tất cả những hiệu ứng chỉnh sửa mà tất cả chúng ta sẽ tạo ra sẽ có 1 số ít CSS cốt lõi phổ cập .
Tôi đã sử dụng các phần tử giả :before và :after để tôi có thể áp dụng nhiều chế độ pha trộn. Lưu ý rằng tôi đã thiết lập width và height thành 100% để bao phủ toàn bộ figure, và tôi đã sử dụng định vị tuyệt đối để canh chỉnh một cách chính xác.
Bạn đang đọc: Chỉnh sửa Hình ảnh trong CSS: Kết hợp các Kỹ thuật
Trong hầu hết những trường hợp, tất cả chúng ta sẽ vận dụng những bộ lọc trên những hình ảnh và sử dụng những chính sách trộn lẫn và những hiệu ứng khác trên những thành phần giả. Hình ảnh dưới đây là hình ảnh gốc mà tất cả chúng ta sẽ chỉnh sửa .
Hình ảnh xám màu có độ tương phản cao
Để tạo ra một hình ảnh tương phản cao, bạn có thể chỉ cần thiết lập độ tương phản ở một giá trị cao, nhưng tăng độ sáng làm cho hiệu ứng ấn tượng hơn. Nếu bạn chỉ sử dụng bộ lọc, thì đó là tất cả những gì bạn có thể làm. Tuy nhiên, với chế độ pha trộn bạn cũng có thể thêm một inset box-shadow với chế độ pha trộn overlay vào hình ảnh để cho kết quả tốt hơn. Đây là CSS cho hiệu ứng này:
Thêm một z-index giữ cho thành phần giả ở phía trên hình ảnh. Tôi đã sử dụng chính sách trộn lẫn overlay để giữ cho hình ảnh hơi tối sau khi vận dụng box-shadow .
Hãy thử chuyển dời chuột qua hình ảnh dưới đây để thấy sự độc lạ giữa những bộ lọc và một sự phối hợp của những bộ lọc và chính sách trộn lẫn .
Để thực hành, bạn có thể thử các giá trị khác nhau cho thuộc tính box-shadow trong demo trên CodePen.
Tạo cho hình ảnh một cái nhìn cũ kỹ
Màu sắc trong hầu hết những bức ảnh cũ thường mờ dần đi, và chúng có một lớp màng bên ngoài màu nâu đỏ. Để tái tạo hiệu ứng tương tự như, tất cả chúng ta sẽ phải sử dụng thêm những thành phần và những bộ lọc. Đây là CSS của tất cả chúng ta :
Lần này, tôi đã vận dụng những bộ lọc trên cả hình ảnh cũng như figure. Về cơ bản, tất cả chúng ta muốn hình ảnh ít sắc tố. Điều này đạt được bằng cách sử dụng bộ lọc saturate với một giá trị thấp hơn 1. Các bộ lọc figure được vận dụng sau tổng thể những trộn lẫn. Nếu bạn không vận dụng những bộ lọc, tác dụng ở đầu cuối sẽ có nhiều những sắc thái điển hình nổi bật của màu nâu, điều này là không mong ước .
Bạn nên quan tâm rằng tôi cũng đã vận dụng một nền đỏ bán trong suốt trên cả hai thành phần giả. Điều này cho hình ảnh một cái nhìn màu nâu đỏ. Box-shadow được sử dụng để giữ cho lớp màn tương đối nâu hơn .
Bạn nên thử nghiệm các thuộc tính khác nhau trong bản demo để xem bạn có thể có được các kết quả tốt hơn hay không.
Thêm một Hue cụ thể
Lần này tất cả chúng ta sẽ nỗ lực cung ứng cho hình ảnh của tất cả chúng ta hue màu xanh dương. So với những sắc tố ấm cúng, thêm một sắc thái lạnh như màu xanh dương làm cho hình ảnh thoải mái và dễ chịu cho đôi mắt của tất cả chúng ta .
Đây là CSS mà tất cả chúng ta cần phải vận dụng :
Tôi khởi đầu bằng cách tăng độ sáng và độ tương phản của hình ảnh của tất cả chúng ta. Điều này sẽ bảo vệ rằng hình ảnh của tất cả chúng ta không mất những sắc tố kém điển hình nổi bật và trở nên quá mờ trong quy trình chỉnh sửa .
Bạn thường phải sử dụng nhiều box-shadow với các màu sắc nhẹ hơn cho những thay đổi đáng chú ý. Đó là lý do tại sao tôi thêm hai box-shadow vào hình ảnh của chúng ta. Chỉ sử dụng một box-shadow hạn chế sắc thái xanh dương trên toàn bộ hình ảnh của chúng ta. Để rải màu xanh dương trên toàn bộ hình ảnh của chúng ta, tôi đã sử dụng nó như là nền trên phần tử giả :after. Đây là kết quả cuối cùng của tất cả các bộ lọc này:
Hãy thử thêm một hue màu xanh lá cây hoặc màu đỏ vào hình ảnh trong bản demo .
Màng sương màu vàng nhạt
Bạn có khi nào tận mắt chứng kiến một buổi tối âm u với cát bụi bay trong không khí vì gió không ? Trong những điều kiện kèm theo thời tiết đó, toàn bộ mọi thứ có hue là màu vàng, và những đối tượng người tiêu dùng có vẻ như hơi mờ mờ. Để tái tạo hiệu ứng tựa như, tất cả chúng ta cần CSS sau đây :
Điều đầu tiên mà tôi làm là làm giảm độ bão hòa của hình ảnh. Cả hai phần tử giả :before và :after có nền màu vàng mờ để thêm hue mong muốn. Sử dụng chế độ pha trộn hard-light trên :after làm cho mây mù nổi bật hơn.
box-shadow trên các phần tử giả làm tăng sự tập trung vào các biker. Cuối cùng, áp dụng bộ lọc contrast, brightness và saturation vào phần tử figure của chúng ta tăng cường mù sương.
Trong phần demo, bạn hoàn toàn có thể thử những giá trị khác nhau cho những thuộc tính khác nhau để xem chúng tác động ảnh hưởng thế nào đến hiệu quả sau cuối .
Tổng kết
Không khó để chỉnh sửa hình ảnh trong CSS. Nếu bạn quan tâm những điểm mà tôi đã đề cập trong hướng dẫn này, thì bạn sẽ hoàn toàn có thể tạo ra 1 số ít bộ lọc tuyệt vời của riêng bạn .
Để thực hành thực tế, bạn hoàn toàn có thể thử nghiệm với những demo trong hướng dẫn này hoặc nỗ lực tái tạo những bộ lọc phổ cập của Instagram. Bạn cũng hoàn toàn có thể kiểm tra một loạt những hiệu ứng động và những hiệu ứng có sẵn trên Envato Market trong trường hợp bạn cần một số ít bộ lọc sẵn có để sử dụng .
Source: https://final-blade.com
Category: Kiến thức Internet
