Gradienty kołowe i eliptyczne CSS3 [Porady CSS3]
Dzisiaj będziemy kontynuować naszą dyskusję Gradienty CSS3. W poprzednim poście pokazaliśmy, jak tworzyć Gradienty liniowe. Tym razem pokryjemy ich krewnych, Gradienty okrągłe i eliptyczne.
Składnia gradientu
Gradient w CSS3 jest deklarowany przy użyciu zdjęcie w tle własność. To jest dla lepszej kompatybilności, gdy musimy również dodać kolor tła w jednym zestawie reguł, aby nie kolidowały ze sobą. Następnie, aby utworzyć gradient radialny, po prostu nazywamy to tym radial-gradient () funkcjonować. W funkcji należy uwzględnić cztery wartości, aby prawidłowo ustawić gradient.
Pierwsza wartość definiuje pozycja gradientu. Możemy użyć opisowego słowa kluczowego, takiego jak góra, dół, środek i lewo, albo możemy być bardziej konkretni jak, 50% 50% aby ustawić gradient w środku lub 0% 0% aby ustawić gradient na początek lewy górny.
Druga wartość definiuje kształt i rozmiar gradientu, istnieją dwa argumenty na kształt gradientów, najpierw elipsa który jest domyślny, a drugi jest okrąg.
I dla rozmiar gradientu, możemy wybrać jeden z następujących sześciu argumentów.
| Wartości | Opis |
|---|---|
najbliżej | Kształt gradientu spotyka się z bokiem pudełka najbliżej jego środka (dla okręgów) lub styka się z bokami pionowymi i poziomymi najbliższymi środka (dla elips). |
najbliższy róg | Kształt gradientu jest tak zwymiarowany, aby dokładnie odpowiadał najbliższemu narożnikowi pudełka od jego środka. |
najdalej | Podobny do najbliższej strony, z wyjątkiem tego, że kształt jest zwymiarowany tak, aby pasował do boku pudełka najdalej od jego środka (lub boków pionowych i poziomych). |
najdalszy róg | Kształt gradientu jest tak zwymiarowany, aby dokładnie odpowiadał najdalszemu narożnikowi pudełka od jego środka. |
zawierać | Synonim dla |
pokrywa | Synonim dla |
Źródło tabeli: Mozilla Developer Network.
Wreszcie trzeci i czwarty definiują kombinacja kolorów. Oto, w jaki sposób piszemy składnię, aby utworzyć Eliptyczny gradienty i tym razem użyjemy pokrywa dla rozmiaru gradientu, aby rozprzestrzenił się szeroko, przykrywając pojemnik;
ciało obraz-tła: gradient radialny (środek w centrum, pokrycie elipsy, # ffeda3, # ffc800);
Aby utworzyć Okólnik gradient możemy po prostu zrobić w ten sposób:
ciało obraz-tła: gradient radialny (środek centrum, pokrywa okręgu, # ffeda3, # ffc800);
Jak sama nazwa wskazuje, kształt gradientu będzie okręgiem.
Obsługa przeglądarki
Zwróć jednak uwagę, że wszystkie przeglądarki nadal zapewniają pełną obsługę tej funkcji, więc nadal potrzebują prefiksu dostawcy. Tak więc cała kompletna składnia będzie działać we wszystkich nowoczesnych przeglądarkach - IE10 +, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ i Opera 11+ - będzie wyglądać mniej więcej tak;
ciało obraz-tła: gradient radialny (środkowe dno, pokrycie elipsy, # ffeda3, # ffc800); background-image: -o-radial-gradient (środkowe dno, elipsa, # ffeda3, # ffc800); background-image: -ms-radial-gradient (środkowe dno, pokrywa elipsy, # ffeda3, # ffc800); background-image: -moz-radial-gradient (środkowe dno, pokrywa elipsy, # ffeda3, # ffc800); background-image: -webkit-radial-gradient (środkowe dno, pokrywa elipsy, # ffeda3, # ffc800);
Sprawdź wersję demonstracyjną lub pobierz źródło, aby bawić się z gradientami.
- Próbny
- Pobierz źródło
Ostatnie słowa
Tworzenie gradientu radialnego CSS3 nie jest tak trudne, jak myślisz, a zwłaszcza, gdy otrzymujesz pomoc od tych narzędzi do generowania kodu:
- Gradienty Colorzilla
- Gradientoo
Gradient radialny jest tylko jednym z typów gadżetów CSS3, będziemy kontynuować naszą dyskusję na ten temat w przyszłych postach, więc bądź na bieżąco z Hongkiat.com
