Sọc nền hoạt hình chuyển tiếp khi di chuột

Tần suất bạn tiếp cận CSS background-size tài sản? Nếu bạn giống tôi — và có lẽ là nhiều người khác — thì đó thường là khi bạn background-size: cover một hình ảnh để lấp đầy không gian của toàn bộ phần tử.

Chà, tôi đã được đưa ra một thử thách thú vị yêu cầu định cỡ nền nâng cao hơn: các sọc nền chuyển tiếp khi di chuột. Kiểm tra cái này và di chuột nó bằng con trỏ của bạn:

Có rất nhiều thứ đang diễn ra ở đó ngoài kích thước của nền, nhưng đó là mẹo tôi cần để chuyển đổi các sọc. Tôi nghĩ tôi sẽ cho bạn thấy tôi đã đến đó như thế nào, không chỉ vì tôi nghĩ đó là một hiệu ứng hình ảnh thực sự đẹp mà còn vì nó yêu cầu tôi phải sáng tạo với các chế độ chuyển màu và hòa trộn mà tôi nghĩ bạn có thể thích.

Hãy bắt đầu với một thiết lập rất cơ bản để giữ mọi thứ đơn giản. Tôi đang nói về một người duy nhất

trong HTML được tạo kiểu dưới dạng hình vuông màu xanh lá cây:

div {
  width: 500px;
  height: 500px;
  background: palegreen;
}

Thiết lập sọc nền

Nếu bạn nghĩ ngay đến một gradient tuyến tính CSS khi bạn nhìn thấy các sọc đó, thì chúng ta đã ở trên cùng một trang. Chính xác là chúng ta không thể thực hiện chuyển màu lặp lại trong trường hợp này vì chúng ta muốn các sọc chiếm một lượng không gian không đồng đều và chuyển đổi chúng, nhưng chúng ta có thể tạo năm sọc bằng cách xâu chuỗi năm nền trên màu nền hiện có của chúng ta và đặt chúng lên trên cùng -bên phải thùng chứa:

div {
  width: 500px;
  height: 500px;
  background: 
    linear-gradient(black, black) top right,
    linear-gradient(black, black) top 100px right,
    linear-gradient(black, black) top 200px right,
    linear-gradient(black, black) top 300px right,
    linear-gradient(black, black) top 400px right, 
    palegreen;
}

Tôi đã tạo các sọc ngang, nhưng chúng ta cũng có thể vẽ theo chiều dọc với cách tiếp cận mà chúng tôi đang trình bày ở đây. Và chúng ta có thể đơn giản hóa điều này một chút với các thuộc tính tùy chỉnh:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
}

Vì vậy, --gt giá trị là độ dốc và --n là một hằng số mà chúng tôi đang sử dụng để dịch chuyển các sọc xuống dưới để chúng lệch nhau theo chiều dọc. Và bạn có thể nhận thấy rằng tôi đã không thiết lập độ dốc thực, mà là các sọc đen liền trong linear-gradient() chức năng — đó là cố ý và chúng ta sẽ tìm hiểu lý do tại sao tôi làm điều đó sau một lát nữa.

Một điều nữa chúng ta nên làm trước khi tiếp tục là ngăn nền của chúng ta lặp lại; nếu không, chúng sẽ xếp gạch và lấp đầy toàn bộ không gian:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
  background-repeat: no-repeat;
}

Chúng tôi có thể đã thiết lập background-repeat trong background viết tắt, nhưng tôi quyết định chia nhỏ nó ra đây để giúp mọi thứ dễ đọc.

Bù đắp các sọc

Về mặt kỹ thuật, chúng tôi có các sọc, nhưng khá khó để phân biệt vì không có khoảng cách giữa chúng và chúng bao phủ toàn bộ thùng chứa. Nó giống như chúng ta có một hình vuông màu đen.

Đây là nơi chúng ta có thể sử dụng background-size tài sản. Chúng tôi muốn đặt cả chiều cao và chiều rộng của các sọc và thuộc tính hỗ trợ cú pháp hai giá trị cho phép chúng tôi thực hiện chính xác điều đó. Và, chúng ta có thể xâu chuỗi các kích thước đó bằng cách phân tách chúng bằng dấu phẩy giống như cách chúng ta đã làm trên background.

