Trang trí hình ảnh lạ mắt: Đường viền và Hình ảnh động phức tạp

Chúng tôi đã dành hai bài cuối cùng trong loạt bài gồm ba phần này để chơi với các gradient để tạo ra các hình ảnh trang trí thực sự gọn gàng mà không sử dụng gì ngoài yếu tố. Trong phần thứ ba và phần cuối cùng này, chúng ta sẽ khám phá thêm các kỹ thuật sử dụng CSS outline tài sản. Điều đó nghe có vẻ kỳ quặc vì chúng ta thường sử dụng outline để vẽ một đường đơn giản xung quanh một phần tử - sorta như border nhưng nó chỉ có thể vẽ tất cả bốn cạnh cùng một lúc và không phải là một phần của Mô hình Hộp.

Tuy nhiên, chúng tôi có thể làm được nhiều việc hơn với nó, và đó là những gì tôi muốn thử nghiệm trong bài viết này.

Hãy bắt đầu với ví dụ đầu tiên của chúng tôi - một lớp phủ biến mất khi di chuột với một hoạt ảnh thú vị:

Chúng tôi có thể thực hiện điều này bằng cách thêm một yếu tố bổ sung trên hình ảnh, nhưng đó là điều chúng tôi đang thử thách chính mình không để làm trong loạt bài này. Thay vào đó, chúng ta có thể tiếp cận với CSS outline tài sản và đòn bẩy mà nó có thể có phần bù âm và có thể chồng lên phần tử của nó.

img {
  --s: 250px; /* the size of the image */
  --b: 8px;   /* the border thickness*/
  --g: 14px;  /* the gap */
  --c: #4ECDC4;

  width: var(--s);
  aspect-ratio: 1;
  outline: calc(var(--s) / 2) solid #0009;
  outline-offset: calc(var(--s) / -2);
  cursor: pointer;
  transition: 0.3s;
}
img:hover {
  outline: var(--b) solid var(--c);
  outline-offset: var(--g);
}

Bí quyết là tạo ra một outline dày bằng một nửa kích thước hình ảnh, sau đó bù đắp nó bằng một nửa kích thước hình ảnh với một giá trị âm. Thêm một số nửa trong suốt với màu sắc và chúng tôi có lớp phủ của chúng tôi!

Phần còn lại là những gì xảy ra trên :hover. Chúng tôi cập nhật outline và sự chuyển đổi giữa cả hai đường viền tạo ra hiệu ứng di chuột thú vị. Kỹ thuật tương tự cũng có thể được sử dụng để tạo hiệu ứng mờ dần nơi chúng ta không di chuyển outline nhưng hãy làm cho nó minh bạch.

Thay vì sử dụng một nửa kích thước hình ảnh trong hình này, tôi đang sử dụng outline giá trị độ dày (100vmax) trong khi áp dụng mặt nạ CSS. Với điều này, bạn không cần phải biết kích thước hình ảnh nữa - mẹo này hoạt động ở mọi kích thước!

Bạn có thể gặp phải sự cố khi sử dụng 100vmax như một giá trị lớn trong Safari. Nếu đúng như vậy, hãy xem xét thủ thuật trước đó mà bạn thay thế 100vmax với một nửa kích thước hình ảnh.

Chúng ta có thể đưa mọi thứ đi xa hơn nữa! Ví dụ: thay vì chỉ cắt bớt phần thừa outline, chúng ta có thể tạo các hình dạng và áp dụng hoạt ảnh tiết lộ lạ mắt.

Tuyệt vời phải không? Các outline là thứ tạo ra lớp phủ màu vàng. Các clip-path clip bổ sung outline để có được hình ngôi sao. Sau đó, khi di chuột, chúng tôi làm cho màu trong suốt.

Oh, bạn muốn trái tim thay thế? Chúng tôi chắc chắn có thể làm được điều đó!

Hãy tưởng tượng tất cả các kết hợp có thể có mà chúng ta có thể tạo ra. Tất cả những gì chúng ta phải làm là vẽ một hình dạng với mặt nạ CSS và / hoặc clip-path và kết hợp nó với outline bí quyết, Thuật, mẹo. Một giải pháp, khả năng vô hạn!

Và, vâng, chúng tôi chắc chắn cũng có thể làm động điều này. Đừng quên điều đó clip-path là hoạt hình và mask dựa vào gradient - thứ mà chúng tôi đã đề cập rất chi tiết trong hai bài viết đầu tiên của loạt bài này.

Tôi biết, hình ảnh động có một chút trục trặc. Đây là một bản demo để minh họa ý tưởng hơn là "sản phẩm cuối cùng" được sử dụng trong một địa điểm sản xuất. Chúng tôi muốn tối ưu hóa mọi thứ để chuyển đổi tự nhiên hơn.

Đây là một bản demo sử dụng mask thay vì. Đó là người tôi đã trêu chọc bạn ở cuối bài viết cuối cùng:

Bạn có biết rằng outline tài sản có khả năng tuyệt vời như vậy? Thêm nó vào hộp công cụ của bạn để trang trí hình ảnh lạ mắt!

Kết hợp tất cả những thứ!

Bây giờ chúng ta đã học được nhiều thủ thuật sử dụng gradient, mặt nạ, cắt và phác thảo, đã đến lúc cho đêm chung kết. Hãy tóm tắt loạt bài này bằng cách kết hợp tất cả những gì chúng ta đã học được trong vài tuần qua để giới thiệu không chỉ các kỹ thuật mà còn chứng minh các cách tiếp cận này linh hoạt và mô-đun như thế nào.

Nếu bạn nhìn thấy những bản demo này lần đầu tiên, bạn có thể cho rằng có một loạt các trình bao bọc divs bổ sung và các phần tử giả đang được sử dụng để kéo chúng ra. Nhưng mọi thứ đang diễn ra trực tiếp trên yếu tố. Đó là bộ chọn duy nhất chúng ta cần để có được những hình dạng và hiệu ứng nâng cao này!

Kết thúc

Chà, geez, cảm ơn vì đã đi chơi với tôi trong loạt phim ba phần này trong vài tuần qua. Chúng tôi đã khám phá một loạt các kỹ thuật khác nhau để biến những hình ảnh đơn giản thành thứ gì đó bắt mắt và tương tác. Bạn sẽ sử dụng mọi thứ mà chúng tôi đã đề cập? Chắc chắn là không rồi! Nhưng tôi hy vọng rằng đây là một bài tập tốt để bạn đào sâu vào các cách sử dụng nâng cao của các tính năng CSS, như gradient, mask, clip-pathvà outline.

Và chúng tôi đã làm mọi thứ chỉ với một yếu tố! Không có trình bao bọc div thừa và phần tử giả. Chắc chắn, đó là một hạn chế mà chúng tôi tự đặt ra, nhưng nó cũng thúc đẩy chúng tôi khám phá CSS và cố gắng tìm ra các giải pháp sáng tạo cho các trường hợp sử dụng phổ biến. Vì vậy, trước khi đưa thêm đánh dấu vào HTML của bạn, hãy nghĩ xem liệu CSS đã có khả năng xử lý tác vụ hay chưa.