Oksijen Oluşturucu Arka Plan Gradyanlarıyla Havalı S**t Yapabilirsiniz

Yayınlanan: 2022-05-05

CSS'nin en sevdiğim yönlerinden biri, gerçekten harika efektler oluşturmak için CSS arka plan resimlerini (konumlandırma ve döşeme konusunda zaten çılgınca esnek) ve degradeleri nasıl katmanlayabileceğinizdir. Bunları tonlarca projede uyguluyoruz ve bu yazıda, oluşturmak için bu Oksijen Oluşturucu özelliğini kullanabileceğiniz bazı şeyleri ele almak istedim.

Bu içeriği beğendiniz mi? Facebook Grubumuza (IsoGroup) katılın, bültene abone olun ve Oksijen Oluşturucu Kursumuza (yakında) göz atın.

Bölünmüş (ve duyarlı) Renkli ve Fotoğraf Arka Planları

Bunun için kullanma durumumuz, %50 düz renk ve %50 görüntü ile tam genişlikte bölünmüş arka planlar oluşturmaktır. Bunu 3 div ve flexbox ile yapabilirsiniz, ancak sorun, Oxygen'in bölümleri işleme şekli nedeniyle maksimum sayfa genişliğini kolayca (ve sorumlu bir şekilde) koruyamamanızdır.

izotropik-2022-04-12-at-13-43-21 — Oksijen Bölümü HTML

Bir div'i kesinlikle konumlandırabilir ve bir bölüm olarak ayarlanmış bir div öğesinde .ct-section-inner-wrap sınıfını atayabilirsiniz, ancak CSS gradyanlarını kullanmak genellikle çok daha kolaydır.

İlk olarak, bir arka plan resmi ekleyin.

Ardından, üstüne şöyle bir degrade ekleyin:

izotropik-2022-04-12-at-13-48-14 — Şeffaf renk %50, düz renk %50, aynı düz renk %50.

Yüzde kullandığımız için, bu duyarlıdır. Bu, bir CSS ızgarasını üste yerleştirebileceğimiz ve içine bir miktar içerik atabileceğimiz anlamına gelir.

Standart bir dolgu kullanırsak, süslü hale gelebilir ve arka planı dolguyu "birleştirmek" için konumlandırmak için calc(%50 - dolgunuz) kullanabiliriz.

