Được rồi, vậy lần trước chúng tôi đã đăng ký, chúng tôi đã sử dụng CSS Grid và kết hợp chúng với CSS clip-path và mask kỹ thuật tạo lưới với các hình dạng lạ mắt.
Đây chỉ là một trong những lưới tuyệt vời mà chúng tôi đã cùng nhau tạo ra:
Sẵn sàng cho vòng thứ hai? Chúng tôi vẫn đang làm việc với CSS Grid, clip-pathvà mask, nhưng đến cuối bài viết này, chúng ta sẽ kết thúc với những cách khác nhau để sắp xếp hình ảnh trên lưới, bao gồm một số hiệu ứng di chuột rad giúp mang lại trải nghiệm tương tác, chân thực khi xem ảnh.
Và đoán xem? Chúng tôi đang sử dụng đánh dấu tương tự mà chúng ta đã sử dụng lần trước. Đây là lần nữa:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<!-- as many times as we want -->
</div>Giống như bài viết trước, chúng ta chỉ cần một thùng chứa hình ảnh bên trong. Chỉ có bấy nhiêu thôi!
Lưới hình ảnh lồng nhau
Lần trước, lưới của chúng tôi là lưới hình ảnh điển hình. Ngoài những hình dạng gọn gàng mà chúng tôi che giấu, chúng là những lưới đối xứng khá chuẩn về cách chúng tôi định vị các hình ảnh bên trong.
Hãy thử lồng một hình ảnh vào giữa lưới:
Chúng tôi bắt đầu bằng cách đặt lưới 2✕2 cho bốn hình ảnh:
.gallery {
--s: 200px; /* controls the image size */
--g: 10px; /* controls the gap between images */
display: grid;
gap: var(--g);
grid-template-columns: repeat(2, auto);
}
.gallery > img {
width: var(--s);
aspect-ratio: 1;
object-fit: cover;
}Chưa có gì phức tạp cả. Bước tiếp theo là cắt góc của hình ảnh của chúng ta để tạo khoảng trống cho hình ảnh lồng vào nhau. Tôi đã có bài viết chi tiết về cách cắt góc bằng cách sử dụng clip-path và mask. Bạn cũng có thể sử dụng của tôi máy phát điện trực tuyến để lấy CSS cho việc che các góc.
Điều chúng ta cần ở đây là cắt các góc một góc bằng 90deg. Chúng ta có thể sử dụng tương tự kỹ thuật gradient hình nón từ bài viết đó để làm điều đó:
.gallery > img {
mask: conic-gradient(from var(--_a), #0000 90deg, #000 0);
}
.gallery > img:nth-child(1) { --_a: 90deg; }
.gallery > img:nth-child(2) { --_a: 180deg; }
.gallery > img:nth-child(3) { --_a: 0deg; }
.gallery > img:nth-child(4) { --_a:-90deg; }Chúng ta có thể sử dụng clip-path phương pháp cắt góc từ cùng một bài viết đó, nhưng việc tạo mặt nạ bằng độ dốc phù hợp hơn ở đây vì chúng tôi có cùng cấu hình cho tất cả các hình ảnh - tất cả những gì chúng tôi cần là xoay (được xác định bằng biến --_a) có được hiệu ứng, vì vậy chúng ta che từ bên trong thay vì các cạnh bên ngoài.
Bây giờ chúng ta có thể đặt hình ảnh lồng nhau bên trong không gian bị che. Trước tiên, hãy đảm bảo rằng chúng ta có thành phần hình ảnh thứ năm trong HTML:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
</div>Chúng ta sẽ dựa vào vị trí tuyệt đối tốt để đặt nó vào đó:
.gallery > img:nth-child(5) {
position: absolute;
inset: calc(50% - .5*var(--s));
clip-path: inset(calc(var(--g) / 4));
}Sản phẩm inset thuộc tính cho phép chúng ta đặt hình ảnh ở giữa bằng một khai báo duy nhất. Chúng tôi biết kích thước của hình ảnh (được xác định bằng biến --s) và chúng ta biết rằng kích thước của vùng chứa bằng 100%. Chúng tôi thực hiện một số phép toán và khoảng cách từ mỗi cạnh phải bằng (100% - var(--s))/2.
Bạn có thể thắc mắc tại sao chúng tôi lại sử dụng clip-path ở đây chút nào. Chúng tôi đang sử dụng nó với hình ảnh lồng nhau để có khoảng cách nhất quán. Nếu chúng tôi xóa nó đi, bạn sẽ nhận thấy rằng chúng tôi không có khoảng cách giống nhau giữa tất cả các hình ảnh. Bằng cách này, chúng ta sẽ cắt một chút từ hình ảnh thứ năm để có khoảng cách thích hợp xung quanh nó.
Mã hoàn chỉnh một lần nữa:
.gallery {
--s: 200px; /* controls the image size */
--g: 10px; /* controls the gap between images */
display: grid;
gap: var(--g);
grid-template-columns: repeat(2, auto);
position: relative;
}
.gallery > img {
width: var(--s);
aspect-ratio: 1;
object-fit: cover;
mask: conic-gradient(from var(--_a), #0000 90deg, #000 0);
}
.gallery > img:nth-child(1) {--_a: 90deg}
.gallery > img:nth-child(2) {--_a:180deg}
.gallery > img:nth-child(3) {--_a: 0deg}
.gallery > img:nth-child(4) {--_a:-90deg}
.gallery > img:nth-child(5) {
position: absolute;
inset: calc(50% - .5*var(--s));
clip-path: inset(calc(var(--g) / 4));
}Bây giờ, nhiều bạn cũng có thể thắc mắc: tại sao lại phức tạp như vậy khi chúng ta có thể đặt hình ảnh cuối cùng lên trên cùng và thêm đường viền cho nó? Điều đó sẽ ẩn các hình ảnh bên dưới hình ảnh lồng nhau mà không có mặt nạ, phải không?
Điều đó đúng và chúng ta sẽ nhận được những điều sau:
Không maskkhông clip-path. Vâng, mã rất dễ hiểu, nhưng có một nhược điểm nhỏ: màu đường viền cần phải giống với nền chính để ảo ảnh trở nên hoàn hảo. Hạn chế nhỏ này đủ để tôi làm cho mã phức tạp hơn để đổi lấy tính minh bạch thực sự không phụ thuộc vào nền. Tôi không nói cách tiếp cận biên giới là xấu hay sai. Tôi muốn giới thiệu nó trong hầu hết các trường hợp đã biết nền. Nhưng chúng tôi ở đây để khám phá những nội dung mới và quan trọng nhất là xây dựng các thành phần không phụ thuộc vào môi trường của chúng.
Hãy thử một hình dạng khác lần này:
Lần này, chúng tôi tạo hình ảnh lồng nhau thành hình tròn thay vì hình vuông. Đó là một nhiệm vụ dễ dàng với border-radius Nhưng chúng ta cần sử dụng một cắt hình tròn cho những hình ảnh khác. Tuy nhiên, lần này chúng ta sẽ dựa vào một radial-gradient() thay vì conic-gradient() để có được cái nhìn tròn trịa đẹp đẽ đó.
.gallery > img {
mask:
radial-gradient(farthest-side at var(--_a),
#0000 calc(50% + var(--g)/2), #000 calc(51% + var(--g)/2));
}
.gallery > img:nth-child(1) { --_a: calc(100% + var(--g)/2) calc(100% + var(--g)/2); }
.gallery > img:nth-child(2) { --_a: calc(0% - var(--g)/2) calc(100% + var(--g)/2); }
.gallery > img:nth-child(3) { --_a: calc(100% + var(--g)/2) calc(0% - var(--g)/2); }
.gallery > img:nth-child(4) { --_a: calc(0% - var(--g)/2) calc(0% - var(--g)/2); }Tất cả các hình ảnh đều sử dụng cấu hình giống như ví dụ trước nhưng chúng tôi cập nhật điểm trung tâm mỗi lần.
Hình trên minh họa điểm trung tâm của mỗi vòng tròn. Tuy nhiên, trong mã thực tế, bạn sẽ nhận thấy rằng tôi cũng đang tính đến khoảng cách để đảm bảo tất cả các điểm ở cùng một vị trí (trung tâm của lưới) để có được một vòng tròn liên tục nếu chúng ta kết hợp chúng.
Bây giờ chúng ta đã có bố cục, hãy nói về hiệu ứng di chuột. Trong trường hợp bạn không chú ý, hiệu ứng di chuột thú vị sẽ tăng kích thước của hình ảnh lồng nhau và điều chỉnh mọi thứ khác cho phù hợp. Tăng kích thước là một nhiệm vụ tương đối dễ dàng, nhưng việc cập nhật độ dốc phức tạp hơn vì theo mặc định, độ dốc không thể hoạt hình. Để khắc phục điều này tôi sẽ sử dụng font-size hack để có thể tạo hiệu ứng chuyển động xuyên tâm.
Nếu bạn kiểm tra mã của gradient, bạn có thể thấy rằng tôi đang thêm 1em:
mask:
radial-gradient(farthest-side at var(--_a),
#0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));Nó được biết rằng em đơn vị liên quan đến phần tử cha font-size, do đó việc thay đổi font-size của .gallery cũng sẽ thay đổi tính toán em giá trị - đây là thủ thuật chúng tôi đang sử dụng. Chúng tôi đang hoạt hình font-size từ một giá trị của 0 đến một giá trị nhất định và kết quả là độ dốc được làm động, làm cho phần bị cắt lớn hơn, theo kích thước của hình ảnh lồng nhau ngày càng lớn hơn.
Đây là đoạn mã làm nổi bật các phần liên quan đến hiệu ứng di chuột:
.gallery {
--s: 200px; /* controls the image size */
--g: 10px; /* controls the gaps between images */
font-size: 0; /* initially we have 1em = 0 */
transition: .5s;
}
/* we increase the cut-out by 1em */
.gallery > img {
mask:
radial-gradient(farthest-side at var(--_a),
#0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));
}
/* we increase the size by 2em */
.gallery > img:nth-child(5) {
width: calc(var(--s) + 2em);
}
/* on hover 1em = S/5 */
.gallery:hover {
font-size: calc(var(--s) / 5);
}Sản phẩm font-size thủ thuật này rất hữu ích nếu chúng ta muốn tạo hiệu ứng chuyển màu hoặc các thuộc tính khác không thể tạo hiệu ứng động. Các thuộc tính tùy chỉnh được xác định bằng @property có thể giải quyết vấn đề như vậy, nhưng hỗ trợ cho nó vẫn còn thiếu tại thời điểm viết bài.
Tôi phát hiện ra font-size lừa từ @SelenIT2 trong khi cố gắng giải quyết một thử thách trên Twitter.
Một hình dạng khác? Đi nào!
Lần này chúng ta cắt hình ảnh lồng nhau thành hình thoi. Tôi sẽ để bạn phân tích mã như một bài tập để tìm hiểu làm thế nào chúng ta đến được đây. Bạn sẽ nhận thấy rằng cấu trúc giống như trong ví dụ của chúng tôi. Sự khác biệt duy nhất là cách chúng ta sử dụng gradient để tạo hình dạng. Hãy tìm hiểu và học hỏi!
Lưới hình ảnh tròn
Chúng ta có thể kết hợp những gì đã học được ở đây và trong các bài viết trước để tạo ra một lưới hình ảnh thú vị hơn nữa. Lần này, chúng ta hãy tạo tất cả các hình ảnh trong lưới của chúng ta thành hình tròn và khi di chuột, hãy mở rộng hình ảnh để hiển thị toàn bộ nội dung khi nó bao phủ phần còn lại của ảnh.
Cấu trúc HTML và CSS của lưới không có gì mới so với trước đây, vì vậy hãy bỏ qua phần đó và thay vào đó hãy tập trung vào hình tròn và hiệu ứng di chuột mà chúng ta muốn.
Chúng tôi sẽ sử dụng clip-path và của mình circle() hoạt động - bạn đã đoán được rồi! - cắt một vòng tròn ra khỏi hình ảnh.
Hình vẽ đó minh họa clip-path được sử dụng cho hình ảnh đầu tiên. Phía bên trái hiển thị trạng thái ban đầu của hình ảnh, trong khi bên phải hiển thị trạng thái di chuột. Bạn có thể dùng công cụ trực tuyến này để chơi và hình dung clip-path các giá trị.
Đối với các hình ảnh khác, chúng ta có thể cập nhật tâm của vòng tròn (70% 70%) để lấy đoạn mã sau:
.gallery > img:hover {
--_c: 50%; /* same as "50% at 50% 50%" */
}
.gallery > img:nth-child(1) {
clip-path: circle(var(--_c, 55% at 70% 70%));
}
.gallery > img:nth-child(2) {
clip-path: circle(var(--_c, 55% at 30% 70%));
}
.gallery > img:nth-child(3) {
clip-path: circle(var(--_c, 55% at 70% 30%));
}
.gallery > img:nth-child(4) {
clip-path: circle(var(--_c, 55% at 30% 30%));
}Lưu ý cách chúng tôi xác định clip-path giá trị như một dự phòng bên trong var(). Cách này cho phép chúng ta cập nhật giá trị khi di chuột dễ dàng hơn bằng cách đặt giá trị của --_c Biến đổi. Khi đang sử dụng circle(), vị trí mặc định của điểm trung tâm là 50% 50%, vì vậy chúng ta có thể bỏ qua phần đó để có mã ngắn gọn hơn. Đó là lý do tại sao bạn thấy rằng chúng tôi chỉ đang thiết lập 50% thay vì 50% at 50% 50%.
Sau đó, chúng tôi tăng kích thước hình ảnh khi di chuột lên kích thước tổng thể của lưới để có thể bao phủ các hình ảnh khác. Chúng tôi cũng đảm bảo z-index có giá trị cao hơn trên hình ảnh được di chuột, vì vậy nó là hình ảnh hàng đầu trong bối cảnh xếp chồng.
.gallery {
--s: 200px; /* controls the image size */
--g: 8px; /* controls the gap between images */
display: grid;
grid: auto-flow var(--s) / repeat(2, var(--s));
gap: var(--g);
}
.gallery > img {
width: 100%;
aspect-ratio: 1;
cursor: pointer;
z-index: 0;
transition: .25s, z-index 0s .25s;
}
.gallery > img:hover {
--_c: 50%; /* change the center point on hover */
width: calc(200% + var(--g));
z-index: 1;
transition: .4s, z-index 0s;
}
.gallery > img:nth-child(1){
clip-path: circle(var(--_c, 55% at 70% 70%));
place-self: start;
}
.gallery > img:nth-child(2){
clip-path: circle(var(--_c, 55% at 30% 70%));
place-self: start end;
}
.gallery > img:nth-child(3){
clip-path: circle(var(--_c, 55% at 70% 30%));
place-self: end start;
}
.gallery > img:nth-child(4){
clip-path: circle(var(--_c, 55% at 30% 30%));
place-self: end;
}Chuyện gì đang xảy ra với
place-selftài sản? Tại sao chúng ta cần nó và tại sao mỗi hình ảnh lại có một giá trị cụ thể?
Bạn có nhớ vấn đề chúng ta gặp phải ở bài viết trước khi tạo ra lưới các mảnh ghép? Chúng tôi đã tăng kích thước của hình ảnh để tạo ra tình trạng tràn, nhưng việc tràn một số hình ảnh là không chính xác. Chúng tôi đã sửa chúng bằng cách sử dụng place-self bất động sản.
Vấn đề tương tự ở đây. Chúng tôi đang tăng kích thước của hình ảnh để mỗi hình ảnh tràn các ô lưới của nó. Nhưng nếu chúng ta không làm gì, tất cả chúng sẽ tràn ra phía bên phải và phía dưới của lưới. Những gì chúng ta cần là:
- hình ảnh đầu tiên tràn cạnh dưới cùng bên phải (hành vi mặc định),
- hình ảnh thứ hai tràn ra cạnh dưới bên trái,
- hình ảnh thứ ba tràn vào cạnh trên bên phải và
- hình ảnh thứ tư tràn vào cạnh trên bên trái.
Để có được điều đó, chúng ta cần đặt từng hình ảnh một cách chính xác bằng cách sử dụng place-self bất động sản.
Trong trường hợp bạn không quen với place-self, đó là cách viết tắt của justify-self và align-self để đặt phần tử theo chiều ngang và chiều dọc. Khi nó nhận một giá trị, cả hai cách sắp xếp đều sử dụng cùng một giá trị đó.
Mở rộng bảng hình ảnh
Trong một bài báo trước, Tôi đã tạo một hiệu ứng thu phóng thú vị áp dụng cho một lưới hình ảnh nơi chúng ta có thể kiểm soát mọi thứ: số hàng, số cột, kích thước, hệ số tỷ lệ, v.v.
Một trường hợp cụ thể là bảng mở rộng cổ điển, trong đó chúng tôi chỉ có một hàng và một vùng chứa có chiều rộng đầy đủ.
Chúng ta sẽ lấy ví dụ này và kết hợp nó với các hình dạng!
Trước khi chúng ta tiếp tục, tôi thực sự khuyên bạn nên đọc bài báo khác để hiểu các thủ thuật mà chúng tôi sắp trình bày có tác dụng như thế nào. Hãy kiểm tra điều đó và chúng ta sẽ tiếp tục ở đây để tập trung vào việc tạo các hình dạng bảng điều khiển.
Trước tiên, hãy bắt đầu bằng cách đơn giản hóa mã và loại bỏ một số biến
Chúng ta chỉ cần một hàng và số cột sẽ điều chỉnh dựa trên số lượng hình ảnh. Điều đó có nghĩa là chúng ta không còn cần biến số cho số hàng (--n) và cột (--m ) nhưng chúng ta cần sử dụng grid-auto-flow: column, cho phép lưới tự động tạo các cột khi chúng tôi thêm hình ảnh mới. Chúng tôi sẽ xem xét chiều cao cố định cho vùng chứa của mình; theo mặc định, nó sẽ có chiều rộng đầy đủ.
Hãy cắt các hình ảnh thành một hình nghiêng:
clip-path: polygon(S 0%, 100% 0%, (100% - S) 100%, 0% 100%);Một lần nữa, mỗi hình ảnh được chứa trong ô lưới của nó, do đó, có nhiều khoảng trống giữa các hình ảnh hơn chúng ta muốn:
Chúng ta cần tăng chiều rộng của các hình ảnh để tạo sự chồng chéo. Chúng tôi thay thế min-width: 100% với min-width: calc(100% + var(--s)), Nơi --s là một biến mới điều khiển hình dạng.
Bây giờ chúng ta cần sửa hình ảnh đầu tiên và cuối cùng để chúng tràn ra khỏi trang mà không có khoảng trống. Nói cách khác, chúng ta có thể loại bỏ phần nghiêng ở phía bên trái của hình ảnh đầu tiên và phần nghiêng ở phía bên phải của hình ảnh cuối cùng. Chúng tôi cần một cái mới clip-path đặc biệt cho hai hình ảnh đó.
Chúng ta cũng cần khắc phục tình trạng tràn. Theo mặc định, tất cả các hình ảnh sẽ tràn ở cả hai bên, nhưng đối với hình đầu tiên, chúng ta cần tràn ở bên phải trong khi chúng ta cần tràn sang bên trái cho hình ảnh cuối cùng.
.gallery > img:first-child {
min-width: calc(100% + var(--s)/2);
place-self: start;
clip-path: polygon(0 0,100% 0,calc(100% - var(--s)) 100%,0 100%);
}
.gallery > img:last-child {
min-width: calc(100% + var(--s)/2);
place-self: end;
clip-path: polygon(var(--s) 0,100% 0,100% 100%,0 100%);
}Kết quả cuối cùng là một bảng hình ảnh nghiêng mở rộng đẹp mắt!
Chúng tôi có thể thêm bao nhiêu hình ảnh tùy thích và lưới sẽ tự động điều chỉnh. Ngoài ra, chúng ta chỉ cần kiểm soát một giá trị để kiểm soát hình dạng!
Chúng ta có thể tạo bố cục tương tự này với flexbox vì chúng ta đang xử lý một hàng phần tử. Đây là việc thực hiện của tôi.
Chắc chắn, hình ảnh nghiêng rất đẹp, nhưng còn kiểu zig-zag thì sao? Tôi đã trêu chọc cái này rồi phần cuối của bài viết cuối cùng.
Tất cả những gì tôi đang làm ở đây là thay thế clip-path với mask… và đoán xem? Tôi đã có bài viết chi tiết về tạo ra hình zig-zag đó - chưa kể đến một trực tuyến máy phát điện để lấy mã. Xem làm thế nào tất cả mọi thứ kết hợp với nhau?
Phần khó nhất ở đây là đảm bảo các đường zig-zag được căn chỉnh hoàn hảo và để làm được điều này, chúng ta cần thêm phần bù cho mỗi :nth-child(odd) yếu tố hình ảnh.
.gallery > img {
mask:
conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg)
100% calc(50% + var(--_p, 0%))/51% calc(2*var(--s)) repeat-y,
conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg)
0% calc(50% + var(--_p, 0%))/51% calc(2*var(--s)) repeat-y;
}
/* we add an offset to the odd elements */
.gallery > img:nth-child(odd) {
--_p: var(--s);
}
.gallery > img:first-child {
mask:
conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg)
0 calc(50% + var(--_p, 0%))/100% calc(2*var(--s));
}
.gallery > img:last-child {
mask:
conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg)
0 calc(50% + var(--_p, 0%)) /100% calc(2*var(--s));
}Lưu ý việc sử dụng --_p biến, sẽ quay trở lại 0% nhưng sẽ bằng --_s cho những hình ảnh kỳ lạ.
Đây là bản demo minh họa vấn đề. Di chuột để xem phần bù - được xác định bởi --_p - đang sửa chữa sự liên kết.
Ngoài ra, hãy chú ý cách chúng tôi sử dụng mặt nạ khác cho hình ảnh đầu tiên và hình ảnh cuối cùng như chúng tôi đã làm trong ví dụ trước. Chúng ta chỉ cần một đường zig-zag ở bên phải của hình đầu tiên và bên trái của hình cuối cùng.
Và tại sao các cạnh không tròn? Hãy làm nó!
Tôi biết rằng mã có thể trông đáng sợ và khó hiểu nhưng tất cả những gì đang diễn ra là sự kết hợp của nhiều thủ thuật khác nhau mà chúng tôi đã đề cập trong bài viết này và các bài viết khác mà tôi đã chia sẻ. Trong trường hợp này, tôi sử dụng cấu trúc mã giống như hình zig-zag và hình nghiêng. So sánh nó với những ví dụ đó, bạn sẽ không tìm thấy sự khác biệt nào cả! Đó là những thủ thuật tương tự trong bài viết trước của tôi về hiệu ứng thu phóng. Sau đó, tôi đang sử dụng văn bản khác và trình tạo trực tuyến của tôi để lấy mã cho mặt nạ tạo ra những hình tròn đó.
Nếu bạn nhớ lại những gì chúng tôi đã làm cho zig-zag, chúng tôi đã sử dụng cùng một mặt nạ cho tất cả các hình ảnh nhưng sau đó phải thêm phần bù cho các hình ảnh lẻ để tạo ra sự chồng chéo hoàn hảo. Trong trường hợp này, chúng ta cần một mặt nạ khác cho các ảnh số lẻ.
Mặt nạ đầu tiên:
mask:
linear-gradient(-90deg,#0000 calc(2*var(--s)),#000 0) var(--s),
radial-gradient(var(--s),#000 98%,#0000) 50% / calc(2*var(--s)) calc(1.8*var(--s)) space repeat;
Cái thứ hai:
mask:
radial-gradient(calc(var(--s) + var(--g)) at calc(var(--s) + var(--g)) 50%,#0000 98% ,#000)
calc(50% - var(--s) - var(--g)) / 100% calc(1.8*var(--s))
Nỗ lực duy nhất tôi đã làm ở đây là cập nhật mặt nạ thứ hai để bao gồm biến khoảng cách (--g) để tạo khoảng trống giữa các hình ảnh.
Công việc cuối cùng là sửa hình ảnh đầu tiên và cuối cùng. Giống như tất cả các ví dụ trước, hình ảnh đầu tiên cần có cạnh trái thẳng trong khi hình ảnh cuối cùng cần có cạnh phải thẳng.
Đối với hình ảnh đầu tiên, chúng ta luôn biết mặt nạ cần có, đó là:
.gallery > img:first-child {
mask:
radial-gradient(calc(var(--s) + var(--g)) at right, #0000 98%, #000) 50% / 100% calc(1.8 * var(--s));
}
Đối với hình ảnh cuối cùng, nó phụ thuộc vào số lượng phần tử, vì vậy điều quan trọng là phần tử đó có :nth-child(odd) or :nth-child(even).
.gallery > img:last-child:nth-child(even) {
mask:
linear-gradient(to right,#0000 var(--s),#000 0),
radial-gradient(var(--s),#000 98%,#0000) left / calc(2*var(--s)) calc(1.8*var(--s)) repeat-y
}
.gallery > img:last-child:nth-child(odd) {
mask:
radial-gradient(calc(var(--s) + var(--g)) at left,#0000 98%,#000) 50% / 100% calc(1.8*var(--s))
}Đó là tất cả! Ba bố cục khác nhau nhưng mỗi lần sử dụng cùng một thủ thuật CSS:
- cấu trúc mã để tạo hiệu ứng thu phóng
- một mặt nạ hoặc đường dẫn clip để tạo các hình dạng
- một cấu hình riêng cho các phần tử lẻ trong một số trường hợp để đảm bảo chúng tôi có sự chồng chéo hoàn hảo
- một cấu hình cụ thể cho hình ảnh đầu tiên và cuối cùng để giữ hình dạng chỉ ở một bên.
Và đây là một bản demo lớn kết hợp tất cả chúng lại với nhau. Tất cả những gì bạn cần là thêm một lớp để kích hoạt bố cục mà bạn muốn xem.
Và đây là cái có triển khai Flexbox
Kết thúc
Ôi, chúng ta đã xong rồi! Tôi biết có nhiều thủ thuật và ví dụ CSS giữa bài viết này và bài trước, chưa kể tất cả các thủ thuật khác mà tôi đã tham khảo ở đây từ các bài viết khác mà tôi đã viết. Tôi đã mất thời gian để sắp xếp mọi thứ lại với nhau và bạn không cần phải hiểu mọi thứ cùng một lúc. Một lần đọc sẽ giúp bạn có cái nhìn tổng quan về tất cả các bố cục, nhưng bạn có thể cần phải đọc bài viết nhiều lần và tập trung vào từng ví dụ để nắm bắt tất cả các thủ thuật.
Bạn có nhận thấy rằng chúng tôi không hề động đến HTML ngoài số lượng hình ảnh trong phần đánh dấu không? Tất cả các bố cục chúng tôi đã tạo đều có chung một mã HTML, không gì khác ngoài một danh sách các hình ảnh.
Trước khi kết thúc, tôi sẽ để lại cho bạn một ví dụ cuối cùng. Đó là cuộc “đối đầu” giữa hai nhân vật anime với hiệu ứng di chuột cực ngầu.
Còn bạn thì sao? Bạn có thể tạo ra thứ gì đó dựa trên những gì bạn đã học được không? Nó không cần phải phức tạp - hãy tưởng tượng điều gì đó thú vị hoặc hài hước như tôi đã làm với trận đấu anime đó. Đây có thể là một bài tập tốt cho bạn và chúng tôi có thể kết thúc bằng một bộ sưu tập xuất sắc trong phần bình luận.
