Możesz zrobić fajne S ** t z gradientami tła Oxygen Builder

Opublikowany: 2022-05-05

Jednym z moich ulubionych aspektów CSS jest to, jak można nakładać obrazy tła CSS (już szalenie elastyczne z pozycjonowaniem i kafelkowaniem) oraz gradienty, aby uzyskać naprawdę fajne efekty. Wdrażamy je w tonach projektów, a w tym poście chciałem omówić niektóre z rzeczy, które można wykorzystać do tworzenia tej funkcji Oxygen Builder.

Podoba Ci się ta treść? Dołącz do naszej grupy na Facebooku (IsoGroup), zapisz się do newslettera i sprawdź nasz kurs Oxygen Builder (dostępny wkrótce).

Podziel (i responsywne) kolory i tła fotograficzne

Naszym celem jest budowanie tła podzielonego na całą szerokość z 50% jednolitym kolorem i 50% obrazem. Możesz to zrobić z 3 divami i flexboxem, ale problem polega na tym, że nie będziesz w stanie łatwo (i odpowiedzialnie) utrzymać maksymalnej szerokości strony ze względu na sposób, w jaki Oxygen obsługuje sekcje.

izotropowy-2022-04-12-at-13-43-21 — Sekcja tlenu HTML

Chociaż absolutnie można ustawić div i przypisać .ct-section-inner-wrap w elemencie div ustawionym jako sekcja, używanie gradientów CSS jest zwykle znacznie łatwiejsze.

Najpierw dodaj obraz tła.

Następnie dodaj gradient na wierzchu, na przykład:

izotropowy-2022-04-12-at-13-48-14 — Kolor przezroczysty 50%, kolor jednolity 50%, ten sam kolor jednolity 50%.

Ponieważ używamy wartości procentowych, jest to responsywne. Oznacza to, że możemy nałożyć siatkę CSS na wierzch i wrzucić do niej trochę treści.

Jeśli użyjemy znormalizowanego dopełnienia, możemy nawet wymyślić i użyć funkcji calc(50% - twoje dopełnienie), aby ustawić tło tak, aby „włączyć” dopełnienie.

Możemy również wykorzystać responsywne punkty przerwania, aby zmienić położenie, kolory i przezroczystość tego efektu w zależności od rozmiaru ekranu (uwaga: wydaje się, że jest uszkodzony w Oxygen 4.0 Beta 2).

Podziel kolor tła

Najprostszym efektem jest usunięcie obrazu tła i po prostu podzielenie gradientu między dwa kolory.

Ustawiając położenie obu na 50%, nie będzie zanikania. Zamiast tego twarde przejście między dwoma kolorami.

Możemy nawet zrobić paski. Pamiętaj, że jest to w pełni responsywne do 100vw, jeśli używasz wartości procentowych.

To jest naprawdę elastyczne. Możemy nawet zaimplementować twarde przejścia i zanikania w tej samej sekcji:

I na koniec, jeśli dodamy obraz tła, możemy nałożyć te efekty na obraz.

izotropowy-2022-04-12-at-13-45-42 — Wystarczy dodać standardowy obraz tła.

Gradienty wielokolorowe

Możemy usunąć twardy ogranicznik i połączyć kolory w taki sposób:

Możesz dodać tyle, ile chcesz. Podczas łączenia kolorów zazwyczaj zostawiam puste miejsce.

Animuj to

Naprawdę podstawową animacją może być po prostu przesuwanie tła. Aby to zrobić, dodaj następujący kod CSS do sekcji ze swoim gradientem:

animacja: animacja 5s ułatwia nieskończoność; rozmiar tła: 200% 200%;

Następnie utwórz klatki kluczowe animacji i dodaj je do swojego uniwersalnego arkusza stylów:

@-webkit-keyframes Animacja { 0%{background-position:10% 0%} 50%{background-position:91% 100%} 100%{background-position:10% 0%} } @-moz-keyframes Animacja { 0%{pozycja w tle:10% 0%} 50%{pozycja w tle:91% 100%} 100%{pozycja w tle:10% 0%} } @keyframes Animacja { 0%{pozycja w tle:10 % 0%} 50%{pozycja w tle:91% 100%} 100%{pozycja w tle:10% 0%} }

izotropowy-2022-04-12-at-13-32-51 — Uniwersalna animacja

Ponieważ podwoiliśmy rozmiar gradientu tła, w ten sposób wpycham kolory z powrotem do środka.

Gradient Gradient w Oxygen Builder

izotropowy-2022-04-12-at-14-02-14 — Kod z tej sekcji pochodzi z tego CodePen.

Postępując zgodnie z tą metodą, możesz również dodać granicę gradientu do elementu w Oxygen Builder. Najpierw dodaj swój div.

Dodaj do niego klasę .gradient-border . Wklej ten kod do niestandardowego CSS:

--borderSzerokość: 3px; tło: #1D1F20; pozycja: względna; promień obramowania: 3px

Teraz przejdź do stanu :after tej klasy.

Wklej następujący niestandardowy kod CSS:

pozycja: bezwzględna; góra: calc(-1 * var(--borderWidth)); po lewej: calc(-1 * var(--borderWidth)); wysokość: calc(100% + var(--borderWidth) * 2); szerokość: calc(100% + var(--borderWidth) * 2); border-radius: calc(2 * var(--borderWidth)); indeks z: -1;

Ustaw gradient tła jak zwykle lub po prostu wklej go do niestandardowego CSS .gradient-border:after zbyt:

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

Teraz za każdym razem, gdy zastosujesz klasę .gradient-border do elementu div lub elementu, efekt zostanie zastosowany.

Animuj to

Możesz go animować, dodając:

-animacja webkit: animowane gradienty 3s ułatwiają naprzemienne nieskończone; animacja: animowany gradient 3s łatwość naprzemienna nieskończona; rozmiar tła: 300% 300%;

do .gradient-border:after i

@-webkit-keyframes animowanygradient { 0% { pozycja w tle: 0% 50%; } 50% { pozycja tła: 100% 50%; } 100% { pozycja w tle: 0% 50%; } } @keyframes animowanygradient { 0% { background-position: 0% 50%; } 50% { pozycja tła: 100% 50%; } 100% { pozycja w tle: 0% 50%; } }

do Twojego uniwersalnego CSS.

To wszystko CSS

Możesz użyć narzędzia takiego jak https://cssgradient.io/, aby zrobić to za pomocą czystego CSS. To narzędzie generuje liniowy gradient CSS potrzebny do gradientów. Wszystko, co robisz, to kopiowanie/wklejanie do niestandardowego pola CSS określonego elementu w Oxygen.

Możesz również przeczytać:

Subskrybuj i udostępniaj

Jeśli spodobała Ci się ta treść, zasubskrybuj nasz comiesięczny przegląd wiadomości WordPress, inspiracji do stron internetowych, ekskluzywnych ofert i interesujących artykułów.

Zrezygnuj z subskrypcji w dowolnym momencie. Nie spamujemy i nigdy nie będziemy sprzedawać ani udostępniać Twojego e-maila.