Ekran boyutuna bağlı olarak bu efektin konumunu, renklerini ve şeffaflığını değiştirmek için duyarlı kesme noktalarından da yararlanabiliriz (not: Oxygen 4.0 Beta 2'de bozuk görünüyor).

Bölünmüş Renkli Arka Planlar

En basit efekt, arka plan görüntüsünü kaldırmak ve bir degradeyi iki renk arasında bölmektir.

Her ikisinin de konumunu %50'ye ayarlayarak solma olmaz. Bunun yerine iki renk arasında sert bir geçiş.

Çizgili bile yapabiliriz. Yüzdeleri kullanırsanız, bunun 100vw'ye tamamen duyarlı olduğunu unutmayın.

Bu gerçekten esnek. Aynı bölümde sert geçişler ve soldurmalar bile uygulayabiliriz:

Ve son olarak, bir arka plan görüntüsü eklersek, bu efektleri görüntünün üstüne katmanlayabiliriz.

izotropik-2022-04-12-at-13-45-42 — Sadece standart bir arka plan resmi ekleyin.

Çok Renkli Gradyanlar

Sabit durdurmayı kaldırabilir ve renkleri şu şekilde birleştirebiliriz:

Dilediğiniz kadar ekleyebilirsiniz. Renkleri bir araya getirirken, genellikle konumlandırmayı boş bırakırım.

Canlandır

Gerçekten basit bir animasyon, arka planı basitçe hareket ettirmek olabilir. Bunu yapmak için, degradenizin olduğu bölüme aşağıdaki CSS'yi ekleyin:

animasyon: Animasyon 5'ler sonsuz kolaylık; arka plan boyutu: %200 %200;

Ardından, animasyon ana karelerini oluşturun ve Evrensel Stil Sayfanıza ekleyin:

@-webkit-keyframes Animasyon { 0%{background-position:10 0%} 50%{background-position:91% 100%} 100%{background-position: 10% 0%} } @-moz-keyframes Animasyon { 0%{background-position:10 0%} 50%{background-position:91% 100%} 100%{background-position: 10% 0%} } @keyframes Animasyon { 0%{background-position:10 % 0%} 50%{background-position:91% 100%} 100%{background-position: 10% 0%} }

izotropik-2022-04-12-at-13-32-51 — Evrensel Animasyon

Arka plan degradesinin boyutunu iki katına çıkardığımız için, renkleri bu şekilde merkeze doğru itiyorum.

Oxygen Builder'da Gradyan Kenarlığı

izotropik-2022-04-12-at-14-02-14 — Bu bölümdeki kod, bu CodePen'den alınmıştır.

Bu yöntemi izleyerek Oxygen Builder'daki bir öğeye degrade kenarlığı da ekleyebilirsiniz. İlk önce, div'inizi ekleyin.

Buna bir .gradient-border sınıfı ekleyin. Bu kodu özel CSS'ye yapıştırın:

--borderWidth: 3px; arka plan: #1D1F20; pozisyon: göreceli; sınır yarıçapı: 3px

Şimdi, bu sınıfın :after durumuna gidin.

Aşağıdaki özel CSS'ye yapıştırın:

konum: mutlak; üst: calc(-1 * var(-borderWidth)); sol: calc(-1 * var(--borderWidth)); yükseklik: calc(100% + var(--borderWidth) * 2); genişlik: calc(100% + var(--borderWidth) * 2); border-radius: calc(2 * var(-borderWidth)); z-endeksi: -1;

Arka plan gradyanını normal gibi ayarlayın veya bunu .gradient-border:after'ın özel CSS'sine yapıştırın:

background : linear-gradient (60 deg , #f79533 , #f37055 , #ef4e7b , #a166ab , #5073b8 , #1098ad , #07b39b , #6fba82 );
 Kod dili: CSS ( css )

Şimdi, .gradient-border sınıfını bir div veya öğeye her uyguladığınızda, efekt uygulanacaktır.

Canlandır

Şunları ekleyerek canlandırabilirsiniz:

-webkit-animasyon: animasyonlu gradyan 3'ler alternatif sonsuzu kolaylaştırır; animasyon: animasyonlu gradyan 3'ler alternatif sonsuzu kolaylaştırır; arka plan boyutu: %300 %300;

.gradient-border:after , ve

@-webkit-keyframes animasyonlu gradyan { %0 { arka plan konumu: %0 %50; } %50 { arka plan konumu: %100 %50; } %100 { arka plan konumu: %0 %50; } } @keyframes animasyonlu gradyan { %0 { arka plan konumu: %0 %50; } %50 { arka plan konumu: %100 %50; } %100 { arka plan konumu: %0 %50; } }

evrensel CSS'nize.

Hepsi Bu CSS'dir

Bunu saf CSS ile yapmak için https://cssgradient.io/ gibi bir araç kullanabilirsiniz. Bu araç, degradeler için gereken CSS doğrusal gradyanını oluşturur. Tek yapmanız gereken, Oksijen'deki belirli bir öğenin özel CSS alanına kopyalamak/yapıştırmak.

Şunları da okumak hoşunuza gidebilir:

Abone Ol ve Paylaş

Bu içeriği beğendiyseniz, aylık WordPress haberleri, web sitesi ilhamı, özel fırsatlar ve ilginç makalelere abone olun.

İstediğiniz zaman abonelikten çıkın. Spam yapmıyoruz ve e-postanızı asla satmayacağız veya paylaşmayacağız.