Tek Elemanlı Yükleyiciler: 3D Olmak!

Bu dördüncü ve son makalemiz için tek elemanlı yükleyicilerle ilgili küçük seri3 boyutlu desenleri keşfedeceğiz. Bir 3D öğe oluştururken, bir küpün altı yüzünün tümü gibi bir şeyi simüle etmek için yalnızca bir HTML öğesinin yeterli olduğunu hayal etmek zordur. Ama belki daha küp şeklinde bir şeyle kurtulabiliriz.sevmek bunun yerine şeklin yalnızca öndeki üç tarafını göstermek — bu kesinlikle mümkün ve biz de bunu birlikte yapacağız.

Bölünmüş küp yükleyici

İşte bir küpün iki parçaya bölündüğü ancak yalnızca tek bir öğeyle yapıldığı bir 3B yükleyici:

Küpün her yarısı bir sözde eleman kullanılarak yapılmıştır:

Harika, değil mi? CSS ile konik bir degrade kullanabiliriz clip-path elementin üzerinde ::before ve ::after 3 boyutlu bir küpün görünür üç yüzünü simüle etmek için sözdeler. Negatif kenar boşluğu, iki sahteyi bir araya getirerek üst üste bindiren ve tam bir küpü simüle eden şeydir. İşimizin geri kalanı çoğunlukla düzgün görünümlü yükleyiciler elde etmek için bu iki yarıyı canlandırmaktan ibaret!

Bu küp benzeri öğeyi oluşturmak için kullanılan klip yolu noktalarının ardındaki matematiği açıklayan bir görsele göz atalım:

Değişkenlerimiz ve bir denklemimiz var, hadi bunları uygulamaya koyalım. İlk önce değişkenlerimizi oluşturacağız ve ana öğenin boyutlarını ayarlayacağız. .loader eleman:

.loader { --s: 150px; /* control the size */ --_d: calc(0.353 * var(--s)); /* 0.353 = sin(45deg)/2 */ width: calc(var(--s) + var(--_d)); aspect-ratio: 1; display: flex;
}

Şu ana kadar çok çılgınca bir şey olmadı. bizde bir 150px esnek bir kap olarak kurulan kare. Şimdi sahtelerimizi oluşturuyoruz:

.loader::before,
.loader::after { content: ""; flex: 1;
}

Bunlar iki yarım .loader konteyner. Onları boyamamız gerekiyor, o yüzden bizim yerimiz burası konik gradyan devreye girer:

.loader::before,
.loader::after { content: ""; flex: 1; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0);
}

Gradyan var ama garip görünüyor. Bizim ihtiyacımız onu öğeye klipsle:

.loader::before,
.loader::after { content: ""; flex: 1; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0); clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}

İki yarının üst üste bindiğinden emin olalım. negatif marj:

.loader::before { margin-right: calc(var(--_d) / -2);
} .loader::after { margin-left: calc(var(--_d) / -2);
}

Şimdi onları harekete geçirelim!

.loader::before,
.loader::after { /* same as before */ animation: load 1.5s infinite cubic-bezier(0, .5, .5, 1.8) alternate;
} .loader::after { /* same as before */ animation-delay: -.75s
} @keyframes load{ 0%, 40% { transform: translateY(calc(var(--s) / -4)) } 60%, 100% { transform: translateY(calc(var(--s) / 4)) }
}

İşte bir kez daha son demo:

İlerleme küpü yükleyicisi

3B ilerleme yükleyicisi oluşturmak için aynı tekniği kullanalım. Evet, hâlâ tek bir unsur var!

Yükleyicinin yüksekliğini ve en boy oranını değiştirmek dışında, küpü daha önce yaptığımız gibi simüle edecek kadar hiçbir şeyi değiştirmiyoruz. Yaptığımız animasyon, sol tarafın genişliğini güncellerken sağ tarafın kalan alanı doldurduğu şaşırtıcı derecede kolay bir tekniğe dayanıyor. flex-grow: 1.

İlk adım, kullanarak sağ tarafa bir miktar şeffaflık eklemektir. opacity:

Bu, küpün bir tarafının dolu, diğer tarafının boş olduğu efektini simüle eder. Daha sonra sol tarafın rengini güncelliyoruz. Bunu yapmak için ya konik degradenin içindeki üç rengi güncelleriz ya da bunu bir arka plan rengi ekleyerek yaparız. background-blend-mode:

.loader::before { background-color: #CC333F; /* control the color here */ background-blend-mode: multiply;
}

Bu numara, rengi yalnızca bir kez güncellememize olanak tanır. Yükleyicinin sağ tarafı, yalnızca bir renk değeri kullanıyor olsak bile, rengimizin üç yeni tonunu oluşturmak için konik degradeden beyazın üç tonuyla karışır. Renk hilesi!

Yükleyicinin sol tarafının genişliğini canlandıralım:

Hata! Animasyon başlangıçta biraz tuhaf! Her şeyin küpün dışında nasıl başladığına dikkat ettiniz mi? Bunun nedeni animasyona şuradan başlıyor olmamızdır: 0% Genişlik. Ama nedeniyle clip-path ve negatif marjı kullanıyoruz, bunun yerine yapmamız gereken şey --_d tanımlamak için kullandığımız değişken clip-path puanlar ve negatif marj:

@keyframes load { 0%, 5% {width: var(--_d); } 95%, 100% {width: 100%; }
}

Bu biraz daha iyi:

Ancak bu animasyonu daha da pürüzsüz hale getirebiliriz. Ufak bir şeyi kaçırdığımızı fark ettin mi? Son demonun nasıl görünmesi gerektiğini son demoyla karşılaştırmanız için size bir ekran görüntüsü göstereyim:

Küpün alt yüzü! İkinci eleman şeffaf olduğu için soldaki örnekte gördüğünüz gibi o dikdörtgenin alt yüzünü görmemiz gerekiyor. Çok ince ama orada olmalı!

Ana öğeye bir degrade ekleyebilir ve onu sözde sahtelerde yaptığımız gibi kırpabiliriz:

background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat;

Her şey bir araya getirildiğinde kodun tamamı burada:

.loader { --s: 100px; /* control the size */ --_d: calc(0.353*var(--s)); /* 0.353 = sin(45deg) / 2 */ height: var(--s); aspect-ratio: 3; display: flex; background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat; clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}
.loader::before,
.loader::after { content: ""; clip-path: inherit; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0);
}
.loader::before { background-color: #CC333F; /* control the color here */ background-blend-mode: multiply; margin-right: calc(var(--_d) / -2); animation: load 2.5s infinite linear;
}
.loader:after { flex: 1; margin-left: calc(var(--_d) / -2); opacity: 0.4;
} @keyframes load { 0%, 5% { width: var(--_d); } 95%, 100% { width: 100%; }
}

Bu kadar! Bir değil, tam bir sonuç elde etmek için sahte öğeler, konik degradeler, kırpma, arka plan karıştırma ve negatif kenar boşlukları kullanan akıllı bir teknik kullandık. iki işaretlemede tek bir öğeden başka bir şeye sahip olmayan hoş görünümlü 3D yükleyiciler.

Daha fazla 3D

Daha da ileri gidebilir ve tek bir öğeyi kullanarak sonsuz sayıda 3 boyutlu küpü simüle edebiliriz - evet, bu mümkün! İşte küplerden oluşan bir ızgara:

Bu demo ve aşağıdaki demolar, bu yazının yazıldığı sırada Safari'de desteklenmemektedir.

Çılgın, değil mi? Şimdi tek bir öğe kullanılarak yapılmış tekrarlanan bir küp deseni yaratıyoruz… ve sahte de yok! Kullandığımız matematik hakkında ince ayrıntılara girmeyeceğim (burada çok spesifik sayılar var), ancak buraya nasıl geldiğimizi görselleştirmek için işte bir şekil:

İlk önce bir kullanıyoruz conic-gradient Tekrarlanan küp desenini oluşturmak için Desenin tekrarı üç değişken tarafından kontrol edilir:

• --size: Adına uygun olarak bu, her küpün boyutunu kontrol eder.
• --m: Bu sütun sayısını temsil eder.
• --n: Bu satır sayısıdır.
• --gap: bu küpler arasındaki boşluk veya mesafe

.cube { --size: 40px; --m: 4; --n: 5; --gap :10px; aspect-ratio: var(--m) / var(--n); width: calc(var(--m) * (1.353 * var(--size) + var(--gap))); background: conic-gradient(from -90deg at var(--size) calc(0.353 * var(--size)), #249FAB 135deg, #81C5A3 0 270deg, #26609D 0) /* update the colors here */ 0 0 / calc(100% / var(--m)) calc(100% / var(--n));
}

Daha sonra aynı boyuttaki başka bir deseni kullanarak bir maske katmanı uyguluyoruz. Bu, bu fikrin en zor kısmı. Bir kombinasyonunu kullanarak linear-gradient ve conic-gradient Sadece küp şekillerinin görünür kalması için elementimizin birkaç parçasını keseceğiz.

.cube { /* etc. */ mask: linear-gradient(to bottom right, #0000 calc(0.25 * var(--size)), #000 0 calc(100% - calc(0.25 * var(--size)) - 1.414 * var(--gap)), #0000 0), conic-gradient(from -90deg at right var(--gap) bottom var(--gap), #000 90deg, #0000 0); mask-size: calc(100% / var(--m)) calc(100% / var(--n)); mask-composite: intersect;
}

Kod biraz karmaşık görünebilir ancak CSS değişkenleri sayesinde küp matrisimizi kontrol etmek için tek yapmamız gereken birkaç değeri güncellemektir. 10⨉10 ızgaraya mı ihtiyacınız var? Güncelleme --m ve --n değişkenler 10. Küpler arasında daha geniş bir boşluğa mı ihtiyacınız var? Güncelleme --gap değer. Renk değerleri yalnızca bir kez kullanıldığından bunları yeni bir renk paleti için güncelleyin!

Artık başka bir 3D tekniğimiz olduğuna göre, bunu farklı animasyonlarla oynayarak yükleyicinin çeşitlemelerini oluşturmak için kullanalım. Örneğin, soldan sağa doğru sonsuza kadar kayan küplerden oluşan tekrarlayan bir desene ne dersiniz?

Bu yükleyici tek bir satırda dört küpü tanımlar. Bu bizim anlamına geliyor --n değer şudur 4 ve --m eşittir 1 . Başka bir deyişle artık bunlara ihtiyacımız yok!

Bunun yerine şu şekilde çalışabiliriz: --size ve --gap ızgara kapsayıcısındaki değişkenler:

.loader { --size: 70px; --gap: 15px; width: calc(3 * (1.353 * var(--size) + var(--gap))); display: grid; aspect-ratio: 3;
}

Bu bizim konteynerimiz. Dört küpümüz var, ancak kapta aynı anda yalnızca üç tane göstermek istiyoruz, böylece her zaman bir tanesi dışarı kayarken bir tanesi de içeri kayar. Bu yüzden genişliği şu şekilde çarpanlarına ayırıyoruz: 3 ve en boy oranının şu şekilde ayarlanmasını sağlayın: 3 gibi.

Küp desenimizin dört küp genişliğine göre ayarlanmasına dikkat edelim. Bunu konteynerin üzerinde yapacağız ::before sözde eleman:

.loader::before { content: ""; width: calc(4 * 100% / 3); /* Code to create four cubes */
}

Artık üç küplü bir kapta dört küpümüz olduğuna göre, küp desenini ızgara kabının sonuna taşacak şekilde yaslayarak son üç küpü gösterebiliriz:

.loader { /* same as before */ justify-content: end;
}

Izgara kabının sınırlarını gösteren kırmızı bir çerçeveyle şu ana kadar elimizde olanlar:

Şimdi tek yapmamız gereken, animasyonumuzu ekleyerek sözde elemanı sağa taşımak:

@keyframes load { to { transform: translate(calc(100% / 4)); }
}

Animasyonun püf noktasını anladınız mı? Taşan küp desenini gizleyerek ve başlangıç ​​ve bitişteki solma efektini yaratmak için bir miktar maskeleme dokunuşu ekleyerek bunu bitirelim:

.loader { --size: 70px; --gap: 15px; width: calc(3*(1.353*var(--s) + var(--g))); display: grid; justify-items: end; aspect-ratio: 3; overflow: hidden; mask: linear-gradient(90deg, #0000, #000 30px calc(100% - 30px), #0000);
}

Bir değişken ekleyerek bunu çok daha esnek hale getirebiliriz, --n, kapta aynı anda kaç küpün görüntüleneceğini ayarlamak için. Ve desendeki toplam küp sayısı birden fazla olması gerektiğinden --nbunu şu şekilde ifade edebiliriz calc(var(--n) + 1).

İşte tamamı:

Tamam, benzer olan ancak küplerin kaymak yerine art arda renk değiştirdiği bir 3D yükleyici daha:

Animasyonlu bir arka plana güveneceğiz background-blend-mode Bunun için:

.loader { /* ... */ background: linear-gradient(#ff1818 0 0) 0% / calc(100% / 3) 100% no-repeat, /* ... */; background-blend-mode: multiply; /* ... */ animation: load steps(3) 1.5s infinite;
}
@keyframes load { to { background-position: 150%; }
}

Son örnekle aynı düzeni oluşturmak için kullanılan gereksiz kodu kaldırdım, ancak dört yerine üç küp kullandım. Buraya eklediğim şey, tıpkı daha önce ilerleme çubuğu 3D yükleyicisi için yaptığımız gibi, konik degradeyle karışan, belirli bir renkle tanımlanmış bir degradedir.

Oradan, arka plan degradesini canlandırıyor background-position küplerin renkleri teker teker yanıp sönmesini sağlayan üç adımlı bir animasyon.

Kullandığım değerlere aşina değilseniz background-position ve arka plan söz dizimini şiddetle tavsiye ederim önceki makalelerimden biri ve bir Yığın Taşması yanıtlarım. Orada çok detaylı bir açıklama bulacaksınız.

Değişken yapmak için küp sayısını güncelleyebilir miyiz?

Evet, bir şeyim var bunun için çözüm, ama onu buraya gömmek yerine bir göz atmanızı istiyorum. Önceki örnekten öğrendiklerimizi alın ve bu örnekte de aynısını yapmaya çalışın; ardından çalışmanızı yorumlarda paylaşın!

Çok sayıda varyasyon!

Bu serideki diğer üç makale gibi, ben de size kendi yükleyicilerinizi yaratmanız için biraz ilham vermek istiyorum. İşte birlikte yaptığımız 3D yükleyicilerin yanı sıra hayal gücünüzü harekete geçirecek birkaç tane daha içeren bir koleksiyon:

Bu bir sargı

Umarım son birkaç haftadır benimle tek elemanlı yükleyiciler yaparak vakit geçirmekten keyif almışsınızdır. Görünüşte basit bir döndürücüyle başlamamız ve ardından işaretlemede hala yalnızca tek bir öğe kullanan 3D tekniklere kadar kendimiz çalışmak için yavaş yavaş yeni parçalar eklememiz çılgınca. CSS'nin güçlerinden yararlandığımızda tam olarak böyle görünüyor: ölçeklenebilir, esnek ve yeniden kullanılabilir.

Bu küçük seriyi okuduğunuz için tekrar teşekkürler! Sana bir sahip olduğumu hatırlatarak imzalayacağım 500'den fazla yükleyicinin toplanması Daha fazla fikir ve ilham arıyorsanız.

---

Tek Elemanlı Yükleyiciler: 3D Olmak! aslen yayınlandı CSS Hileleri. Malısın bülteni al.

• Akıllı para. Avrupa'nın En İyi Bitcoin ve Kripto Borsası.
• Plato blok zinciri. Web3 Metaverse Zekası. Bilgi Güçlendirildi. SERBEST ERİŞİM.
• KriptoHawk. Altcoin Radarı. Ücretsiz deneme.
• Kaynak: https://css-tricks.com/single-element-loaders-going-3d/