Trong một bài viết trước, tôi đã xem xét khả năng của CSS Grid để tạo bố cục phức tạp bằng cách sử dụng sức mạnh tự động sắp xếp của nó. Tôi đã tiến thêm một bước nữa trong một bài báo khác đã thêm hiệu ứng di chuột thu phóng vào hình ảnh trong bố cục lưới. Lần này, tôi muốn đi sâu vào một loại lưới khác, một loại lưới hoạt động với các hình dạng.
Giống như, điều gì sẽ xảy ra nếu hình ảnh không phải là hình vuông hoàn hảo mà thay vào đó là hình lục giác hoặc hình thoi? Cảnh báo spoiler: chúng ta có thể làm được. Trên thực tế, chúng tôi sẽ kết hợp các kỹ thuật CSS Grid mà chúng tôi đã xem xét và đưa vào một số CSS clip-path và mask phép thuật để tạo ra các lưới hình ảnh lạ mắt cho bất kỳ hình dạng nào bạn có thể tưởng tượng!
Hãy bắt đầu với một số đánh dấu
Hầu hết các bố cục chúng ta sẽ xem xét thoạt nhìn có thể dễ dàng đạt được, nhưng phần thách thức là đạt được chúng với đánh dấu HTML giống nhau. Chúng ta có thể sử dụng nhiều trình bao bọc, divs, và không, nhưng mục tiêu của bài đăng này là sử dụng cùng một lượng mã HTML nhỏ nhất và vẫn nhận được tất cả các lưới khác nhau mà chúng tôi muốn. Rốt cuộc, CSS là gì ngoài một cách để tách biệt kiểu dáng và đánh dấu? Kiểu dáng của chúng ta không nên phụ thuộc vào đánh dấu và ngược lại.
Điều này đã nói, hãy bắt đầu với điều này:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<!-- as many times as we want -->
</div>Một vùng chứa với hình ảnh là tất cả những gì chúng ta cần ở đây. Chỉ có bấy nhiêu thôi!
Lưới CSS hình lục giác
Đây cũng đôi khi được gọi là lưới "tổ ong".
Đã có rất nhiều bài đăng trên blog khác hướng dẫn cách thực hiện điều này. Heck, tôi đã viết một ở đây trên CSS-Tricks! Bài viết đó vẫn tốt và đi sâu vào việc tạo bố cục đáp ứng. Nhưng đối với trường hợp cụ thể này, chúng ta sẽ dựa trên một cách tiếp cận CSS đơn giản hơn nhiều.
Đầu tiên, hãy sử dụng clip-path trên các hình ảnh để tạo hình lục giác và chúng tôi đặt tất cả chúng trong cùng một vùng lưới để chúng chồng lên nhau.
.gallery {
--s: 150px; /* controls the size */
display: grid;
}
.gallery > img {
grid-area: 1/1;
width: var(--s);
aspect-ratio: 1.15;
object-fit: cover;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%)Chưa có gì lạ mắt. Tất cả các hình ảnh là hình lục giác và ở trên nhau. Vì vậy, có vẻ như tất cả những gì chúng ta có là một phần tử hình lục giác duy nhất, nhưng thực sự có tới bảy.
Bước tiếp theo là áp dụng một bản dịch cho các hình ảnh để đặt chúng vào lưới một cách chính xác.
Lưu ý rằng chúng tôi vẫn muốn một trong những hình ảnh vẫn ở trung tâm. Phần còn lại được đặt xung quanh nó bằng cách sử dụng CSS translate và hình học thời trang tốt. Dưới đây là các công thức giả mà tôi đã nghĩ ra cho mỗi hình ảnh trong lưới:
translate((height + gap)*sin(0deg), (height + gap)*cos(0))
translate((height + gap)*sin(60deg), (height + gap)*cos(60deg))
translate((height + gap)*sin(120deg), (height + gap)*cos(120deg))
translate((height + gap)*sin(180deg), (height + gap)*cos(180deg))
translate((height + gap)*sin(240deg), (height + gap)*cos(240deg))
translate((height + gap)*sin(300deg), (height + gap)*cos(300deg))Một vài phép tính và tối ưu hóa sau đó (chúng ta hãy bỏ qua phần nhàm chán đó, phải không?), Chúng ta nhận được CSS sau:
.gallery {
--s: 150px; /* control the size */
--g: 10px; /* control the gap */
display: grid;
}
.gallery > img {
grid-area: 1/1;
width: var(--s);
aspect-ratio: 1.15;
object-fit: cover;
clip-path: polygon(25% 0%, 75% 0%, 100% 50% ,75% 100%, 25% 100%, 0 50%);
transform: translate(var(--_x,0), var(--_y,0));
}
.gallery > img:nth-child(1) { --_y: calc(-100% - var(--g)); }
.gallery > img:nth-child(7) { --_y: calc( 100% + var(--g)); }
.gallery > img:nth-child(3),
.gallery > img:nth-child(5) { --_x: calc(-75% - .87*var(--g)); }
.gallery > img:nth-child(4),
.gallery > img:nth-child(6) { --_x: calc( 75% + .87*var(--g)); }
.gallery > img:nth-child(3),
.gallery > img:nth-child(4) { --_y: calc(-50% - .5*var(--g)); }
.gallery > img:nth-child(5),
.gallery > img:nth-child(6) { --_y: calc( 50% + .5*var(--g)); }Có lẽ điều đó sẽ dễ dàng hơn khi chúng tôi nhận được các hàm lượng giác thực trong CSS!
Mỗi hình ảnh được dịch bởi --_x và --_y các biến dựa trên các công thức đó. Chỉ hình ảnh thứ hai (nth-child(2)) không được xác định trong bất kỳ bộ chọn nào vì nó là bộ chọn ở trung tâm. Nó có thể là bất kỳ hình ảnh nào nếu bạn quyết định sử dụng một thứ tự khác. Đây là đơn đặt hàng tôi đang sử dụng:
Chỉ với một vài dòng mã, chúng ta sẽ có được một lưới hình ảnh tuyệt vời. Đối với điều này, tôi đã thêm một chút hiệu ứng di chuột vào các hình ảnh để làm cho mọi thứ trở nên đẹp hơn.
Đoán xem nào? Chúng ta có thể có được một lưới lục giác khác bằng cách cập nhật một vài giá trị.
Nếu bạn kiểm tra mã và so sánh với mã trước đó, bạn sẽ nhận thấy rằng tôi chỉ cần hoán đổi các giá trị bên trong clip-path và tôi đã chuyển đổi giữa --x và --y. Đó là tất cả!
Lưới hình thoi CSS
Rhombus là một từ lạ mắt để chỉ một hình vuông xoay 45 độ.
HTML giống nhau, nhớ không? Đầu tiên chúng ta bắt đầu bằng cách xác định lưới hình ảnh 2 × 2 trong CSS:
.gallery {
--s: 150px; /* controls the size */
display: grid;
gap: 10px;
grid: auto-flow var(--s) / repeat(2, var(--s));
place-items: center;
}
.gallery > img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
}Điều đầu tiên có thể thu hút sự chú ý của bạn là grid tài sản. Nó được sử dụng khá phổ biến nhưng rất hữu ích ở chỗ nó là một cách viết tắt cho phép bạn xác định một lưới hoàn chỉnh trong một khai báo. Nó không phải là thuộc tính trực quan nhất - và chưa kể đến thuộc tính có thể đọc được -, nhưng chúng tôi ở đây để học và khám phá những thứ mới, vì vậy hãy sử dụng nó hơn là viết ra tất cả các thuộc tính lưới riêng lẻ.
grid: auto-flow var(--s) / repeat(2,var(--s));
/* is equivalent to this: */
grid-template-columns: repeat(2, var(--s));
grid-auto-rows: var(--s);Điều này xác định hai cột bằng --s biến và đặt chiều cao của tất cả các hàng thành --s cũng. Vì chúng ta có bốn hình ảnh, chúng ta sẽ tự động nhận được lưới 2 × 2.
Đây là một cách khác mà chúng tôi có thể viết nó:
grid-template-columns: repeat(2, var(--s));
grid-template-rows: repeat(2, var(--s));… Có thể được giảm bớt với grid tốc ký:
grid: repeat(2,var(--s)) / repeat(2,var(--s));Sau khi thiết lập lưới, chúng tôi xoay nó và các hình ảnh bằng CSS transforms và chúng tôi nhận được điều này:
Lưu ý cách tôi xoay cả hai bằng cách 45deg, nhưng theo hướng ngược lại.
.gallery {
/* etc. */
transform: rotate(45deg);
}
.gallery > img {
/* etc. */
transform: rotate(-45deg);
}Xoay hình ảnh theo hướng tiêu cực sẽ ngăn không cho chúng xoay theo lưới để chúng luôn thẳng. Bây giờ, chúng tôi áp dụng một clip-path để cắt một hình thoi ra khỏi chúng.
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)Chúng ta đang gần hoàn tất! Chúng ta cần phải điều chỉnh kích thước của hình ảnh để làm cho chúng phù hợp với nhau. Nếu không, chúng cách xa nhau đến mức trông không giống như một lưới hình ảnh.
Hình ảnh nằm trong ranh giới của hình tròn màu xanh lá cây, là hình tròn nội tiếp của vùng lưới nơi hình ảnh được đặt. Những gì chúng tôi muốn là làm cho hình ảnh lớn hơn để vừa với bên trong vòng tròn màu đỏ, đó là hình tròn ngoại tiếp của khu vực lưới.
Đừng lo lắng, tôi sẽ không giới thiệu bất kỳ hình học nhàm chán nào nữa. Tất cả những gì bạn cần biết là mối quan hệ giữa bán kính của mỗi hình tròn là căn bậc hai của 2 (sqrt(2)). Đây là giá trị chúng ta cần để tăng kích thước hình ảnh của mình để lấp đầy khu vực. Chúng tôi sẽ sử dụng 100%*sqrt(2) = 141% và được thực hiện!
.gallery {
--s: 150px; /* control the size */
display: grid;
grid: auto-flow var(--s) / repeat(2,var(--s));
gap: 10px;
place-items: center;
transform: rotate(45deg);
}
.gallery > img {
width: 141%; /* 100%*sqrt(2) = 141% */
aspect-ratio: 1;
object-fit: cover;
transform: rotate(-45deg);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}Giống như lưới lục giác, chúng ta có thể làm cho mọi thứ trở nên huyền ảo hơn với hiệu ứng di chuột thu phóng đẹp mắt đó:
CSS Grid of Triangle Shapes
Bây giờ bạn có thể biết rằng thủ thuật lớn là tìm ra clip-path để có được những hình dạng chúng ta muốn. Đối với lưới này, mỗi phần tử có clip-path giá trị trong khi hai lưới cuối cùng hoạt động với một hình dạng nhất quán. Vì vậy, lần này, giống như chúng ta đang làm việc với một vài hình tam giác khác nhau kết hợp với nhau để tạo thành một lưới hình chữ nhật.
Chúng tôi đặt chúng bên trong lưới 3 × 2 với CSS sau:
.gallery {
display: grid;
gap: 10px;
grid-template-columns: auto auto auto; /* 3 columns */
place-items: center;
}
.gallery > img {
width: 200px; /* controls the size */
aspect-ratio: 1;
object-fit: cover;
}
/* the clip-path values */
.gallery > img:nth-child(1) { clip-path: polygon(0 0, 50% 0, 100% 100% ,0 100%); }
.gallery > img:nth-child(2) { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.gallery > img:nth-child(3) { clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%); }
.gallery > img:nth-child(4) { clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%); }
.gallery > img:nth-child(5) { clip-path: polygon(50% 0, 100% 100%, 0% 100%); }
.gallery > img:nth-child(6) { clip-path: polygon(0 0, 100% 0 ,100% 100%, 50% 100%); } }Đây là những gì chúng tôi nhận được:
Bước cuối cùng là làm cho chiều rộng của cột ở giữa bằng nhau 0 để loại bỏ khoảng cách giữa các hình ảnh. Cùng một loại vấn đề về khoảng cách mà chúng tôi gặp phải với lưới hình thoi, nhưng với một cách tiếp cận khác cho các hình dạng mà chúng tôi đang sử dụng:
grid-template-columns: auto 0 auto;Tôi đã phải loay hoay với clip-path để đảm bảo rằng tất cả chúng sẽ khớp với nhau một cách độc đáo giống như một trò chơi xếp hình. Các hình ảnh ban đầu chồng lên nhau khi cột ở giữa có chiều rộng bằng XNUMX, nhưng sau khi cắt các hình ảnh, ảo ảnh là hoàn hảo:
Lưới bánh pizza CSS
Đoán xem nào? Chúng ta có thể có được một lưới mát khác bằng cách thêm border-radius và overflow cho các hình dạng lưới hoặc hình tam giác của chúng tôi. 🎉
Lưới CSS của các mảnh ghép
Lần này chúng ta sẽ chơi với CSS mask để làm cho hình ảnh giống như các mảnh ghép.
Nếu bạn chưa sử dụng mask với CSS gradient, Tôi rất khuyên bạn nên bài báo này khác Tôi đã viết về chủ đề này vì nó sẽ giúp ích cho những gì xảy ra tiếp theo. Tại sao lại có độ dốc? Bởi vì đó là những gì chúng tôi đang sử dụng để có được các khía tròn trong các hình dạng mảnh ghép.
Bây giờ, việc thiết lập lưới sẽ trở nên khó khăn, vì vậy chúng ta hãy tập trung vào mask phần.
Như minh họa trong bản demo trên, chúng ta cần hai gradient để tạo ra hình dạng cuối cùng. Một gradient tạo ra một hình tròn (phần màu xanh lá cây) và một gradient tạo ra đường cong bên phải trong khi điền vào phần trên cùng.
--g: 6px; /* controls the gap */
--r: 42px; /* control the circular shapes */
background:
radial-gradient(var(--r) at left 50% bottom var(--r), green 95%, #0000),
radial-gradient(calc(var(--r) + var(--g)) at calc(100% + var(--g)) 50%, #0000 95%, red)
top/100% calc(100% - var(--r)) no-repeat;Hai biến điều khiển hình dạng. Các --g biến không là gì khác ngoài khoảng cách lưới. Chúng ta cần tính toán khoảng trống để đặt chính xác các vòng tròn của chúng ta sao cho chúng chồng lên nhau một cách hoàn hảo khi toàn bộ khối hình được lắp ráp. Các --r biến kiểm soát kích thước của các phần hình tròn của hình dạng câu đố.
Bây giờ chúng ta lấy cùng một CSS và cập nhật một vài giá trị trong đó để tạo ra ba hình dạng khác:
Chúng ta có các hình dạng, nhưng không phải các cạnh chồng lên nhau mà chúng ta cần làm cho chúng khớp với nhau. Mỗi hình ảnh được giới hạn trong ô lưới mà nó nằm trong đó, vì vậy có thể hiểu tại sao các hình dạng này lại lộn xộn vào lúc này:
Chúng ta cần tạo vùng tràn bằng cách tăng chiều cao / chiều rộng của hình ảnh. Từ hình trên, chúng ta phải tăng chiều cao của hình thứ nhất và thứ tư trong khi chúng ta tăng chiều rộng của hình thứ hai và thứ ba. Bạn có thể đã đoán rằng chúng tôi cần tăng chúng bằng cách sử dụng --r biến.
.gallery > img:is(:nth-child(1),:nth-child(4)) {
width: 100%;
height: calc(100% + var(--r));
}
.gallery > img:is(:nth-child(2),:nth-child(3)) {
height: 100%;
width: calc(100% + var(--r));
}Chúng tôi đang tiến gần hơn!
Chúng tôi đã tạo chồng chéo nhưng theo mặc định, hình ảnh của chúng tôi sẽ chồng lên nhau ở bên phải (nếu chúng tôi tăng chiều rộng) hoặc ở dưới cùng (nếu chúng tôi tăng chiều cao). Nhưng đó không phải là những gì chúng tôi muốn cho hình ảnh thứ hai và thứ tư. Cách khắc phục là sử dụng place-self: end trên hai hình ảnh đó và mã đầy đủ của chúng tôi trở thành như sau:
Đây là một ví dụ khác mà tôi đang sử dụng gradient conic thay vì gradient xuyên tâm. Điều này cho chúng ta những mảnh ghép hình tam giác trong khi vẫn giữ nguyên HTML và CSS cơ bản.
Một cái cuối cùng! Thời gian này tôi đang sử dụng clip-path và vì đó là một thuộc tính mà chúng tôi có thể tạo hoạt ảnh, chúng tôi có được một cái di chuột thú vị bằng cách chỉ cần cập nhật thuộc tính tùy chỉnh điều khiển hình dạng.
Kết thúc
Đó là tất cả cho phần đầu tiên này! Bằng cách kết hợp những điều chúng ta đã học về CSS Grid với một số bổ sung clip-path và mask thật kỳ diệu, chúng tôi có thể tạo bố cục lưới có các loại hình dạng khác nhau. Và chúng tôi đã sử dụng cùng một mã đánh dấu HTML mỗi lần! Và bản thân phần đánh dấu không gì khác hơn là một vật chứa với một số ít các yếu tố hình ảnh!
Trong phần thứ hai, chúng ta sẽ khám phá các lưới trông phức tạp hơn với các hình dạng lạ mắt hơn và các hiệu ứng di chuột.
Tôi dự định xem bản demo về việc mở rộng bảng hình ảnh mà chúng ta đã cùng nhau thực hiện bài báo này khác:
… Và biến nó thành một bảng hình ảnh zig-zag! Và đây chỉ là một ví dụ trong số rất nhiều ví dụ mà chúng ta sẽ khám phá trong bài viết tiếp theo.
