Ảnh động đường viền CSS

Xem xét một số cách tạo ảnh động cho đường viền trong CSS

Bramus

Đặt đường viền

Có một số phương thức để đặt đường viền cho một phần tử: border, outline và box-shadow. Như được trình bày chi tiết trong bài viết 3 phương thức CSS để thêm đường viền phần tử của Stephanie Eckles, mỗi phương pháp đều có ưu và nhược điểm riêng, đặc biệt là khi tạo ảnh động cho đường viền. Lý do chính khiến bạn không sử dụng border CSS thích hợp là để tạo ảnh động.

Ảnh động đường viền bằng outline-offset của Kevin J. Powell

Một bài viết gần đây thu hút sự chú ý của tôi là Hiệu ứng ảnh động đường viền CSS tuyệt vời, trong đó tác giả Coco khám phá thêm nhiều lựa chọn. Bằng cách chèn nội dung được tạo bằng ::before và ::after, họ tạo một đường viền giả rồi tạo ảnh động cho đường viền đó.

Điều khiến tôi ấn tượng nhất là hình ảnh minh hoạ động được dùng trong bài viết. Những chú thích này thực sự giúp giải thích chính xác những gì đang được thực hiện để đạt được hiệu quả mong muốn.

Ảnh động đường viền sử dụng nội dung do Coco tạo

Cả lớp màu trắng và các đường màu đều là nội dung được tạo. Bằng cách làm mờ lớp màu trắng, bạn sẽ thấy rõ cách các lớp xếp chồng lên nhau và cách ảnh động hoạt động.

Giữ lại mô hình hộp

Nhược điểm của việc sử dụng Nội dung được tạo để bắt chước đường viền là bạn sẽ có một mô hình hộp bị hỏng: nội dung hiện có thể che khuất đường viền giả vì "đường viền" nói trên được vẽ bên dưới. Để giảm thiểu, bạn phải áp dụng border-width mong muốn làm padding.

Để có đường viền thực sự (và do đó giữ lại hoạt động của mô hình hộp), bạn có thể sử dụng nhiều nền rồi kéo dài vào vùng đường viền.

Thông tin cơ bản

Hãy bắt đầu bằng cách tạo đường viền chấm và thêm nhiều nền.

/* Size of the border */
--border-size: 0.5rem;

/* Create a dotted border */
border: var(--border-size) dotted lime;

/* Create two background layers:
   1. A white semi-transparent
   2. A layer with the colored boxes
 */
background-image:
  linear-gradient(to right, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.5)),

  conic-gradient(
    from 45deg,
    #d53e33 0deg 90deg,
    #fbb300 90deg 180deg,
    #377af5 180deg 270deg,
    #399953 270deg 360deg
  )
;

Đang định cỡ hình nền bằng background-origin

Như bạn có thể thấy, có điều gì đó không ổn với nền ở đây: chúng được vẽ vào đường viền, nhưng conic-gradient có vẻ không đúng. Đây thực sự là hành vi dự kiến: theo mặc định, hình nền không vẽ vào đường viền vì gốc của chúng là padding-box của phần tử. Để tạo đường viền, hình nền đã đặt sẽ lặp lại trong chính đường viền đó, tạo ra hiệu ứng hình ảnh lạ.

Để giải quyết vấn đề này, bạn cần kéo giãn nền để nền cũng chiếm kích thước của đường viền. Bạn có thể thực hiện việc này theo cách thủ công bằng cách kéo giãn và định vị lại nền, nhưng tốt nhất là sử dụng thuộc tính background-origin để định kích thước nền theo border-box.

Browser Support

• 1
• 12
• 4
• 3

Source

Không nên

/* Manually add or offset the size of the border where needed */
background-position: calc(var(--border-size) * -1) calc(var(--border-size) * -1);
background-size: calc(var(--border-size) * 2 + 100%) calc(var(--border-size) * 2 + 100%);

Nên

background-origin: border-box;

Chỉ cần thêm một dòng này, mọi thứ sẽ trông đẹp hơn nhiều:

Thu nhỏ lớp nền trắng bằng background-clip

Vì nền hiện chiếm toàn bộ không gian, nên lớp bán trong suốt cần được thu nhỏ lại. Thay vì phải điều chỉnh lại background-size, có một cách dễ dàng hơn để thực hiện việc này: sử dụng background-clip và đặt thành padding-box. Bằng cách đó, nền sẽ không còn được vẽ bên dưới vùng đường viền.

Browser Support

• 1
• 12
• 4
• 5

Source

background-clip:
  padding-box, /* Clip white semi-transparent to the padding-box */
  border-box /* Clip colored boxes to the border-box (default) */
;

Cuối cùng, hãy đặt đường viền thành transparent để có hiệu ứng đầy đủ.

border: 0.3rem dotted transparent;

Ảnh động

Để khôi phục ảnh động của đường viền, bạn có thể điều chỉnh góc bắt đầu của conic-gradient.

--angle: 0deg;
conic-gradient(
  from var(--angle),
  #d53e33 0deg 90deg,
  #fbb300 90deg 180deg,
  #377af5 180deg 270deg,
  #399953 270deg 360deg
);

Nhờ @property, việc này trở nên dễ dàng trong các trình duyệt hỗ trợ:

Browser Support

• 85
• 85
• 128
• 16.4

Source

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

Khi kết hợp tất cả, mã sẽ như sau:

Nội dung bổ sung: border-image

Một phương pháp đã được đề cập trước đây để vẽ đường viền chuyển màu là sử dụng border-image CSS.

Browser Support

• 16
• 12
• 15
• 6

Source

Điều này giúp mã đơn giản hơn vì bạn không cần phải xử lý các nền chồng chéo. Bạn có thể áp dụng ảnh động theo cách tương tự như trước đây.

/* Create a border */
border: 0.5rem solid transparent;

/* Paint an image in the border */
border-image:
  conic-gradient(
    from var(--angle),
    #d53e33 0deg 90deg,
    #fbb300 90deg 180deg,
    #377af5 180deg 270deg,
    #399953 270deg 360deg
  ) 1
;

Tuy nhiên, bạn sẽ nhận thấy một số điều không còn hoạt động với phương pháp này:

• border-image không tuân theo border-radius; nó sẽ luôn giữ nguyên hình chữ nhật.
• Khi đặt border-image-slice thành fill, border-image sẽ không được vẽ bên dưới background đã đặt mà ở trên cùng. Điều này có thể gây rắc rối nếu bạn muốn nền bán trong suốt.

Lời kết

Có rất nhiều cách để tạo ảnh động cho đường viền trong CSS. Tuỳ thuộc vào trường hợp sử dụng, bạn có thể nghiêng về một trong hai cách.