CSS'ye ne sıklıkla ulaşıyorsunuz? background-size Emlak? Benim gibiyseniz - ve muhtemelen diğer birçok ön uç insan - o zaman genellikle background-size: cover tüm bir öğenin alanını dolduracak bir görüntü.
Bana daha gelişmiş arka plan boyutlandırması gerektiren ilginç bir zorluk sunuldu: fareyle üzerine gelindiğinde geçiş yapan arka plan şeritleri. Şuna bakın ve imlecinizle üzerine gelin:
Orada arka planın boyutundan çok daha fazlası var ama şeritlerin geçişini sağlamak için ihtiyacım olan numara buydu. Size oraya nasıl geldiğimi göstermeyi düşündüm, sadece gerçekten güzel bir görsel efekt olduğunu düşündüğüm için değil, aynı zamanda hoşunuza gidebileceğini düşündüğüm degradeler ve karışım modları ile yaratıcı olmamı gerektirdiği için.
İşleri basitleştirmek için çok basit bir kurulumla başlayalım. tek bir kişiden bahsediyorum
yeşil kare olarak biçimlendirilmiş HTML'de:
div {
width: 500px;
height: 500px;
background: palegreen;
}Arka plan şeritlerini ayarlama
Bu şeritleri gördüğünüzde aklınız doğrudan bir CSS doğrusal gradyanına gittiyse, o zaman zaten aynı sayfadayız. Bu durumda tam olarak yinelenen bir gradyan yapamayız, çünkü şeritlerin eşit olmayan miktarda alan kaplamasını ve aralarında geçiş yapmasını istiyoruz, ancak beş arka planı mevcut arka plan rengimizin üzerine zincirleyerek ve en üste yerleştirerek beş şerit oluşturabiliriz. - konteynerin sağında:
div {
width: 500px;
height: 500px;
background:
linear-gradient(black, black) top right,
linear-gradient(black, black) top 100px right,
linear-gradient(black, black) top 200px right,
linear-gradient(black, black) top 300px right,
linear-gradient(black, black) top 400px right,
palegreen;
}Yatay şeritler yaptım ama burada ele aldığımız yaklaşımla dikey de gidebiliriz. Ve bunu özel özelliklerle biraz basitleştirebiliriz:
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
}Bu yüzden, --gt değer gradyandır ve --n dikey olarak kaydırılmaları için şeritleri aşağı doğru itmek için kullandığımız bir sabittir. Fark etmişsinizdir ki, gerçek bir gradyan değil, bunun yerine düz siyah şeritler ayarlıyorum. linear-gradient() işlev - bu kasıtlı ve bunu neden yaptığımı birazdan anlayacağız.
Devam etmeden önce yapmamız gereken bir şey daha, arka planlarımızın tekrar etmesini engellemektir; aksi takdirde, tüm alanı döşer ve doldururlar:
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
background-repeat: no-repeat;
}ayarlayabilirdik background-repeat içinde background stenografi, ancak her şeyin okunmasını kolaylaştırmak için burada ayırmaya karar verdim.
Çizgileri dengelemek
Teknik olarak şeritlerimiz var, ancak aralarında boşluk olmadığı ve tüm kabı kapladıkları için bunu söylemek oldukça zor. Daha çok katı siyah bir karemiz var gibi.
İşte burada kullanacağız background-size Emlak. Şeritlerin hem yüksekliğini hem de genişliğini ayarlamak istiyoruz ve özellik, tam olarak bunu yapmamıza izin veren iki değerli bir sözdizimini destekliyor. Ve bu boyutları, üzerinde yaptığımız gibi virgülle ayırarak zincirleyebiliriz. background.
Önce genişlikleri ayarlayarak basit başlayalım. için tek değerli sözdizimini kullanma background-size genişliği ayarlar ve yüksekliği varsayılan olarak auto. Burada tamamen rasgele değerler kullanıyorum, bu yüzden değerleri tasarımınız için en uygun olana ayarlayın:
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
background-repeat: no-repeat;
background-size: 60%, 90%, 70%, 40%, 10%;
}Benimle aynı değerleri kullanıyorsanız, şunu elde edersiniz:
Tam olarak tüm şeritlerin genişliğini ayarlamışız gibi görünmüyor, değil mi? Bunun nedeni auto tek değerli sözdiziminin yükseklik davranışı. İkinci şerit, altındaki diğerlerinden daha geniştir ve onları örter. Yaptığımız işi görebilmek için yükseklikleri ayarlamalıyız. Hepsi aynı yükseklikte olmalı ve aslında yeniden kullanabiliriz --n işleri basit tutmak için yine değişken:
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
background-repeat: no-repeat;
background-size: 60% var(--n), 90% var(--n), 70% var(--n), 40% var(--n), 10% var(--n); // HIGHLIGHT 15
}Çok daha iyi!
Çizgiler arasına boşluk ekleme
Tasarımınız şeritler arasında boşluk gerektirmiyorsa, ancak benimki gerektiriyorsa ve aşırı karmaşık değilse, bu tamamen isteğe bağlı bir adımdır. Her şeridin yüksekliğini değiştiriyoruz background-size tam dikey alanı doldurmada yetersiz kalacak şekilde değeri düşüren bir leke.
kullanmaya devam edebiliriz --n değişken, ancak küçük bir miktar çıkarın, diyelim 5pxKullanılarak calc() istediğimizi elde etmek için.
background-size: 60% calc(var(--n) - 5px), 90% calc(var(--n) - 5px), 70% calc(var(--n) - 5px), 40% calc(var(--n) - 5px), 10% calc(var(--n) - 5px);Bu, başka bir değişkenle ortadan kaldırabileceğimiz çok fazla tekrar:
div {
--h: calc(var(--n) - 5px);
/* etc. */
background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}Maskeleme ve karıştırma
Şimdi takas edelim palegreen Beyaz için bu noktaya kadar görsel amaçlı kullandığımız zemin rengi.
div {
/* etc. */
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
#fff;
/* etc. */
}Bunun gibi siyah beyaz bir desen, maskeleme ve karıştırma için mükemmeldir. Bunu yapmak için, önce çantamızı saracağız.
yeni bir üst kapsayıcıda ve bir saniyeyi tanıtın
onun altında:
Burada küçük bir CSS yeniden faktoringi yapacağız. Artık yeni bir ana kapsayıcımız olduğuna göre, sabit olanı geçebiliriz. width ve height üzerinde kullandığımız özellikler
orada:
section {
width: 500px;
height: 500px;
} Ayrıca ikisini konumlandırmak için CSS Grid kullanacağım
elemanlar birbirinin üzerindedir. Bu, Temani Afif'in kendi oyununu yaratmak için kullandığı hilenin aynısıdır. süper havalı resim galerileri. Buradaki fikir, her iki div'i de dolu kabın üzerine yerleştirmemizdir. grid-area özellik ve her şeyi merkeze doğru hizalayın:
section {
display: grid;
align-items: center;
justify-items: center;
width: 500px;
height: 500px;
}
section > div {
width: inherit;
height: inherit;
grid-area: 1 / 1;
}Şimdi, şuna bir bak. Daha önce siyahtan siyaha giden katı bir gradyan kullanmamın nedeni, bizi ikisini maskelemek ve karıştırmak için ayarlamaktır.
katmanlar. Bu, bizim adlandırdığımız anlamda gerçek maskeleme değildir. mask özelliği, ancak katmanlar arasındaki kontrast hangi renklerin görünür olduğunu kontrol eder. Beyazın kapsadığı alan beyaz kalır ve siyahın kapladığı alan sızar. Karışım modlarıyla ilgili MDN belgeleri bunun nasıl çalıştığına dair güzel bir açıklaması var.
Bunun işe yaraması için, ilkinde görmek istediğimiz gerçek gradyanı uygulayacağım.
ilk halimizdeki stil kurallarını uygularken
kullanarak, yenisinde :nth-child() sözde seçici:
div:nth-child(1) {
background: linear-gradient(to right, red, orange);
}
div:nth-child(2) {
--gt: linear-gradient(black, black);
--n: 100px;
--h: calc(var(--n) - 5px);
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
white;
background-repeat: no-repeat;
background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}Burada durursak, aslında daha önce sahip olduğumuzdan herhangi bir görsel fark görmeyeceğiz. Bunun nedeni, gerçek harmanlamayı henüz yapmamış olmamızdır. Şimdi bunu kullanarak yapalım screen karıştırma modu:
div:nth-child(2) {
/* etc. */
mix-blend-mode: screen;
}Bu makalenin başında gösterdiğim demoda bej bir arka plan rengi kullandım. Bu biraz daha koyu, kirli beyaz renklendirme, arka planın geri kalanından biraz renk sızmasına izin verir:
Vurgulu etkisi
Bu bulmacanın son parçası, şeritleri tam genişliğe genişleten vurgulu efekttir. Öncelikle bunun için seçicimizi yazalım. Bunun, ana kapsayıcı (
bizim durumumuzda) üzerine gelinir. Fareyle üzerine gelindiğinde, saniye içinde bulunan şeritlerin arka plan boyutunu değiştireceğiz.
:
/* When is hovered, change the second div's styles */
section:hover > div:nth-child(2){
/* styles go here */
} değiştirmek isteyeceğiz background-size aynı yüksekliği korurken şeritlerin kabın tüm genişliğine kadar:
section:hover > div:nth-child(2){
background-size: 100% var(--h);
}Bu, arka planı tam genişlikte "yakalar". biraz eklersek transition buna göre, üzerine gelindiğinde şeritlerin genişlediğini görüyoruz:
section:hover > div:nth-child(2){
background-size: 100% var(--h);
transition: background-size 1s;
}İşte o son demo bir kez daha:
Buraya yalnızca bunu farklı bir bağlamda kullanmanın nasıl görünebileceğini göstermek için metin ekledim. Aynısını yaparsanız, metin rengi ile degradede kullanılan renkler arasında uyum sağlamak için yeterli kontrast olduğundan emin olmaya değer. WCAG yönergeleri. Erişilebilirliğe kısaca değinirken, buna değer azaltılmış hareket için kullanıcı tercihlerini göz önünde bulundurarak vurgulu etkisi söz konusu olduğunda.
Bu bir paket!
Oldukça temiz, değil mi? Kesinlikle öyle düşünüyorum. Bu konuda da sevdiğim şey, oldukça bakım yapılabilir ve özelleştirilebilir olmasıdır. Örneğin, birkaç değeri değiştirerek şeritlerin yüksekliğini, renklerini ve yönünü değiştirebiliriz. Hatta daha da yapılandırılabilir hale getirmek için oradaki birkaç şeyi (renkler ve genişlikler gibi) çeşitlendirebilirsiniz.
Buna farklı bir şekilde yaklaşsaydınız gerçekten ilgilenirdim. Eğer öyleyse, lütfen yorumlarda paylaşın! Kaç tane varyasyon toplayabileceğimizi görmek güzel olurdu.