Hãy bắt đầu đơn giản bằng cách đặt chiều rộng trước. Sử dụng cú pháp giá trị đơn cho background-size đặt chiều rộng và mặc định chiều cao thành auto. Tôi đang sử dụng các giá trị hoàn toàn tùy ý ở đây, vì vậy hãy đặt các giá trị thành giá trị phù hợp nhất với thiết kế của bạn:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
  background-repeat: no-repeat;
  background-size: 60%, 90%, 70%, 40%, 10%;
}

Nếu bạn đang sử dụng các giá trị giống như tôi, bạn sẽ nhận được điều này:

Có vẻ như chúng ta không đặt chiều rộng cho tất cả các sọc đúng không? Đó là bởi vì auto hành vi chiều cao của cú pháp giá trị đơn. Sọc thứ hai rộng hơn các sọc khác bên dưới và nó bao phủ chúng. Chúng ta nên đặt chiều cao để chúng ta có thể thấy công việc của mình. Tất cả chúng phải có cùng chiều cao và chúng ta thực sự có thể sử dụng lại --n biến, một lần nữa, để giữ cho mọi thứ đơn giản:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
    background-repeat: no-repeat;
    background-size: 60% var(--n), 90% var(--n), 70% var(--n), 40% var(--n), 10% var(--n); // HIGHLIGHT 15
}

À, tốt hơn nhiều!

Thêm khoảng cách giữa các sọc

Đây là một bước hoàn toàn không bắt buộc nếu thiết kế của bạn không yêu cầu khoảng cách giữa các sọc, nhưng của tôi thì có và nó không quá phức tạp. Chúng tôi thay đổi chiều cao của mỗi sọc background-size một nụ cười, làm giảm giá trị để chúng không lấp đầy toàn bộ không gian theo chiều dọc.

Chúng tôi có thể tiếp tục sử dụng --n biến, nhưng trừ đi một lượng nhỏ, giả sử 5px, Sử dụng calc() để có được những gì chúng ta muốn.

background-size: 60% calc(var(--n) - 5px), 90% calc(var(--n) - 5px), 70% calc(var(--n) - 5px), 40% calc(var(--n) - 5px), 10% calc(var(--n) - 5px);

Đó là rất nhiều sự lặp lại mà chúng ta có thể loại bỏ bằng một biến khác:

div {
  --h: calc(var(--n) - 5px);
  /* etc. */
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

Đắp mặt nạ và pha trộn

Bây giờ hãy hoán đổi palegreen màu nền mà chúng tôi đã sử dụng cho mục đích trực quan cho đến thời điểm này là màu trắng.

div {
  /* etc. */
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    #fff;
  /* etc. */
}

Một mẫu màu đen và trắng như thế này là hoàn hảo để tạo mặt nạ và pha trộn. Để làm điều đó, trước tiên chúng ta sẽ bọc

trong vùng chứa chính mới và giới thiệu vùng chứa thứ hai

dưới nó:

Chúng tôi sẽ thực hiện một chút tái cấu trúc CSS tại đây. Bây giờ chúng ta có một vùng chứa cha mới, chúng ta có thể chuyển vùng chứa cố định width và height tài sản chúng tôi đã sử dụng trên của chúng tôi

đằng kia:

section {
  width: 500px;
  height: 500px;
} 

Tôi cũng sẽ sử dụng CSS Grid để định vị hai

các phần tử chồng lên nhau. Đây cũng là mẹo mà Temani Afif sử dụng để tạo thư viện hình ảnh siêu mát mẻ. Ý tưởng là chúng ta đặt cả hai div trên vùng chứa đầy bằng cách sử dụng grid-area property và căn chỉnh mọi thứ về phía trung tâm:

section {
  display: grid;
  align-items: center;
  justify-items: center;
  width: 500px;
  height: 500px;
} 

section > div {
  width: inherit;
  height: inherit;
  grid-area: 1 / 1;
}

Bây giờ, hãy kiểm tra điều này. Lý do tôi sử dụng một dải màu chuyển từ đen sang đen trước đó là để thiết lập cho chúng tôi mặt nạ và trộn hai

lớp. Đây không phải là mặt nạ thực sự theo nghĩa mà chúng tôi gọi là mask thuộc tính, nhưng độ tương phản giữa các lớp kiểm soát màu nào có thể nhìn thấy. Khu vực được bao phủ bởi màu trắng sẽ vẫn giữ nguyên màu trắng và khu vực được bao phủ bởi màu đen sẽ rò rỉ ra ngoài. Tài liệu của MDN về chế độ hòa trộn có một lời giải thích tốt đẹp về cách thức hoạt động của nó.

Để nó hoạt động, tôi sẽ áp dụng độ dốc thực mà chúng ta muốn thấy ở phần đầu tiên

trong khi áp dụng các quy tắc phong cách từ ban đầu của chúng tôi

trên cái mới, sử dụng :nth-child() bộ chọn giả:

div:nth-child(1) { 
  background: linear-gradient(to right, red, orange); 
}

div:nth-child(2)  {
  --gt: linear-gradient(black, black);
  --n: 100px;
  --h: calc(var(--n) - 5px);
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    white;
  background-repeat: no-repeat;
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

Nếu dừng lại ở đây, chúng tôi thực sự sẽ không thấy bất kỳ sự khác biệt trực quan nào so với những gì chúng tôi đã thấy trước đây. Đó là bởi vì chúng tôi chưa thực hiện pha trộn thực sự. Vì vậy, hãy làm điều đó ngay bây giờ bằng cách sử dụng screen chế độ hòa trộn:

div:nth-child(2)  {
  /* etc. */
  mix-blend-mode: screen;
}

Tôi đã sử dụng màu nền màu be trong bản trình diễn mà tôi đã trình bày ở đầu bài viết này. Loại màu trắng hơi tối hơn đó cho phép một chút màu chảy qua phần còn lại của nền:

Hiệu ứng di chuột

Phần cuối cùng của câu đố này là hiệu ứng di chuột giúp mở rộng các sọc ra toàn bộ chiều rộng. Đầu tiên, hãy viết bộ chọn của chúng ta cho nó. Chúng tôi muốn điều này xảy ra khi vùng chứa chính (

trong trường hợp của chúng tôi) được di chuột. Khi nó được di chuột, chúng tôi sẽ thay đổi kích thước nền của các sọc có trong phần thứ hai

:

/* When 
 is hovered, change the second div's styles */
section:hover > div:nth-child(2){
  /* styles go here */
}

Chúng tôi sẽ muốn thay đổi background-size của các sọc lên toàn bộ chiều rộng của vùng chứa trong khi vẫn giữ nguyên chiều cao:

section:hover > div:nth-child(2){
  background-size: 100% var(--h);
}

Điều đó "bắt" nền thành toàn bộ chiều rộng. Nếu chúng ta thêm một ít transition về điều này, sau đó chúng ta thấy các sọc mở rộng khi di chuột:

section:hover > div:nth-child(2){
  background-size: 100% var(--h);
  transition: background-size 1s;
}

Đây là bản demo cuối cùng một lần nữa:

Tôi chỉ thêm văn bản vào đó để hiển thị nó trông như thế nào khi sử dụng văn bản này trong một ngữ cảnh khác. Nếu bạn cũng làm như vậy, bạn nên đảm bảo có đủ độ tương phản giữa màu văn bản và màu được sử dụng trong dải màu để phù hợp với Hướng dẫn WCAG. Và mặc dù chúng tôi đang đề cập ngắn gọn về khả năng tiếp cận, nhưng nó đáng xem xét sở thích của người dùng để giảm chuyển động khi nói đến hiệu ứng di chuột.

Đó là một bọc!

Khá gọn gàng, phải không? Tôi chắc chắn nghĩ như vậy. Điều tôi thích về điều này là nó khá dễ bảo trì và có thể tùy chỉnh. Ví dụ: chúng ta có thể thay đổi chiều cao, màu sắc và hướng của các sọc bằng cách thay đổi một vài giá trị. Bạn thậm chí có thể thay đổi một số thứ khác trong đó — chẳng hạn như màu sắc và chiều rộng — để làm cho nó dễ cấu hình hơn.

Tôi thực sự quan tâm nếu bạn tiếp cận vấn đề này theo một cách khác. Nếu vậy, xin vui lòng chia sẻ trong các ý kiến! Sẽ rất tuyệt nếu chúng ta có thể thu thập bao nhiêu biến thể.