Arka Plan Kırpma, Maskeler ve 3D Kullanan Harika CSS Vurgulu Efektler

CSS vurgulu efektlerine yönelik ilginç yaklaşımlar hakkında bir dizi gönderiyi inceledik. Bir ile başladık CSS kullanan bir grup örnek background özellikleri, ardından konuya geçti text-shadow mülk nerede teknik olarak hiç gölge kullanmadık. Bunları ayrıca CSS değişkenleriyle birleştirdik ve calc() kodu optimize etmek ve yönetmeyi kolaylaştırmak için.

Bu makalede, daha da karmaşık CSS vurgulu animasyonlar oluşturmak için bu iki makaleyi oluşturacağız. Arka plan kırpma, CSS maskeleri ve hatta 3D perspektiflerle ayaklarımızı ıslatmaktan bahsediyoruz. Başka bir deyişle, bu sefer gelişmiş teknikleri keşfedeceğiz ve CSS'nin fareyle üzerine gelme efektleriyle yapabileceklerinin sınırlarını zorlayacağız!

---

İşte yaptığımız şeyin sadece bir tadı:

kullanarak fareyle üzerine gelme efektleri background-clip

Hadi hakkında konuşalım background-clip. Bu CSS özelliği, bir text anahtar kelime değeri gradyanları uygulamamıza izin veren metin gerçek yerine bir öğenin arka fon.

Örneğin, fareyle üzerine gelindiğinde metnin rengini, color özellik, ancak bu şekilde renk değişikliğini canlandırıyoruz:

tek yaptığım eklemek oldu background-clip: text elemana ve transition the background-position. Bundan daha karmaşık olmak zorunda değil!

Ancak birden çok degradeyi farklı arka plan kırpma değerleriyle birleştirirsek daha iyisini yapabiliriz.

Bu örnekte, iki farklı degrade ve iki değer kullanıyorum. background-clip. İlk arka plan gradyanı metne kırpılır ( text değeri) üzerine gelindiğinde rengi ayarlamak için, ikinci arka plan gradyanı ise alt alt çizgiyi oluşturur ( padding-box değer). Diğer her şey doğrudan kopyalandı ilk makalede yaptığımız çalışma bu serinin.

Çubuğun, metin taranmış ve ardından renklendirilmiş gibi görünecek şekilde yukarıdan aşağıya kaydığı bir fareyle üzerine gelme efektine ne dersiniz:

Bu sefer çizgiyi oluşturmak için ilk degradenin boyutunu değiştirdim. Ardından, yanılsamayı yaratmak için metin rengini güncelleyen diğer degradeyle kaydırıyorum! Bu kalemde neler olduğunu görselleştirebilirsiniz:

Kendi gücümüzle yapabileceklerimizin sadece yüzeyini kazıdık. background-clipping güçleri! Ancak, Firefox'un bir bildirilen birçok hata ile ilişkili background-clip. Safari'nin de destek sorunları var. Bu, yalnızca Chrome'u bu şeyler için sağlam bir desteğe sahip bırakır, bu yüzden devam ederken belki de açabilirsiniz.

kullanarak başka bir vurgulu efektine geçelim background-clip:

Muhtemelen bunun, az önce ele aldıklarımızla karşılaştırıldığında çok kolay göründüğünü düşünüyorsunuz - ve haklısınız, burada süslü bir şey yok. Tek yaptığım bir degradeyi kaydırırken diğerinin boyutunu artırmak.

Ama gelişmiş vurgulu efektlere bakmak için buradayız, değil mi? Fare imleci öğeden ayrıldığında animasyonun farklı olması için biraz değiştirelim. Aynı vurgulu efekt, ancak animasyona farklı bir son:

Güzel değil mi? kodu inceleyelim:

.hover { --c: #1095c1; /* the color */ color: #0000; background: linear-gradient(90deg, #fff 50%, var(--c) 0) calc(100% - var(--_p, 0%)) / 200%, linear-gradient(var(--c) 0 0) 0% 100% / var(--_p, 0%) no-repeat, var(--_c, #0000); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; transition: 0s, color .5s, background-color .5s;
}
.hover:hover { color: #fff; --_c: var(--c); --_p: 100%; transition: 0.5s, color 0s .5s, background-color 0s .5s;
}

