前回の記事で、CSS Grid の機能について説明しました。 自動配置機能を使用して複雑なレイアウトを作成する. 私は別の記事でそれをさらに一歩進めました グリッド レイアウトの画像にズーム ホバー効果を追加しました. 今回は、図形を操作する別の種類のグリッドに飛び込みたいと思います。
たとえば、画像が完全な正方形ではなく、六角形やひし形のような形をしている場合はどうなるでしょうか。 ネタバレ注意：私たちはそれを行うことができます. 実際、これまで見てきた CSS Grid テクニックを組み合わせて、いくつかの CSS を追加します。 clip-path & mask 魔法のように、想像できるほぼすべての形状の画像の派手なグリッドを作成できます。
いくつかのマークアップから始めましょう
これから見ていくレイアウトのほとんどは、一見すると簡単に実現できるように見えるかもしれませんが、困難な部分は、それらを実現することです。 同じ HTML マークアップ. たくさんのラッパーを使用できます。 divs などですが、この投稿の目標は、同じ最小量の HTML コードを使用して、必要なすべての異なるグリッドを取得することです。 結局のところ、CSS とはスタイリングとマークアップを分離する方法ではないでしょうか? スタイリングはマークアップに依存してはならず、その逆も同様です。
これは言った、これから始めましょう：
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<!-- as many times as we want -->
</div>ここで必要なのは、画像を含むコンテナーだけです。 これ以上何もない！
六角形の CSS グリッド
これは「ハニカム」グリッドと呼ばれることもあります。
これを作成する方法を示す他のブログ投稿が既にたくさんあります。 一体、私 書いた ここでCSS-Tricks！ その記事はまだ優れており、レスポンシブ レイアウトの作成について深く説明しています。 ただし、この特定のケースでは、はるかに単純な CSS アプローチに依存します。
まずは使ってみましょう clip-path 画像上で六角形を作成し、それらすべてを同じグリッド領域に配置して重なるようにします。
.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%)派手なものはまだありません。 すべての画像は六角形で、互いに上にあります。 六角形の画像要素が XNUMX つしかないように見えますが、実際には XNUMX つあります。
次のステップは、画像に平行移動を適用して、画像をグリッドに正しく配置することです。
画像の XNUMX つを中央に残しておきたいことに注意してください。 残りはCSSを使用してその周りに配置されます translate 古き良き時代のジオメトリ。 グリッド内の各画像に対して思いついたモック式は次のとおりです。
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))後でいくつかの計算と最適化を行います (退屈な部分はスキップしましょう)。次の CSS が得られます。
.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)); }たぶん、私たちが得たとき、それはより簡単になるでしょう CSS の実三角関数!
各画像は --_x & --_y それらの式に基づく変数。 XNUMX番目の画像のみ（nth-child(2)) は、中央にあるため、どのセレクターでも定義されていません。 別の順序を使用する場合は、任意の画像にすることができます。 私が使用している順序は次のとおりです。
ほんの数行のコードで、クールな画像のグリッドが得られます。 これに、ちょっとしたホバー効果を画像に追加して、より凝ったものにしました。
何だと思う？ いくつかの値を更新するだけで、別の六角形グリッドを取得できます。
コードをチェックして前のものと比較すると、内部の値を単純に交換しただけであることがわかります。 clip-path そして私は --x & --y。 それで全部です！
ひし形の CSS グリッド
ひし形は、45 度回転した正方形を意味する非常に凝った言葉です。
同じ HTML ですね。 まず、CSS で画像の 2×2 グリッドを定義することから始めます。
.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;
}最初に目を引くのは、 grid 財産。 これはめったに使用されませんが、XNUMX つの宣言で完全なグリッドを定義できる省略形であるという点で非常に役立ちます。 それは最も直感的ではなく、読みやすいプロパティではありませんが、私たちはここにいます 学ぶ & 発見する 新しいものなので、個々のグリッド プロパティをすべて書き出すのではなく、それを使用しましょう。
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);これは、 --s 変数で、すべての行の高さを --s 同じように。 2 つの画像があるため、自動的に 2×XNUMX グリッドが取得されます。
別の書き方を次に示します。
grid-template-columns: repeat(2, var(--s));
grid-template-rows: repeat(2, var(--s));…これは、 grid 速記：
grid: repeat(2,var(--s)) / repeat(2,var(--s));グリッドを設定したら、CSS でグリッドと画像を回転させます transforms で、次のようになります。
両方を回転させる方法に注意してください 45deg、しかし反対方向に。
.gallery {
/* etc. */
transform: rotate(45deg);
}
.gallery > img {
/* etc. */
transform: rotate(-45deg);
}画像を負の方向に回転させると、画像がグリッドで回転するのを防ぎ、まっすぐに保たれます。 ここで、 clip-path それらからひし形を切り取ります。
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)これでほぼ完了です。 画像が収まるように、画像のサイズを修正する必要があります。 そうしないと、画像のグリッドのように見えないところまで離れて配置されます。
画像は、画像が配置されているグリッド領域の内接円である緑色の円の境界内にあります。 必要なのは、グリッド領域の外接円である赤い円の内側に収まるように画像を大きくすることです。
心配しないでください。これ以上退屈なジオメトリは紹介しません。 知っておく必要があるのは、各円の半径間の関係が 2 の平方根であることだけです (sqrt(2)）。 これは、領域を埋めるために画像のサイズを大きくするために必要な値です。 我々は使用するだろう 100%*sqrt(2) = 141% そして行われる！
.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%);
}六角形のグリッドのように、素敵なズーム ホバー効果で物事をより洗練させることができます。
三角形の CSS グリッド
あなたはおそらく、大きなトリックが clip-path 私たちが望む形を得るために。 このグリッドでは、各要素に独自の clip-path 最後の XNUMX つのグリッドは一貫した形状で機能しました。 今回は、いくつかの異なる三角形を組み合わせて画像の長方形のグリッドを形成しているようです。
次の CSS を使用して、3×2 グリッド内に配置します。
.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%); } }これが私たちが得るものです：
最後の仕上げは、中央の列の幅を等しくすることです 0 画像間のスペースを削除します。 菱形グリッドで発生したのと同じ種類の間隔の問題ですが、使用している形状に対するアプローチが異なります。
grid-template-columns: auto 0 auto;私はいじらなければなりませんでした clip-path 値を調整して、すべてがパズルのようにうまく組み合わされているように見えるようにします。 中央の列の幅がゼロの場合、元の画像は重なりますが、画像をスライスした後、錯覚は完璧です:
CSS ピザ パイ グリッド
何だと思う？ 追加するだけで、別のクールなグリッドを取得できます border-radius & overflow グリッドまたは三角形の形状に。 🎉
パズルのピースの CSS グリッド
今回はCSSで遊んでみます mask 画像をパズルのピースのように見せるためのプロパティ。
使用していない場合 mask CSSグラデーション、私は強くお勧めします この他の記事 このトピックについて書いたのは、次に来るものに役立つからです。 なぜグラデーション？ それは、パズルのピースの形に丸い切り込みを入れるために使用しているものだからです.
グリッドの設定は簡単なので、代わりに mask 部。
上記のデモに示されているように、最終的な形状を作成するには XNUMX つのグラデーションが必要です。 XNUMX つのグラデーションは円 (緑色の部分) を作成し、もう XNUMX つのグラデーションは上部を塗りつぶしながら右の曲線を作成します。
--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;XNUMX つの変数が形状を制御します。 の --g 変数はグリッドギャップに他なりません。 パズル全体が組み立てられたときに円が完全に重なるように、円を正しく配置するにはギャップを考慮する必要があります。 の --r 変数は、パズル形状の円形部分のサイズを制御します。
次に、同じ CSS を取得し、その中のいくつかの値を更新して、他の XNUMX つの形状を作成します。
形状はありますが、それらを合わせるために必要な重なっているエッジはありません。 各画像は、それが含まれるグリッド セルに制限されているため、現時点で形状がごちゃ混ぜになっている理由は理にかなっています。
画像の高さ/幅を増やしてオーバーフローを作成する必要があります。 上の図から、XNUMX 番目と XNUMX 番目の画像の幅を増やしながら、XNUMX 番目と XNUMX 番目の画像の高さを増やす必要があります。 おそらく、 --r 変数に保存します．
.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));
}私たちは近づいています！
オーバーラップを作成しましたが、デフォルトでは、画像は右側 (幅を大きくした場合) または下 (高さを大きくした場合) でオーバーラップします。 しかし、それは XNUMX 番目と XNUMX 番目の画像に必要なことではありません。 修正は使用することです place-self: end これらの XNUMX つの画像で、完全なコードは次のようになります。
放射状グラデーションの代わりに円錐グラデーションを使用している別の例を次に示します。 これにより、同じ基礎となる HTML と CSS を維持しながら、三角形のパズルのピースが得られます。
最後の XNUMX つ ！ 今回私が使っているのは clip-path これはアニメーション化できるプロパティであるため、形状を制御するカスタム プロパティを更新するだけでクールなホバーを取得できます。
包み込む
前半は以上です！ CSS Grid について既に学んだことを組み合わせて、いくつかの追加を行います。 clip-path & mask 魔法のように、さまざまな種類の形状を備えたグリッド レイアウトを作成できました。 そして、毎回同じ HTML マークアップを使用しました。 マークアップ自体は、ほんの一握りの画像要素を含むコンテナーにすぎません。
XNUMX 番目の部分では、より派手な形状とホバー効果を備えた、より複雑に見えるグリッドについて説明します。
で一緒に作った拡大画像パネルのデモを撮る予定です この他の記事:
…そしてジグザグの画像パネルに変身！ これは、次の記事で紹介する多くの例の XNUMX つにすぎません。
