Mẹo CSS: Bóng đổ nhiều màu & cắt bỏ

Shadow Box thật nhàm chán. Bạn đã nghe tôi. Chúng chỉ có thể sử dụng một màu tại một thời điểm và chuyển động hoặc chuyển đổi chậm . Bạn biết những gì sẽ là gọn gàng? Tạo một bóng đổ sẽ sử dụng màu nền của phần tử. Vì vậy, nếu góc trên cùng bên trái của phần tử của bạn có màu đỏ, thì góc trên cùng bên trái của bóng đổ sẽ có màu đỏ. Nếu góc dưới cùng bên phải có màu xanh lam thì góc dưới cùng bên trái của bóng đổ sẽ có màu xanh lam. Nó sẽ không được gọn gàng? Thật tệ là không có cách nào để làm điều đó trong CSS… Ồ, chờ đã . Hãy đi sâu vào.

Phương pháp

Thực sự, tất cả những gì ta phải làm là tạo một phần tử giả ngay sau phần tử mẹ và để nó kế thừa các thuộc tính có liên quan, chẳng hạn như background và border-radius . Sau đó, ta thêm một bộ lọc CSS blur() . Điều này tạo ra một bản sao thứ hai của nền của phần tử và làm mờ nó phía sau phần tử. Dễ như ăn bánh. Bằng cách kế thừa nền và các thuộc tính liên quan, ta không phải chỉ định chúng nhiều lần.

Thậm chí tốt hơn, nếu bạn muốn tạo hoạt ảnh / Smoosh / làm bóng mờ theo một cách nào đó, bạn có toàn bộ sức mạnh của các biến đổi CSS và độ mờ có sẵn cho bạn trên phần tử giả!

Bắt được là gì? Bóng sẽ không hiển thị trong các trình duyệt không hỗ trợ bộ lọc làm mờ CSS .

Mật mã

/* The element that will have the blurred shadow. */
.fancy-box {
  /* We need to set the position value to something other than `static`
   * so that position: absolute for the pseudo-element will be relative
   * to this element. */
  position: relative;

  /* A nice Alligator.io-themed linear gradient. */
  /* This technique works with any and every background type. */
  background: linear-gradient(to bottom right, rgb(107,183,86), rgb(0,143,104));

  /* Whatever else you want in here. */
}

/* The shadow pseudo-element. */
.fancy-box::before {
  content: ' ';
  /* Position it behind the parent. */
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  /* Inherit the background and border radius of the parent. */
  background: inherit;
  border-radius: inherit;

  /* Blur it for maximum shadowy-ness. */
  filter: blur(15px);

  /* Hide the shadow until the element is hovered over. */
  opacity: 0;
  transition: opacity 300ms;
}

/* Show the shadow on hover. */
.fancy-box:hover::before {
  opacity: 1;
}

Kết quả

Lưu ý cách nó hoạt động ngay cả với hình ảnh trong suốt! Cuối cùng bạn cũng có thể tạo bóng hình! 🎉

Đây là một codepen mà bạn có thể thử.

Vậy hiệu suất thế nào? Chà, miễn là bạn không thường xuyên thay đổi nền hoặc điều chỉnh bán kính mờ, thì nó sẽ nhanh hết mức có thể! Nhìn chung, các đặc điểm hiệu suất của kỹ thuật này có thể so sánh với phương pháp ta đã chỉ cho bạn trước đó đối với các chuyển đổi bóng hộp hiệu quả .

Tags:

Các tin liên quan

Cách hiện đại để xử lý CSS trong React
2018-02-22
CSS-in-JS Roundup: Tạo kiểu cho các thành phần React
2017-08-21
Đặt lại CSS tối thiểu
2017-06-21
Hàm CSS color-mod
2017-01-12
CSS Grid: Holy Grail Layout
2016-12-28
Bố cục lưới CSS: Ký hiệu lặp lại
2016-12-23
Bố cục lưới CSS: Từ khóa Span
2016-12-21
Bố cục lưới CSS: Giới thiệu
2016-12-15
Tạo kiểu văn bản giữ chỗ bằng CSS
2016-12-10
Các giá trị kế thừa, ban đầu và không đặt cho các thuộc tính CSS
2016-12-10