Üç arka plan katmanımız var - iki degrade ve background-color kullanılarak tanımlanmış --_c başlangıçta şeffaf olarak ayarlanan değişken (#0000). Fareyle üzerine gelindiğinde, rengi beyaza değiştiririz ve --_c ana renge değişken (--c).

İşte bu konuda neler oluyor transition: Önce her şeye bir geçiş uyguluyoruz ama geçişi erteliyoruz. color ve background-color by 0.5s kayma efekti oluşturmak için. Hemen ardından değiştiriyoruz color ve background-color. Metin zaten beyaz olduğundan (ilk gradyan sayesinde) ve arka plan zaten ana renge ayarlandığından (ikinci gradyan sayesinde) görsel bir değişiklik fark etmeyebilirsiniz.

Ardından, fareyi kaldırdığınızda, her şeye anında bir değişiklik uygularız (dikkat edin 0s gecikme hariç), color ve background-color geçişi olan. Bu, tüm gradyanları ilk durumlarına geri koyduğumuz anlamına gelir. Yine, büyük olasılıkla hiçbir görsel değişiklik görmeyeceksiniz çünkü metin color ve background-color fareyle üzerine gelindiğinde zaten değişti.

Son olarak, soldurmayı renge uygularız ve background-color animasyonun fareyle dışarı atılan kısmını oluşturmak için. Biliyorum, kavraması zor olabilir ama farklı renkler kullanarak hileyi daha iyi görselleştirebilirsiniz:

Yukarıdakileri birçok kez gezdirin ve fareyle üzerine gelindiğinde animasyon yapan özellikleri ve fareyle hareket ettirilenleri göreceksiniz. Aynı vurgulu efekt için iki farklı animasyona nasıl ulaştığımızı anlayabilirsiniz.

Unutmayalım kullandığımız KURU anahtarlama tekniği anahtar için yalnızca bir değişken kullanarak kod miktarını azaltmaya yardımcı olmak için bu dizinin önceki makalelerinde:

.hover { --c: 16 149 193; /* the color using the RGB format */ color: rgb(255 255 255 / var(--_i, 0)); background: /* Gradient #1 */ linear-gradient(90deg, #fff 50%, rgb(var(--c)) 0) calc(100% - var(--_i, 0) * 100%) / 200%, /* Gradient #2 */ linear-gradient(rgb(var(--c)) 0 0) 0% 100% / calc(var(--_i, 0) * 100%) no-repeat, /* Background Color */ rgb(var(--c)/ var(--_i, 0)); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; --_t: calc(var(--_i,0)*.5s); transition: var(--_t), color calc(.5s - var(--_t)) var(--_t), background-color calc(.5s - var(--_t)) var(--_t);
}
.hover:hover { --_i: 1;
}

Ana renk için neden RGB sözdizimine ulaştığımı merak ediyorsanız, bunun nedeni alfa şeffaflığı ile oynamam gerektiğidir. Ben de değişkeni kullanıyorum --_t kullanılan gereksiz hesaplamayı azaltmak için transition özelliği.

Bir sonraki bölüme geçmeden önce, bir süre önce yaptığım vurgulu efektlerin daha fazla örneğini burada bulabilirsiniz. background-clip. Her birini detaylandırmak çok uzun olur ama şu ana kadar öğrendiklerimizle kodu kolayca anlayabilirsiniz. Kodlara bakmadan bazılarını tek başına denemek iyi bir ilham kaynağı olabilir.

Biliyorum biliyorum. Bunlar çılgın ve olağandışı vurgulu etkilerdir ve çoğu durumda çok fazla olduklarının farkındayım. Ancak bu, CSS'yi nasıl uygulayacağınız ve öğreneceğinizdir. Unutma, biz limitleri zorlamak CSS vurgulu efektleri. Fareyle üzerine gelme etkisi bir yenilik olabilir, ancak yol boyunca kesinlikle başka şeyler için kullanılabilecek yeni teknikler öğreniyoruz.

CSS kullanarak fareyle üzerine gelme efektleri mask

Bil bakalım ne oldu? CSS mask özellik degradeleri aynı şekilde kullanır background özelliği yapar, bu yüzden bir sonraki yapacağımız şeyin oldukça basit olduğunu göreceksiniz.

Süslü bir alt çizgi oluşturarak başlayalım.

kullanıyorum background bu demoda zikzak bir alt kenarlık oluşturmak için. Bu alt çizgiye bir animasyon uygulamak isteseydim, bunu yalnızca arka plan özelliklerini kullanarak yapmak sıkıcı olurdu.

CSS'yi girin mask.

Kod garip görünebilir, ancak mantık hala önceki tüm arka plan animasyonlarında yaptığımızla aynı. bu mask iki degradeden oluşur. İlk degrade, içerik alanını kaplayan opak bir renkle tanımlanır ( content-box değer). Bu ilk degrade, metni görünür kılar ve alt zikzak kenarlığını gizler. content-box olduğunu mask-clip ile aynı şekilde davranan değer background-clip

linear-gradient(#000 0 0) content-box

İkinci eğim tüm alanı kapsayacaktır (teşekkürler padding-box). Bu, kullanılarak tanımlanan bir genişliğe sahiptir. --_p değişkendir ve öğenin sol tarafına yerleştirilecektir.

linear-gradient(#000 0 0) 0 / var(--_p, 0%) padding-box

Şimdi, tek yapmamız gereken değerini değiştirmek. --_p ikinci degrade için kayma efekti oluşturmak ve alt çizgiyi ortaya çıkarmak için üzerine gelin.

.hover:hover { --_p: 100%; color: var(--c);
}

Aşağıdaki demo, gerçekleşen hileyi daha iyi görmek için maske katmanlarını arka plan olarak kullanır. Yeşil ve kırmızı kısımların, elemanın görünen kısımları olduğunu, diğer her şeyin şeffaf olduğunu hayal edin. Onunla aynı gradyanları kullanırsak maskenin yapacağı şey budur.

Böyle bir hile ile, basitçe farklı bir gradyan konfigürasyonu kullanarak birçok varyasyonu kolayca oluşturabiliriz. mask özelliği:

Bu demodaki her örnek, aşağıdakiler için biraz farklı bir gradyan konfigürasyonu kullanır. mask. Arka plan yapılandırması ile maske yapılandırması arasındaki koddaki ayrıma da dikkat edin. Bağımsız olarak yönetilebilir ve korunabilirler.

Bunun yerine zikzak alt çizgiyi dalgalı bir alt çizgi ile değiştirerek arka plan yapılandırmasını değiştirelim:

Vurgulu efektlerin başka bir koleksiyonu! Tüm maske konfigürasyonlarını korudum ve farklı bir şekil oluşturmak için arka planı değiştirdim. Şimdi, nasıl yapabildiğimi anlayabilirsin. 400 vurgulu efekte ulaşmak için sözde öğeler olmadan - ve hala daha fazlasına sahip olabiliriz!

Mesela neden böyle bir şey olmasın:

İşte size bir meydan okuma: Bu son demodaki kenarlık, mask onu ortaya çıkaracak özellik. Animasyonun arkasındaki mantığı çözebilir misiniz? İlk bakışta karmaşık görünebilir, ancak degradelere dayanan diğer vurgulu efektlerin çoğu için baktığımız mantığa çok benzer. Açıklamanızı yorumlara yazın!

3D olarak fareyle üzerine gelme efektleri

Tek bir öğeyle (ve sözde öğelere başvurmadan!) bir 3D efekti yaratmanın imkansız olduğunu düşünebilirsiniz, ancak CSS'nin bunu gerçekleştirmenin bir yolu vardır.

Orada gördüğünüz şey gerçek bir 3B efekti değil, CSS'yi birleştiren 3B alanda mükemmel bir 2B yanılsaması. background, clip-path, ve transform özellikleri.

Yaptığımız ilk şey değişkenlerimizi tanımlamak:

--c: #1095c1; /* color */
--b: .1em; /* border length */
--d: 20px; /* cube depth */

Ardından, yukarıdaki değişkenleri kullanan genişliklere sahip şeffaf bir kenarlık oluştururuz:

--_s: calc(var(--d) + var(--b));
color: var(--c);
border: solid #0000; /* fourth value sets the color's alpha */
border-width: var(--b) var(--b) var(--_s) var(--_s);

Elemanın üst ve sağ taraflarının her ikisinin de eşit olması gerekir. --b alt ve sol tarafların toplamına eşit olması gerekirken değer --b ve --d (hangisi --_s değişken).

Hilenin ikinci kısmı için, daha önce tanımladığımız tüm sınır alanlarını kapsayan bir gradyan tanımlamamız gerekiyor. A conic-gradient bunun için çalışacak:

background: conic-gradient( at left var(--_s) bottom var(--_s), #0000 90deg,var(--c) 0 ) 0 100% / calc(100% - var(--b)) calc(100% - var(--b)) border-box;

Hilenin üçüncü kısmı için başka bir degrade ekliyoruz. Bu, ana rengin farklı tonlarını oluşturmak için önceki ilk degradeyle örtüşen iki yarı saydam beyaz renk değerini kullanacak ve bize gölgeleme ve derinlik yanılsaması verecektir.

conic-gradient( at left var(--d) bottom var(--d), #0000 90deg, rgb(255 255 255 / 0.3) 0 225deg, rgb(255 255 255 / 0.6) 0
) border-box

Son adım, bir CSS clip-path o uzun gölge sorta hissi için köşeleri kesmek için:

clip-path: polygon( 0% var(--d), var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, 0% 100%
)

Bu kadar! Sadece iki gradyan ve bir clip-path CSS değişkenlerini kullanarak kolayca ayarlayabileceğimiz. Şimdi, tek yapmamız gereken onu canlandırmak!

Önceki şekildeki (kırmızı ile gösterilen) koordinatlara dikkat edin. Animasyonu oluşturmak için bunları güncelleyelim:

clip-path: polygon( 0% var(--d), /* reverses var(--d) 0% */ var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, /* reverses 100% calc(100% - var(--d)) */ 0% 100% /* reverses var(--d) calc(100% - var(--d)) */
)

İşin püf noktası, öğenin alt ve sol kısımlarını gizlemektir, böylece geriye kalan tek şey derinliği olmayan dikdörtgen bir öğedir.

Bu kalem, clip-path ne yaptığını görmek için animasyonun bir kısmı:

Son dokunuş, elemanı kullanarak elemanı ters yönde hareket ettirmektir. translate - ve illüzyon mükemmel! İşte değişen derinlikler için farklı özel özellik değerleri kullanan efekt:

İkinci vurgulu etkisi aynı yapıyı takip eder. Tek yaptığım, sağ üst hareket yerine sol üst hareket oluşturmak için birkaç değeri güncellemek.

Efektleri birleştirmek!

Ele aldığımız her şeyle ilgili harika olan şey, hepsinin birbirini tamamlaması. İşte ekliyorum bir örnek the text-shadow ikinci maddenin etkisi dizide şuna background ilk makaleden animasyon tekniği az önce ele aldığımız 3D numarasını kullanırken:

Gerçek kod ilk başta kafa karıştırıcı olabilir, ancak biraz daha ayrıntılı olarak inceleyin - bunun yalnızca bu üç farklı efektin bir kombinasyonu olduğunu ve hemen hemen birbirine karıştırıldığını fark edeceksiniz.

Bu makaleyi, arka planı, klip yolunu ve bir çizgiyi birleştirdiğim son bir vurgulu efektle bitirmeme izin verin. perspective başka bir 3B efekti simüle etmek için:

Aynı efekti görüntülere de uyguladım ve sonuç, tek bir elemanla 3D simülasyonu yapmak için oldukça iyiydi:

Bu son demonun nasıl çalıştığına daha yakından bakmak ister misiniz? Üzerine bir şeyler yazdım.

Tamamlayan

Oof, işimiz bitti! Biliyorum, bu çok zor bir CSS ama (1) bu tür şeyler için doğru web sitesindeyiz ve (2) amaç, farklı CSS özelliklerine ilişkin anlayışımızı, farklı CSS özellikleriyle etkileşime girmelerine izin vererek yeni seviyelere taşımaktır. bir başka.

Bu küçük gelişmiş CSS vurgulu efekt serisini kapattığımıza göre, buradan sonraki adımın ne olduğunu soruyor olabilirsiniz. Bir sonraki adımın tüm öğrendiklerimizi alıp bunları düğmeler, menü öğeleri, bağlantılar vb. gibi diğer öğelere uygulamak olduğunu söyleyebilirim. Tam da bu nedenle hilelerimizi bir başlık öğesiyle sınırlayacak kadar basit tuttuk. ; asıl unsur önemli değil. Konseptleri alın ve yeni şeyler yaratmak, denemek ve öğrenmek için onlarla birlikte koşun!

---

Arka Plan Kırpma, Maskeler ve 3D Kullanan Harika CSS Vurgulu Efektler 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/css-hover-effects-background-masks-3d/