Önceki bir makalede, CSS Grid'in otomatik yerleştirme güçlerini kullanarak karmaşık düzenler oluşturun. Bunu başka bir makalede bir adım daha ileri götürdüm. ızgara düzenindeki görüntülere yakınlaştırma vurgulu efekti eklendi. Bu sefer, şekillerle çalışan başka bir ızgara türüne dalmak istiyorum.
Mesela, görüntüler tam kare değilse, bunun yerine altıgen veya eşkenar dörtgen şeklindeyse? Spoiler uyarısı: Yapabiliriz. Aslında, incelediğimiz CSS Grid tekniklerini birleştireceğiz ve bazı CSS'leri ekleyeceğiz. clip-path ve mask Hayal edebileceğiniz hemen hemen her şekil için süslü görüntü ızgaraları oluşturmak için sihir!
Biraz işaretleme ile başlayalım
İnceleyeceğimiz düzenlerin çoğu ilk bakışta elde edilmesi kolay görünebilir, ancak zor olan kısım onları aynı HTML işaretlemesi. Bir sürü sarmalayıcı kullanabiliriz, divs ve ne olursa olsun, ancak bu gönderinin amacı aynı ve en küçük miktarda HTML kodunu kullanmak ve yine de istediğimiz tüm farklı ızgaraları elde etmektir. Sonuçta, CSS nedir, stil ve işaretlemeyi ayırmanın bir yolu değil mi? Stilimiz işaretlemeye bağlı olmamalıdır ve bunun tersi de geçerlidir.
Bu, şununla başlayalım dedi:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<!-- as many times as we want -->
</div>Burada ihtiyacımız olan tek şey resimler içeren bir kap. Başka bir şey yok!
Altıgenlerin CSS Izgarası
Buna bazen “petek” ızgarası da denir.
Bunun nasıl yapılacağını gösteren birçok başka blog yazısı var. kahretsin, ben bir tane yazdı burada CSS-Tricks'te! Bu makale hala iyi ve duyarlı bir düzen oluşturma konusunda çok derinlere iniyor. Ancak bu özel durum için çok daha basit bir CSS yaklaşımına güveneceğiz.
İlk önce kullanalım clip-path altıgen şekli oluşturmak için görüntülerin üzerine yerleştiriyoruz ve hepsini üst üste gelecek şekilde aynı ızgara alanına yerleştiriyoruz.
.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%)Henüz süslü bir şey yok. Tüm resimler altıgendir ve birbirinin üzerindedir. Yani elimizdeki tek şey altıgen şekilli tek bir görüntü öğesi gibi görünüyor, ama aslında yedi tane var.
Sonraki adım, onları ızgaraya doğru şekilde yerleştirmek için görüntülere bir çeviri uygulamaktır.
Görüntülerden birinin hala merkezde kalmasını istediğimize dikkat edin. Gerisi CSS kullanılarak etrafına yerleştirilir translate ve eski moda geometri. Izgaradaki her görüntü için bulduğum sahte formüller:
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))Birkaç hesaplama ve optimizasyondan sonra (o sıkıcı kısmı geçelim, değil mi?) Aşağıdaki CSS'yi elde ederiz:
.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)); }Belki aldığımızda bu daha kolay olur CSS'de gerçek trigonometri işlevleri!
Her resim tarafından çevrilmiştir --_x ve --_y bu formüllere dayalı değişkenler. Sadece ikinci resim (nth-child(2)) merkezde olduğu için herhangi bir seçicide tanımsızdır. Farklı bir düzen kullanmaya karar verirseniz, herhangi bir görüntü olabilir. İşte kullandığım sipariş:
Yalnızca birkaç satır kodla, harika bir resim ızgarası elde ederiz. Buna, işleri daha meraklı hale getirmek için görüntülere biraz vurgulu efekti ekledim.
Bil bakalım ne oldu? Sadece birkaç değeri güncelleyerek başka bir altıgen ızgara elde edebiliriz.
Kodu kontrol edip bir öncekiyle karşılaştırırsanız, içindeki değerleri basitçe değiştirdiğimi fark edeceksiniz. clip-path ve arasında geçiş yaptım --x ve --y. Bu kadar!
Eşkenar dörtgenlerin CSS Izgarası
Eşkenar dörtgen, 45 derece döndürülmüş bir kare için çok süslü bir kelimedir.
Aynı HTML, hatırladın mı? İlk önce CSS'de 2×2 görüntü ızgarası tanımlayarak başlıyoruz:
.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;
}Gözünüze çarpan ilk şey, grid Emlak. Oldukça nadir kullanılır, ancak tek bir bildirimde tam bir ızgara tanımlamanıza izin veren bir steno olduğu için süper yararlıdır. Bu en sezgisel - ve okunabilir özellikten bahsetmiyorum bile - ama biz buradayız. öğrenmek ve keşfetmek yeni şeyler, bu yüzden tüm bireysel ızgara özelliklerini yazmak yerine kullanalım.
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);Bu, şuna eşit iki sütun tanımlar: --s değişken ve tüm satırların yüksekliğini --s ilave olarak. Dört resmimiz olduğu için otomatik olarak 2×2 bir ızgara elde edeceğiz.
İşte yazabileceğimiz başka bir yol:
grid-template-columns: repeat(2, var(--s));
grid-template-rows: repeat(2, var(--s));… ile azaltılabilir grid kısa gösterim:
grid: repeat(2,var(--s)) / repeat(2,var(--s));Izgarayı ayarladıktan sonra onu döndürüyoruz ve görüntüleri CSS ile transforms ve şunu elde ederiz:
Her ikisini de nasıl döndürdüğüme dikkat edin 45deg, ama ters yönde.
.gallery {
/* etc. */
transform: rotate(45deg);
}
.gallery > img {
/* etc. */
transform: rotate(-45deg);
}Görüntüleri negatif yönde döndürmek, düz kalmaları için ızgara ile döndürülmelerini engeller. Şimdi, bir uygularız clip-path onlardan bir eşkenar dörtgen şekli kesmek için.
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)Neredeyse bitirdik! Birbirlerine uymaları için görüntünün boyutunu düzeltmemiz gerekiyor. Aksi takdirde, bir görüntü ızgarası gibi görünmediği noktaya kadar birbirinden çok uzaktırlar.
Görüntü, görüntünün yerleştirildiği ızgara alanının yazılı çemberi olan yeşil dairenin sınırları içindedir. İstediğimiz şey, ızgara alanının çevrelenmiş dairesi olan kırmızı dairenin içine sığacak şekilde görüntüyü büyütmektir.
Endişelenme, daha fazla sıkıcı geometri sunmayacağım. Tüm bilmeniz gereken, her dairenin yarıçapı arasındaki ilişkinin 2'nin karekökü olduğudur (sqrt(2)). Bu, alanı doldurmak için resimlerimizin boyutunu büyütmemiz gereken değerdir. Kullanacağız 100%*sqrt(2) = 141% ve yapılır!
.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%);
}Altıgen ızgara gibi, bu güzel yakınlaştırma vurgulu efektiyle işleri daha şık hale getirebiliriz:
Üçgen Şekillerin CSS Izgarası
Muhtemelen şimdiye kadar büyük hilenin clip-path İstediğimiz şekilleri elde etmek için. Bu ızgara için her elemanın kendi clip-path değer, son iki ızgara ise tutarlı bir şekil ile çalıştı. Yani, bu sefer, dikdörtgen bir görüntü ızgarası oluşturmak için bir araya gelen birkaç farklı üçgen şekille çalışıyoruz gibi.
Bunları aşağıdaki CSS ile 3×2 ızgara içine yerleştiriyoruz:
.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%); } }İşte aldığımız şey:
Son dokunuş, orta sütunun genişliğini eşit yapmaktır. 0 Görüntüler arasındaki boşluklardan kurtulmak için. Eşkenar dörtgen ızgarada yaşadığımız aynı tür boşluk sorunu, ancak kullandığımız şekiller için farklı bir yaklaşımla:
grid-template-columns: auto 0 auto;ile uğraşmak zorunda kaldım clip-path değerlerin hepsinin bir yapboz gibi güzel bir şekilde birbirine uyduğundan emin olmak için. Orta sütun sıfır genişliğe sahip olduğunda orijinal görüntüler üst üste gelir, ancak görüntüleri dilimledikten sonra yanılsama mükemmeldir:
CSS Pizza Pasta Izgarası
Bil bakalım ne oldu? Basitçe ekleyerek başka bir harika ızgara elde edebiliriz border-radius ve overflow ızgara veya üçgen şekillerimize. 🎉
Yapboz Parçalarının CSS Izgarası
Bu sefer CSS ile oynayacağız mask görüntülerin bir yapbozun parçaları gibi görünmesini sağlayan özellik.
Kullanmadıysanız mask ile CSS gradyanları, Şiddetle tavsiye ediyorum bu diğer makale Konuya yazdım çünkü bundan sonra ne olacağına yardımcı olacak. Neden gradyanlar? Çünkü yapboz parçası şekillerinde yuvarlak çentikler elde etmek için kullandığımız şey bu.
Şebekeyi kurmak artık çocuk oyuncağı olmalı, bu yüzden onun yerine odaklanalım. mask Bölüm.
Yukarıdaki demoda gösterildiği gibi, son şekli oluşturmak için iki degradeye ihtiyacımız var. Bir gradyan bir daire (yeşil kısım) oluşturur ve diğeri üst kısmı doldururken doğru eğriyi oluşturur.
--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;Şekli iki değişken kontrol eder. bu --g değişken ızgara boşluğundan başka bir şey değildir. Tüm bulmaca birleştirildiğinde mükemmel bir şekilde örtüşmeleri için dairelerimizi doğru bir şekilde yerleştirmek için boşluğu hesaba katmamız gerekiyor. bu --r değişken, bulmaca şeklinin dairesel parçalarının boyutunu kontrol eder.
Şimdi aynı CSS'yi alıyoruz ve diğer üç şekli oluşturmak için içindeki birkaç değeri güncelliyoruz:
Şekillere sahibiz, ancak onları birbirine uydurmak için üst üste binen kenarlara sahip değiliz. Her görüntü, içinde bulunduğu ızgara hücresiyle sınırlıdır, bu nedenle şu anda şekillerin neden karışık olduğu mantıklıdır:
Görüntülerin yüksekliğini/genişliğini artırarak bir taşma oluşturmamız gerekiyor. Yukarıdaki şekilden, ikinci ve üçüncü resimlerin genişliğini arttırırken, birinci ve dördüncü resimlerin yüksekliğini arttırmamız gerekiyor. Kullanarak onları artırmamız gerektiğini muhtemelen tahmin etmişsinizdir. --r değişkeni.
.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));
}Yaklaşıyoruz!
Örtüşmeyi oluşturduk, ancak varsayılan olarak resimlerimiz ya sağda (genişliği arttırırsak) ya da altta (yüksekliği arttırırsak) örtüşüyor. Ama ikinci ve dördüncü görüntüler için istediğimiz bu değil. Düzeltme kullanmaktır place-self: end bu iki resimde ve kodumuzun tamamı şu hale gelir:
Radyal gradyan yerine konik gradyan kullandığım başka bir örnek. Bu, aynı temel HTML ve CSS'yi korurken bize üçgen yapboz parçaları verir.
Son bir tane! bu sefer kullanıyorum clip-path ve bu canlandırabileceğimiz bir özellik olduğundan, şekli kontrol eden özel özelliği güncelleyerek havalı bir vurgu elde ederiz.
Tamamlayan
Bu ilk bölüm için hepsi bu! CSS Izgarası hakkında daha önce öğrendiğimiz şeyleri, eklenen bazı şeylerle birleştirerek clip-path ve mask sihirli, farklı türde şekiller içeren ızgara düzenleri yapabildik. Ve her seferinde aynı HTML işaretlemesini kullandık! Ve işaretlemenin kendisi, bir avuç görüntü öğesi içeren bir kaptan başka bir şey değildir!
İkinci bölümde, daha süslü şekiller ve vurgulu efektlerle daha karmaşık görünümlü ızgaraları keşfedeceğiz.
Birlikte yaptığımız genişleyen görüntü panellerinin demosunu çekmeyi planlıyorum. bu diğer makale:
…ve onu zikzak bir görüntü panellerine dönüştürün! Ve bu, bir sonraki makalede keşfedeceğimiz pek çok örnekten sadece biri.
