Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. CSS
Code

Chỉnh sửa Hình ảnh trong CSS: Kết hợp các Kỹ thuật

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Editing Images in CSS.
Editing Images in CSS: Blend Modes

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong hai bài hướng dẫn gần đây trong loạt bài này, chúng ta đã thảo luận cách các bộ lọc và các chế độ pha trộn có thể thay đổi hoàn toàn hình ảnh của chúng ta. Trong hướng dẫn này, tôi sẽ khái quát những điều cơ bản của việc chỉnh sửa hình ảnh bằng cách sử dụng kết hợp các thuộc tính này với nhau.

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ả các hiệu ứng chỉnh sửa mà chúng ta sẽ tạo ra sẽ có một số CSS cốt lõi phổ biến.

Tôi đã sử dụng các phần tử giả :before:after để tôi có thể áp dụng nhiều chế độ pha trộn. Lưu ý rằng tôi đã thiết lập widthheight 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.

Trong hầu hết các trường hợp, chúng ta sẽ áp dụng các bộ lọc trên các hình ảnh và sử dụng các chế độ pha trộn và các hiệu ứng khác trên các phần tử giả. Hình ảnh dưới đây là hình ảnh gốc mà chúng ta sẽ chỉnh sửa.

image of motorcycle as example for editing

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 phần tử giả ở phía trên hình ảnh. Tôi đã sử dụng chế độ pha trộn overlay để giữ cho hình ảnh hơi tối sau khi áp dụng box-shadow.

Hãy thử di chuyển chuột qua hình ảnh dưới đây để thấy sự khác biệt giữa các bộ lọc và một sự kết hợp của các bộ lọc và chế độ pha trộ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 các 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ự, chúng ta sẽ phải sử dụng thêm các phần tử và các bộ lọc. Đây là CSS của chúng ta:

Lần này, tôi đã áp dụng các bộ lọc trên cả hình ảnh cũng như figure. Về cơ bản, chúng ta muốn hình ảnh ít màu sắc. Đ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 áp dụng sau tất cả các pha trộn. Nếu bạn không áp dụng các bộ lọc, kết quả cuối cùng sẽ có nhiều các sắc thái nổi bật của màu nâu, điều này là không mong muốn.

Bạn nên lưu ý rằng tôi cũng đã áp dụng một nền đỏ bán trong suốt trên cả hai phần tử 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 chúng ta sẽ cố gắng cung cấp cho hình ảnh của chúng ta hue màu xanh dương. So với các màu sắc ấm áp, thêm một sắc thái lạnh như màu xanh dương làm cho hình ảnh dễ chịu cho đôi mắt của chúng ta.

Đây là CSS mà chúng ta cần phải áp dụng:

Tôi bắt đầu bằng cách tăng độ sáng và độ tương phản của hình ảnh của chúng ta. Điều này sẽ đảm bảo rằng hình ảnh của chúng ta không mất các màu sắc kém nổi bật và trở nên quá mờ trong quá 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ó bao giờ 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 thời tiết đó, tất cả mọi thứ có hue là màu vàng, và các đối tượng dường như hơi mờ mờ. Để tái tạo hiệu ứng tương tự, 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: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, brightnesssaturation vào phần tử figure của chúng ta tăng cường mù sương.

Trong phần demo, bạn có thể thử các giá trị khác nhau cho các thuộc tính khác nhau để xem chúng ảnh hưởng thế nào đến kết quả cuối cùng.

Tổng kết

Không khó để chỉnh sửa hình ảnh trong CSS. Nếu bạn lưu ý những điểm mà tôi đã đề cập trong hướng dẫn này, thì bạn sẽ có thể tạo ra một số bộ lọc tuyệt vời của riêng bạn.

Để thực hành, bạn có thể thử nghiệm với các demo trong hướng dẫn này hoặc cố gắng tái tạo các bộ lọc phổ biến của Instagram. Bạn cũng có thể kiểm tra một loạt các hiệu ứng động và các hiệu ứng có sẵn trên Envato Market trong trường hợp bạn cần một số bộ lọc sẵn có để sử dụng.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.