Trang trí hình ảnh lạ mắt: Mặt nạ và Hiệu ứng Di chuột nâng cao

Chào mừng bạn đến với Phần 2 của loạt bài gồm ba phần này! Chúng tôi vẫn đang trang trí hình ảnh mà không có bất kỳ yếu tố phụ và yếu tố giả nào. Tôi hy vọng bạn đã dành thời gian để hiểu Phần 1 bởi vì chúng tôi sẽ tiếp tục làm việc với rất nhiều gradient để tạo ra các hiệu ứng hình ảnh tuyệt vời. Chúng tôi cũng sẽ giới thiệu CSS mask tài sản cho các trang trí phức tạp hơn và hiệu ứng di chuột.

Hãy chuyển sang ví dụ đầu tiên mà chúng ta đang làm việc cùng nhau…

Con tem bưu chính

Tin hay không thì tùy, tất cả những gì cần làm để tạo hiệu ứng CSS tem thư là hai gradient và một bộ lọc:

img {
  --r: 10px; /* control the radius of the circles */
  padding: calc(2 * var(--r));
  filter: grayscale(.4);
  background: 
    radial-gradient(var(--r),#0000 98%,#fff) round
      calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#fff 0 0) no-repeat
      50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
}

Như chúng ta đã thấy trong bài viết trước, bước đầu tiên là tạo khoảng trống xung quanh hình ảnh với padding vì vậy chúng ta có thể vẽ một gradient nền và nhìn thấy nó ở đó. Sau đó, chúng tôi sử dụng kết hợp radial-gradient() và linear-gradient() để cắt những vòng tròn đó xung quanh hình ảnh.

Dưới đây là minh họa từng bước cho thấy cách cấu hình các gradient:

Lưu ý việc sử dụng round giá trị trong bước thứ hai. Thủ thuật này rất quan trọng vì nó đảm bảo kích thước của gradient được điều chỉnh để được căn chỉnh hoàn hảo ở tất cả các bên, bất kể chiều rộng hay chiều cao của hình ảnh là bao nhiêu.

Từ các đặc điểm kỹ thuật: Hình ảnh được lặp lại thường xuyên sẽ nằm trong vùng định vị nền. Nếu nó không phù hợp với một số lần, nó sẽ được thay đổi tỷ lệ để phù hợp.

Khung tròn

Hãy xem một trang trí hình ảnh khác sử dụng các vòng tròn…

Ví dụ này cũng sử dụng radial-gradient(), nhưng lần này tôi đã tạo các vòng kết nối xung quanh hình ảnh thay vì hiệu ứng cắt bỏ. Lưu ý rằng tôi cũng đang sử dụng round giá trị một lần nữa. Phần khó nhất ở đây là khoảng cách trong suốt giữa khung hình và hình ảnh, đó là nơi tôi tiếp cận với CSS mask bất động sản:

img {
  --s: 20px; /* size of the frame */
  --g: 10px; /* the gap */
  --c: #FA6900; 

  padding: calc(var(--g) + var(--s));
  background: 
    radial-gradient(farthest-side, var(--c) 97%, #0000) 
      0 0 / calc(2 * var(--s)) calc(2 * var(--s)) round;
  mask:
    conic-gradient(from 90deg at calc(2 * var(--s)) calc(2 * var(--s)), #0000 25%, #000 0)
      calc(-1 * var(--s)) calc(-1 * var(--s)),
    linear-gradient(#000 0 0) content-box;
}

Tạo mặt nạ cho phép chúng tôi hiển thị khu vực của hình ảnh - nhờ vào linear-gradient() trong đó - cũng như 20px xung quanh mỗi mặt của nó - nhờ vào conic-gradient(). Các 20px không là gì ngoài biến --s xác định kích thước của khung. Nói cách khác, chúng ta cần phải che giấu khoảng cách.

Đây là những gì tôi muốn nói:

Gradient tuyến tính là phần màu xanh của nền trong khi gradient conic là phần màu đỏ của nền. Phần trong suốt giữa cả hai gradient là những gì chúng tôi cắt từ phần tử của mình để tạo ảo giác về một đường viền trong suốt bên trong.

Biên giới trong suốt bên trong

Đối với cái này, chúng tôi sẽ không tạo một khung mà là thử một cái gì đó khác. Chúng tôi sẽ tạo một đường viền bên trong trong suốt trong hình ảnh của chúng tôi. Có thể điều đó không hữu ích trong tình huống thực tế, nhưng đó là một phương pháp hay với CSS mask.

Tương tự như ví dụ trước, chúng ta sẽ dựa vào hai gradient: a linear-gradient() cho phần bên trong, và conic-gradient() cho phần bên ngoài. Chúng tôi sẽ để lại một khoảng trống giữa chúng để tạo hiệu ứng viền trong suốt.

img {
  --b: 5px;  /* the border thickness */
  --d: 20px; /* the distance from the edge */

  --_g: calc(100% - 2 * (var(--d) + var(--b)));
  mask:
    conic-gradient(from 90deg at var(--d) var(--d), #0000 25%, #000 0)
      0 0 / calc(100% - var(--d)) calc(100% - var(--d)),
    linear-gradient(#000 0 0) 50% / var(--_g) var(--_g) no-repeat;
}

Bạn có thể nhận thấy rằng gradient conic của ví dụ này có cú pháp khác với ví dụ trước. Cả hai đều được cho là tạo ra cùng một hình dạng, vậy tại sao chúng lại khác nhau? Đó là bởi vì chúng ta có thể đạt được cùng một kết quả bằng cách sử dụng các cú pháp khác nhau. Điều này thoạt nhìn có vẻ khó hiểu, nhưng đó là một tính năng tốt. Bạn không có nghĩa vụ phải tìm các giải pháp để đạt được một hình dạng cụ thể. Bạn chỉ cần tìm một giải pháp phù hợp với mình trong số rất nhiều khả năng hiện có.

Dưới đây là bốn cách để tạo hình vuông bên ngoài bằng cách sử dụng gradient:

Thậm chí còn có nhiều cách để giải quyết vấn đề này, nhưng bạn sẽ hiểu rõ.

Không có cách tiếp cận Tốt nhất ™. Cá nhân tôi cố gắng tìm cái có mã nhỏ nhất và tối ưu nhất. Đối với tôi, bất kỳ giải pháp nào yêu cầu ít gradient hơn, ít phép tính hơn và ít giá trị lặp lại hơn là phù hợp nhất. Đôi khi tôi chọn một cú pháp dài dòng hơn vì nó cho phép tôi linh hoạt hơn để thay đổi các biến và sửa đổi mọi thứ. Nó đi kèm với kinh nghiệm và thực hành. Bạn càng chơi nhiều với gradient, bạn càng biết cú pháp nên sử dụng và khi nào.

Hãy quay lại đường viền trong suốt bên trong của chúng ta và tìm hiểu về hiệu ứng di chuột. Trong trường hợp bạn không nhận thấy, có một hiệu ứng di chuột thú vị giúp di chuyển đường viền trong suốt đó bằng cách sử dụng font-size bí quyết, Thuật, mẹo. Ý tưởng là xác định --d biến có giá trị là 1em. Các biến này kiểm soát khoảng cách của đường viền so với cạnh. Chúng ta có thể biến đổi như thế này:

--_d: calc(var(--d) + var(--s) * 1em)

… Cung cấp cho chúng tôi CSS cập nhật sau:

img {
  --b: 5px;  /* the border thickness */
  --d: 20px; /* the distance from the edge */
  --o: 15px; /* the offset on hover */
  --s: 1;    /* the direction of the hover effect (+1 or -1)*/

  --_d: calc(var(--d) + var(--s) * 1em);
  --_g: calc(100% - 2 * (var(--_d) + var(--b)));
  mask:
    conic-gradient(from 90deg at var(--_d) var(--_d), #0000 25%, #000 0)
     0 0 / calc(100% - var(--_d)) calc(100% - var(--_d)),
    linear-gradient(#000 0 0) 50% / var(--_g) var(--_g) no-repeat;
  font-size: 0;
  transition: .35s;
}
img:hover {
  font-size: var(--o);
}

Sản phẩm font-size ban đầu bằng 0 ,vì thế 1em cũng bằng 0 và --_d bằng với --d. Tuy nhiên, khi di chuột, font-size bằng một giá trị được xác định bởi một --o biến đặt độ lệch của đường viền. Điều này, đến lượt nó, cập nhật --_d biến, di chuyển đường viền bằng khoảng lệch. Sau đó, tôi thêm một biến khác, --s, để kiểm soát dấu hiệu quyết định xem đường viền di chuyển ra bên trong hay bên ngoài.

Sản phẩm font-size Thủ thuật thực sự hữu ích nếu chúng ta muốn tạo hiệu ứng các thuộc tính không nhất trí. Thuộc tính tùy chỉnh được xác định với @property có thể giải quyết điều này nhưng hỗ trợ cho nó vẫn còn thiếu tại thời điểm tôi đang viết điều này.

Khung tiết lộ

Chúng tôi đã thực hiện tiết lộ hình ảnh động sau đây trong phần đầu tiên của loạt bài này:

Chúng ta có thể lấy cùng một ý tưởng, nhưng thay vì đường viền với một màu đồng nhất, chúng ta sẽ sử dụng một gradient như thế này:

Nếu bạn so sánh cả hai mã, bạn sẽ nhận thấy những thay đổi sau:

1. Tôi đã sử dụng cùng một cấu hình gradient từ ví dụ đầu tiên bên trong mask tài sản. Tôi chỉ cần di chuyển các gradient từ background tài sản cho mask bất động sản.
2. Tôi đã thêm một repeating-linear-gradient() để tạo đường viền gradient.

Đó là nó! Tôi đã sử dụng lại hầu hết mã tương tự mà chúng tôi đã thấy - với các chỉnh sửa siêu nhỏ - và có một trang trí hình ảnh thú vị khác với hiệu ứng di chuột.

/* Solid color border */

img {
  --c: #8A9B0F; /* the border color */
  --b: 10px;   /* the border thickness*/
  --g: 5px;  /* the gap on hover */

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, var(--c) 0;
  background: 
    conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g))
     var(--_i, 200%) 0 / 200% var(--_i, var(--b)) no-repeat,
    conic-gradient(at bottom var(--b) left  var(--b), var(--_g))
     0 var(--_i, 200%) / var(--_i, var(--b)) 200% no-repeat;
  transition: .3s, background-position .3s .3s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  transition: .3s, background-size .3s .3s;
}

/* Gradient color border */

img {
  --b: 10px; /* the border thickness*/
  --g: 5px;  /* the gap on hover */
  background: repeating-linear-gradient(135deg, #F8CA00 0 10px, #E97F02 0 20px, #BD1550 0 30px);

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, #000 0;
  mask: 
    conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g))
     var(--_i, 200%) 0 / 200% var(--_i, var(--b)) no-repeat,
    conic-gradient(at bottom var(--b) left  var(--b), var(--_g))
     0 var(--_i, 200%) / var(--_i, var(--b)) 200% no-repeat,
    linear-gradient(#000 0 0) content-box;
  transition: .3s, mask-position .3s .3s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  transition: .3s, mask-size .3s .3s;
}

Hãy thử một hoạt ảnh khung khác. Điều này là một chút khó khăn vì nó có một hoạt ảnh ba bước:

Bước đầu tiên của hoạt ảnh là làm cho cạnh dưới lớn hơn. Đối với điều này, chúng tôi điều chỉnh background-size của một linear-gradient():

Bạn có thể tự hỏi tại sao tôi cũng thêm cạnh trên. Chúng ta cần nó cho bước thứ ba. Tôi luôn cố gắng tối ưu hóa mã mà tôi viết, vì vậy tôi đang sử dụng một gradient để bao phủ cả hai mặt trên và dưới, nhưng phần trên cùng bị ẩn và được tiết lộ sau đó với mask.

Đối với bước thứ hai, chúng tôi thêm một gradient thứ hai để hiển thị các cạnh bên trái và bên phải. Nhưng lần này, chúng tôi làm điều đó bằng cách sử dụng background-position:

Chúng ta có thể dừng lại ở đây vì chúng ta đã có một hiệu ứng đẹp với hai gradient nhưng chúng ta ở đây để đẩy các giới hạn, vì vậy hãy thêm một chút mặt nạ để đạt được bước thứ ba.

Bí quyết là làm cho cạnh trên bị ẩn cho đến khi chúng tôi hiển thị cạnh dưới và các cạnh bên và sau đó chúng tôi cập nhật mask-size (Hoặc mask-position) để hiển thị phần trên cùng. Như tôi đã nói trước đây, chúng ta có thể tìm thấy rất nhiều cấu hình gradient để đạt được hiệu ứng tương tự.

Đây là một minh họa về các gradient mà tôi sẽ sử dụng:

Tôi đang sử dụng hai gradient hình nón có chiều rộng bằng 200%. Cả hai gradient che phủ khu vực chỉ để lại phần trên cùng được che phủ (phần đó sẽ được ẩn sau này). Khi di chuột, tôi trượt cả hai gradient để che phần đó.

Dưới đây là một minh họa tốt hơn về một trong những gradient để cung cấp cho bạn ý tưởng tốt hơn về những gì đang xảy ra:

Bây giờ chúng tôi đặt cái này bên trong mask tài sản và chúng tôi đã hoàn thành! Đây là mã đầy đủ:

img {
  --b: 6px;  /* the border thickness*/
  --g: 10px; /* the gap */
  --c: #0E8D94;

  padding: calc(var(--b) + var(--g));
  --_l: var(--c) var(--b), #0000 0 calc(100% - var(--b)), var(--c) 0;
  background:
    linear-gradient(var(--_l)) 50%/calc(100% - var(--_i,80%)) 100% no-repeat,
    linear-gradient(90deg, var(--_l)) 50% var(--_i,-100%)/100% 200% no-repeat;  
  mask:
    conic-gradient(at 50% var(--b),#0000 25%, #000 0) calc(50% + var(--_i, 50%)) / 200%,
    conic-gradient(at 50% var(--b),#000 75%, #0000 0) calc(50% - var(--_i, 50%)) / 200%;
  transition: 
    .3s calc(.6s - var(--_t,.6s)) mask-position, 
    .3s .3s background-position,
    .3s var(--_t,.6s) background-size,
    .4s transform;
  cursor: pointer;
}
img:hover {
  --_i: 0%;
  --_t: 0s;
  transform: scale(1.2);
}

Tôi cũng đã giới thiệu một số biến để tối ưu hóa mã, nhưng bạn nên làm quen với điều này ngay bây giờ.

Điều gì về một hình ảnh động bốn bước? Vâng nó có thể!

Không có lời giải thích cho điều này vì đó là bài tập về nhà của bạn! Lấy tất cả những gì bạn đã học được trong bài viết này để phân tích mã và cố gắng trình bày rõ những gì nó đang làm. Logic tương tự như tất cả các ví dụ trước. Điều quan trọng là cô lập từng gradient để hiểu từng bước của hoạt ảnh. Tôi đã giữ mã không được tối ưu hóa để làm cho mọi thứ dễ đọc hơn một chút. tôi có một phiên bản được tối ưu hóa nếu bạn quan tâm, nhưng bạn cũng có thể thử tự tối ưu hóa mã và so sánh nó với phiên bản của tôi để thực hành thêm.

Kết thúc

Đó là phần 2 của loạt bài ba phần này về trang trí hình ảnh sáng tạo chỉ sử dụng yếu tố. Giờ đây, chúng tôi đã xử lý tốt cách kết hợp các gradient và mặt nạ để tạo ra các hiệu ứng hình ảnh tuyệt vời và thậm chí cả hình ảnh động - mà không cần đến các yếu tố phụ hoặc yếu tố giả. Có, một đĩa đơn thẻ là đủ!

Chúng tôi còn một bài nữa trong loạt bài này. Cho đến lúc đó, đây là bản demo bổ sung với hiệu ứng di chuột thú vị mà tôi sử dụng mask để lắp ráp một hình ảnh bị hỏng.