• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Płynne przejście gradientu

VPS Starter Arubacloud
+2 głosów
244 wizyt
pytanie zadane 22 grudnia 2022 w HTML i CSS przez Dawidziu Bywalec (2,590 p.)

Z jakiegoś powodu, kiedy dodam do CSS'a 

transition: all 0.2s ease-in-out;

kiedy tło diva ustawione jest na

background: linear-gradient(#0087ff, #003dff);

to kiedy następuje jego zmiana, na np

background: linear-gradient(#22a9ff, #225fff);

dzieje się ona natychmiastowo, w przeciwieństwie do sytuacji, kiedy tło ma wartość choćby

background: #225fff;

Jest możliwość, aby i przy gradiencie zmiana koloru tła była płynna?

1 odpowiedź

+2 głosów
odpowiedź 23 grudnia 2022 przez rafal.budzis Szeryf (85,260 p.)

Da się to obejść jednak warto się zagłębić jak to działa. linear-gradient generuje obrazek który jest przypisywany do tła. Dlatego też używa się go jako właściwość background-image a nie background-colorbackground-image nie jest animowany bo skąd wiadomo jak zrobić animacje przejścia miedzy 2 obrazami? 

Aby to obejść dodaj dwa elementy z jednym i drugim tłem. I tylko jedno tło animuj poprzez opacity ;) 

Jeśli potrzebujesz lepszego przejścia między gradientami możesz wykorzystać SVG i animować właściwość stop-color która nie jest obrazkiem ;) 

https://codepen.io/ZachSaucier/pen/QNdYBb?editors=1100 

komentarz 23 grudnia 2022 przez VBService Ekspert (250,450 p.)

W ramach ciekawostki, nieco zmodyfikowany kody z przykładu podanego "wyżej" przez @rafal.budzis; on-line

komentarz 23 grudnia 2022 przez Dawidziu Bywalec (2,590 p.)

@rafal.budzis, jednak zmieniając opacity, zmieni się ono także dla elementów wewnątrz

1
komentarz 23 grudnia 2022 przez rafal.budzis Szeryf (85,260 p.)
Dawidziu a czy ja kazałem mieć jakieś elementy wewnątrz? ;) Możesz pobawić się pozycją absolutną lub skopiować elementy wewnątrz do obu elementów.

VBService  Dzięki ;) ja wrzuciłem pierwszy przykład z stacka ;) Wiedziałem że tak się da ale nie chciało mi się tego pisać :D
komentarz 23 grudnia 2022 przez VBService Ekspert (250,450 p.)
edycja 25 grudnia 2022 przez VBService

@Dawidziu, to musi (może) być na zasadzie np.

<div class="gradient-container">
  <!-- opacity: 1 -->
  <div class="gradient">Gradient: blue, red</div>
  <!-- opacity: 0 -->
  <div class="hover">Gradient: red, blue</div>
</div>

i w css-ie zamieniasz (transition, animation)

<div class="gradient-container">
  <!-- opacity: 0 -->
  <div class="gradient">Gradient: blue, red</div>
  <!-- opacity: 1 -->
  <div class="hover">Gradient: red, blue</div>
</div>

 

.gradient-container {
  position: relative;
}
.gradient-container div {
  position: absolute;
}

resztę css-a dopisz sam.

 

wink [ on-line ]

komentarz 23 grudnia 2022 przez Dawidziu Bywalec (2,590 p.)

@rafal.budzis, nigdzie nie napisałem, że tak kazałeś, po prostu raczej szukałbym sposobu, żeby mogły one tam być nienaruszone

Podobne pytania

0 głosów
1 odpowiedź 1,066 wizyt
pytanie zadane 24 stycznia 2016 w HTML i CSS przez Mavimix Dyskutant (8,390 p.)
0 głosów
1 odpowiedź 889 wizyt
pytanie zadane 19 listopada 2017 w HTML i CSS przez TheFunny Gaduła (3,420 p.)
0 głosów
2 odpowiedzi 553 wizyt
pytanie zadane 26 stycznia 2017 w HTML i CSS przez Meggie Nowicjusz (120 p.)

92,416 zapytań

141,222 odpowiedzi

318,985 komentarzy

61,831 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...