Tworzenie liniowych gradientów między przeglądarkami za pomocą CSS3

01 z 04

Tworzenie liniowych gradientów między przeglądarkami za pomocą CSS3

Liniowe gradienty

Najczęstszym typem gradientu jest gradient liniowy dwóch kolorów. Oznacza to, że gradient porusza się po linii prostej, zmieniając się stopniowo od pierwszego koloru do drugiego wzdłuż tej linii. Obraz na tej stronie pokazuje prosty od lewej do prawej gradient # 999 (ciemnoszary) do #fff (biały).

Liniowe gradienty są najłatwiejsze do zdefiniowania i mają największe wsparcie w przeglądarkach. Gradienty CSS3 są obsługiwane w systemach Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ i Safari 4+. Internet Explorer może dodawać gradienty za pomocą filtr i wspiera je z powrotem do IE 5.5. To nie jest CSS3, ale jest to opcja kompatybilności z różnymi przeglądarkami.

Kiedy definiujesz gradient, musisz zdefiniować kilka różnych rzeczy:

Jakiego rodzaju jest to gradient-liniowy lub promieniowy
Gdzie powinien rozpocząć się gradient
Gdzie gradient powinien się zatrzymać
Jakie kolory są w gradiencie i gdzie powinny się zacząć i zatrzymać

Aby zdefiniować gradienty liniowe za pomocą CSS3, piszesz:

gradient liniowy(kąt lub bok lub róg, Zatrzymanie koloru, Zatrzymanie koloru)

Najpierw definiujesz typ gradientu z nazwą liniowy -gradient.

Następnie definiujesz punkty początkowe i końcowe gradientu na jeden z dwóch sposobów: kąt linii w stopniach od 0 do 359, z 0 stopniami skierowanymi w górę. Lub z funkcją "boczną lub narożną", taką jak lewo, dobrze, Dolny, i Top. Zostaną one wyjaśnione bardziej szczegółowo na następnej stronie. Jeśli je opuścisz, gradient przepłynie od góry do dołu elementu.

Następnie definiujesz przystanki kolorów. Zdefiniowanie przystanków kolorów można zdefiniować za pomocą kodu koloru i opcjonalnej wartości procentowej. Procent mówi przeglądarce, gdzie w linii, aby rozpocząć lub zakończyć z tym kolorem. Domyślnie ustawia się kolory równomiernie wzdłuż linii. Dowiesz się więcej o przystankach kolorów na stronie 3.

