Gradienty liniowe CSS3 [Porady CSS3]
Gradient to świetny dodatek do funkcji kolorów w CSS3. Zamiast dodawać tylko jeden kolor, możemy teraz dodać wiele kombinacji kolorów w jednym bloku deklaracji bez polegania na obrazach, co może zmniejszyć żądanie HTTP w naszej witrynie, umożliwiając szybsze ładowanie witryny.
Jeśli grałeś z gradientami w CSS3, prawdopodobnie znasz dwie metody: gradient radialny i liniowy. Dzisiejszy post będzie o tym drugim.
Tworzenie gradientów
Jak mówi specyfikacja, gradienty w CSS3 to obraz, nie ma on żadnej specjalnej właściwości, jak inne dodawanie nowych funkcji, więc jest deklarowany przy użyciu zdjęcie w tle zamiast tego.
Jeśli spojrzymy na pełną składnię gradientu, wygląda to trochę przepełniony, co może prowadzić do zamieszania u niektórych osób.
div background-image: -webkit-linear-gradient (góra, # FF5A00 0%, # FFAE00 100%); background-image: -moz-linear-gradient (góra, # FF5A00 0%, # FFAE00 100%); background-image: -ms-linear-gradient (góra, # FF5A00 0%, # FFAE00 100%); background-image: -o-linear-gradient (góra, # FF5A00 0%, # FFAE00 100%); background-image: linear-gradient (góra, # FF5A00 0%, # FFAE00 100%);
Zajrzyjmy więc do każdej części składni po kolei, aby wszystko stało się jaśniejsze.
Po pierwsze, gradient liniowy jest deklarowany za pomocą gradient liniowy() funkcjonować. Funkcja ma trzy podstawowe wartości. Pierwsza wartość określa położenie początkowe gradientu. Możesz użyć opisowego słowa kluczowego, takiego jak Top aby rozpocząć gradient płynący z Top;
div background-image: linear-gradient (góra, # FF5A00, # FFAE00);
Powyższy fragment jest oficjalną wersją W3C do tworzenia gradientów. Jest to w rzeczywistości prostsze i całkiem zrozumiałe, a także stworzy następujący gradient.
Możesz także użyć Dolny zrobić odwrotnie, albo inaczej dobrze i lewo.
Możemy również stworzyć gradient gradientowy za pomocą stopień kąta jako gradientowa pozycja początkowa. Oto przykład:
div background-image: linear-gradient (45deg, # FF5A00, # FFAE00);
Powyższy fragment stworzy następujący gradient kolorów:
Druga wartość funkcji powie pierwszy kolor informacje i ich zatrzymać pozycję który jest podany w procentach. Pozycja stop jest w rzeczywistości opcjonalna; przeglądarka jest wystarczająco sprytna, aby określić właściwą pozycję, więc gdy nie określimy zatrzymania pierwszego koloru, przeglądarka przyjmie 0% jako domyślne.
Kolejną wartością jest drugi kolor połączenie. Działa tak jak poprzednia wartość, tylko jeśli jest to ostatni zastosowany kolor, a my nie podaliśmy zatrzymać pozycję, wartość 100% będzie traktowane jako domyślne. Spójrzmy teraz na poniższy przykład:
div background-image: linear-gradient (góra, # FF5A00 0%, # FFAE00 100%);
Powyższy fragment stworzy gradient jak to, co widzieliśmy wcześniej (bez różnicy), ale teraz określamy pozycję zatrzymania koloru;
Teraz zmieńmy zatrzymanie koloru, i tym razem określimy 50% dla pierwszego koloru i 51% dla drugiego koloru i zobaczmy, jak się to okaże;
div background-image: linear-gradient (góra, # FF5A00 50%, # FFAE00 51%);
Przezroczystość
Tworzenie przezroczystość w gradiencie jest również możliwe. Aby stworzyć efekt, musimy przetłumaczyć kolor klątwa w rgba tryb i obniż kanał alfa.
div background-image: linear-gradient (top, rgba (255,90,0,0,2), rgb (255,174,0,0,2));
Powyższy fragment obniży intensywność koloru o 20%, i gradient okaże się tak:
Wiele kolorów
Jeśli chcesz dodać więcej kolorów, po prostu dodaj kolory obok siebie za pomocą separatora przecinków i pozwól przeglądarce określić pozycję zatrzymania każdego koloru.
div background-image: linear-gradient (góra, czerwony, pomarańczowy, żółty, zielony, niebieski, indygo, fioletowy);
Powyższy fragment stworzy następującą tęczę.
Zgodność przeglądarki
Niestety, w czasie pisania tego tekstu wszystkie obecne przeglądarki muszą jeszcze obsługiwać standardową składnię. Nadal potrzebują prefiksu dostawcy (-webkit-, -moz-, -ms- i -o-). Dlatego cała składnia wygląda tak:
div background-image: -webkit-linear-gradient (góra, # FF5A00 0%, # FFAE00 100%); background-image: -moz-linear-gradient (góra, # FF5A00 0%, # FFAE00 100%); background-image: -ms-linear-gradient (góra, # FF5A00 0%, # FFAE00 100%); background-image: -o-linear-gradient (góra, # FF5A00 0%, # FFAE00 100%); background-image: linear-gradient (góra, # FF5A00 0%, # FFAE00 100%);
Z drugiej strony Internet Explorer, szczególnie wersja 9 i niższa, jest daleki od standardu. Gradient w IE9 a poniżej jest zadeklarowany za pomocą filtr, więc jeśli chcemy dodać gradient w tych przeglądarkach, musimy napisać coś takiego;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);
The filtr ma swoje ograniczenia: po pierwsze, nie pozwala na dodanie więcej niż trzech kolorów, a tworzenie efektu przezroczystości jest również nieco skomplikowane - nie pozwala rgba, ale IE filtr używa #ARGB;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
Oto narzędzie, które pomoże Ci dokonać konwersji rgba do #ARGB.
- Próbny
- Pobierz źródło
Szybsze pisanie składni
Jak widać powyżej, aby zachować zgodność gradientów między przeglądarkami, musimy dodać pięć kolejnych linii kodów, co jest nieefektywne.
Jest wiele sposobów, aby uprościć zadanie; takie jak użycie prefiksu, prefiksu, LESS lub Sass, aby pomóc w kompilacji kodów, ale przede wszystkim zalecamy użycie tego narzędzia, ColorZilla Gradient. To narzędzie po prostu wygeneruje wszystkie niezbędne kody, aby gradienty działały we wszystkich przeglądarkach.
Ostatnie słowa
Dzisiaj sporo dyskutowaliśmy na temat tworzenia gradientów, przyjrzeliśmy się każdej części składni, tworząc przezroczyste efekty i zachowując zgodność przeglądarki. W tym momencie mamy nadzieję, że już lepiej rozumiesz ten temat.
Nadal wiele rzeczy planujemy zbadać Gradienty CSS3 w naszych przyszłych postach, więc bądź na bieżąco z Hongkiat.com. Na koniec, dziękuję za przeczytanie tego posta, mamy nadzieję, że się podobało.
Dalsze czytanie
- Bullet Proof Cross Browser Tła RGBA - Lea Verou
- Obraz CSS3 - W3.org
- Kiedy mogę korzystać z gradientów CSS3 - CanIUse.com