Aby zdefiniować powyższy gradient za pomocą CSS3, piszesz:
gradient liniowy (lewy, # 999999 0%, #ffffff 100%);
I ustawić go jako tło DIV ty piszesz:
div {background-image: linear-gradient (po lewej, # 999999 0%, #ffffff 100%;}
Rozszerzenia przeglądarki dla liniowych gradientów CSS3

Aby gradient działał w różnych przeglądarkach, musisz używać rozszerzeń przeglądarki dla większości przeglądarek i filtr dla przeglądarki Internet Explorer 9 i niższej (właściwie 2 filtry). Wszystkie te elementy przyjmują te same elementy, aby zdefiniować gradient (z wyjątkiem tego, że w IE można definiować tylko 2-kolorowe gradienty).

Filtry i rozszerzenia Microsoft-Internet Explorer jest najbardziej wymagającym wsparciem, ponieważ potrzebujesz trzech różnych linii obsługujących różne wersje przeglądarek. Aby uzyskać powyższy gradient szarości do białego, należy napisać:
/ * IE 5,5-7 * /filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);/ * IE 8-9 * /-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";/ * IE 10 * /-ms-liniowy gradient (lewy, # 999999 0%, #ffffff 100%);
Rozszerzenie Mozilli-The -moz- rozszerzenie działa tak jak własność CSS3, tylko z -moz- rozbudowa. Aby uzyskać powyższy gradient dla przeglądarki Firefox, napisz:
-moz-liniowy-gradient (lewy, # 999999 0%, #ffffff 100%);
Rozszerzenie Opera-The -o- rozszerzenie dodaje gradienty do Opery 11.1+. Aby uzyskać powyższy gradient, napisz:
-o-liniowy gradient (lewy, # 999999 0%, #ffffff 100%);
Rozszerzenie Webkit-The -webkit- rozszerzenie działa bardzo podobnie do właściwości CSS3. Aby zdefiniować powyższy gradient w Safari 5.1+ lub Chrome 10+, piszesz:
-webkit-liniowy-gradient (po lewej, # 999999 0%, #ffffff 100%);
Istnieje również starsza wersja rozszerzenia Webkit, która działa z Chrome 2+ i Safari 4+. W nim definiujesz typ gradientu jako wartość, a nie nazwę właściwości. Aby uzyskać szary lub biały gradient z tym rozszerzeniem, napisz:
-składka-web (liniowy, lewy górny, prawy górny, kolor-stop (0%, # 999999), kolor-stop (100%, # ffffff));
Pełny liniowy kod CSS3 CSS3

Aby uzyskać pełną obsługę różnych przeglądarek, aby uzyskać szary lub biały gradient powyżej, powinieneś najpierw dodać stały kolor zastępczy dla przeglądarek, które nie obsługują gradientów, a ostatnim elementem powinien być styl CSS3 dla przeglądarek, które są w pełni zgodne. Więc piszesz:
tło: # 999999;tło: -moz-liniowy-gradient (po lewej, # 999999 0%, #ffffff 100%);background: -składka -tekstu (liniowy, lewy górny, prawy górny, kolor-stop (0%, # 999999), kolor-stop (100%, # ffffff));background: -webkit -line-gradient (po lewej, # 999999 0%, #ffffff 100%);tło: -o-liniowy gradient (lewy, # 999999 0%, #ffffff 100%);tło: -ms-liniowy-gradient (po lewej, # 999999 0%, #ffffff 100%);filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);tło: gradient liniowy (lewy, # 999999 0%, #ffffff 100%);
Kolejne strony tego samouczka objaśniają części gradientu bardziej szczegółowo, a ostatnia strona wskazuje narzędzie, które jest doskonałym sposobem automatycznego tworzenia gradientów CSS3.

Zobacz ten gradient liniowy w akcji używając tylko CSS.
02 z 04
Tworzenie przekątnych gradientów - kąt gradientu

Punkty początkowe i końcowe określają kąt nachylenia. Większość gradientów liniowych jest od góry do dołu lub od lewej do prawej. Ale możliwe jest zbudowanie gradientu, który porusza się po linii ukośnej. Obraz na tej stronie pokazuje prosty gradient, który porusza się pod kątem 45 stopni na całym obrazie od prawej do lewej.

Kąty definiujące linię gradientową

Kąt jest linią na wyimaginowanym kole w środku elementu. 0deg wskazuje, 90 stopni wskazuje na prawo, 180 stopni wskazuje w dół, i 270 stopni wskazuje na lewo. Możesz zdefiniować dowolny kąt od 0 do 359 stopni.

Należy zauważyć, że w kwadracie kąt 45 stopni przesuwa się z lewego górnego rogu do prawego dolnego rogu, ale w prostokącie punkty początkowy i końcowy znajdują się nieco poza kształtem, jak widać na obrazku.

Najpopularniejszym sposobem definiowania ukośnego gradientu jest zdefiniowanie rogu, na przykład w prawym górnym rogu a gradient przesunie się z tego rogu do przeciwległego rogu. Możesz zdefiniować wyjściową pozycję za pomocą następujących słów kluczowych:

Top

dobrze

Dolny

lewo

środek

Można je połączyć, aby były bardziej szczegółowe, takie jak:

w prawym górnym rogu

lewy górny

góra centrum

prawy dolny

na dole po lewej

centrum dolne

prawe centrum

w lewo centrum

Oto CSS dla gradientu podobnego do tego na zdjęciu, czerwony do białego, poruszający się od prawego górnego rogu do lewego dolnego rogu:
tło: ## 901A1C;background-image: -moz-linear-gradient (prawy górny, # 901A1C 0%, # FFFFFF 100%);background-image: -składka-web (liniowy, prawy górny, lewy dolny, kolor-stop (0, # 901A1C), kolor-stop (1, #FFFFFF));tło: -webkit-liniowy-gradient (prawy górny, # 901A1C 0%, #ffffff 100%);tło: -o-liniowy gradient (prawy górny, # 901A1C 0%, #ffffff 100%);tło: -ms-liniowy-gradient (prawy górny, # 901A1C 0%, #ffffff 100%);tło: gradient liniowy (prawy górny, # 901A1C 0%, #ffffff 100%);
Być może zauważyłeś, że w tym przykładzie nie ma filtrów IE. Dzieje się tak, ponieważ IE zezwala tylko na dwa typy filtrów: od góry do dołu (domyślne) i od lewej do prawej (z GradientType = 1 przełącznik).

Zobacz ten ukośny gradient liniowy w akcji używając tylko CSS.
03 z 04
Zatrzymania kolorów

Dzięki gradientom liniowym CSS3 możesz dodać wiele kolorów do gradientu, aby uzyskać jeszcze lepsze efekty. Aby dodać te kolory, dodajesz dodatkowe kolory na końcu swojej właściwości, oddzielając je przecinkami. Powinieneś podać, gdzie na linii kolory również powinny się zaczynać lub kończyć.

Filtry Internet Explorera obsługują tylko dwa kolory zatrzymań, więc podczas tworzenia tego gradientu należy uwzględnić tylko pierwszy i drugi kolor, który ma zostać wyświetlony.

Oto CSS dla powyższego 3-kolorowego gradientu:
tło: #ffffff;tło: -moz-liniowy-gradient (lewy, #ffffff 0%, # 901A1C 51%, #ffffff 100%);background: -składka-web (liniowy, lewy górny, prawy górny, kolor-stop (0%, # ffffff), kolor-stop (51%, # 901A1C), kolor-stop (100%, # ffffff));tło: -webkit-liniowy-gradient (lewy, #ffffff 0%, # 901A1C 51%, # ffffff 100%);tło: -o-liniowy gradient (lewy, #ffffff 0%, # 901A1C 51%, # ffffff 100%);tło: -ms-liniowy-gradient (lewy, #ffffff 0%, # 901A1C 51%, # ffffff 100%);filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);tło: gradient liniowy (lewy, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Zobacz ten gradient liniowy z trzema kolorowymi przystankami w akcji używając tylko CSS.
04 z 04
Ułatwiaj budowanie gradientów budynków

Są dwie strony, które polecam, aby pomóc Ci w tworzeniu gradientów, każdy ma zalety i wady, nie znalazłem konstruktora gradientów, który robi wszystko.

Ultimate CSS Gradient GeneratorTen generator gradientów jest bardzo popularny, ponieważ działa w podobny sposób do budowniczych gradientów w programach takich jak Photoshop. Podoba mi się też, ponieważ daje ci wszystkie rozszerzenia CSS, a nie tylko Webkit i Mozillę. Problem z tym generatorem polega na tym, że obsługuje on tylko poziomy i pionowy gradient. Jeśli chcesz robić ukośne gradienty, musisz przejść do innego generatora, który polecam.
CSS3 Gradient GeneratorTen generator trochę mnie zrozumiał niż pierwszy, ale wspiera zmianę kierunku na diagonalny.
Jeśli znasz inny generator gradientów CSS, który Ci się podoba, daj nam znać.