Dodawanie przezroczystości i gradientów za pomocą CSS
Sposób, w jaki zmieniasz kolor w swoich projektach internetowych, wkrótce się zmieni. Być może bawiłeś się heksadecymalnymi wartościami kolorów, odkąd byłeś małym dzieckiem; jeśli tak, przygotuj się, aby szybko dorosnąć. CSS3 przybył, a twoja paleta ma się znacznie powiększyć.
W porównaniu z tym, co nadchodzi, jest to możliwe, chociaż projektanci byli ślepi na kolory, pracując tylko z niewielką częścią spektrum chromatycznego. Nie, nowe odcienie nie zostaną dodane do tęczy.
Co się stanie, to, że wartości kolorów zostaną zdefiniowane w nowy sposób, całe spektrum poziomów krycia zostanie dodane, a gradienty oparte na czystym CSS, a nie na obrazach będą również wrzucane.
Niektóre przyszłościowe strony internetowe, takie jak imponujące 24 sposoby na zaimponowanie swoim znajomym , już bawią się z RGBa dla efektów kolorów tekstu i tła - a wyniki są świetne.
24ways.org używa nieprzezroczystości i RGBa do stworzenia fajnego projektu warstwowego.
Prawda o HEX
Pomimo tego, co niektórzy deweloperzy, z którymi ostatnio współpracowałem, mogą pomyśleć, RGB jest już w sieci od jakiegoś czasu. Wartości kolorów RGB są obsługiwane w każdej przeglądarce, więc nie są niczym nowym. Po prostu większość programistów (i projektantów) przyzwyczaiła się do definiowania kolorów w HEX i nie miała powodu do zmiany. Teraz to robią.
Systemy HEX i RGB mogą równie dobrze definiować miliony kolorów dostępnych na ekranie:
Wszystkie te ustawienia wartości kolorów dają taki sam wynik.
Mimo to wolę wypróbowywać kolory w RGB. Jestem człowiekiem z 10 palcami, więc wyobrażanie sobie kolorów, które używają wartości base-10, jest łatwiejsze niż wyobrażanie sobie tych, które używają szesnastu wartości bazowych. Jestem zabawny w ten sposób: mogę wymyślić kolor o wartościach od 0-255 lub 0-100% znacznie szybciej niż wartości z zakresu od 00-99 lub aa-ff.
HEX ma niewielką przewagę nad RGB: jest kompaktowy - jeszcze bardziej, jeśli używasz skrótu (trzy wartości zamiast sześciu). Jest to istotne tylko wtedy, gdy masz ścisłą zasadę optymalizacji kodu. Jedyną rzeczą, na której skrót HEX jest dobry, są kolory bezpieczne dla Internetu. Ale jeśli ograniczysz się do kolorów bezpiecznych dla WWW, nadszedł czas, aby przejść dalej.
Nowe i ulepszone RGB: teraz z Alphą!
Oto powód, by zacząć używać wartości RGB: mogą zawierać wartość alfa, aby utworzyć krycie. Dodanie wartości alfa do koloru RGB jest proste:
background-color: rgba(100%, 0, 0, 0.5)
lub:
background-color: rgba(255, 0, 0, 0.5)
Obie wartości dają czerwień o 50% nieprzezroczystości. Kiedy używasz RGBa, pamiętaj, aby określić rgba() jako wartość (uwaga a ), a następnie dodaj wartość alfa jako czwartą wartość oddzielaną przecinkami, w zakresie od 0 (przezroczyste) do 1.0 (nieprzezroczyste). Wartość 0 jest równoważna wartości transparent wartość koloru.
Wartości kolorów, od nieprzezroczystego do przezroczystego.
Dlaczego HEX nie może obsługiwać podobnej składni? Cóż, może tak, jak zobaczymy nieco później, ale W3C nie ma widocznych planów, aby dodać go do swoich specyfikacji kolorów. To może się zmienić, ale na razie RGB to przyszłość kolorów w Internecie.
Dopóki przeglądarka użytkownika obsługuje CSS3, możesz użyć wartości RGBa, aby uzyskać przezroczystość wszędzie tam, gdzie istnieje wartość koloru: w tekście, tła, obramowaniach, konturach, cieniach tekstu, cieniach skrzynek - w dowolnym miejscu.
Pozostaje tylko pytanie, co z przeglądarkami, które nie obsługują RGBa? Słyszę, że jedna przeglądarka, z której wciąż korzysta kilka osób (na przykład 70 do 75% społeczeństwa przeglądania) nadal nie obsługuje żadnego CSS3, w tym RGBa. Dlaczego, to byłby Internet Explorer!
Co robić z IE?
Jeśli przeglądarka napotka wartość, której nie rozumie, powinna ją zignorować i renderować inną wartość ustawioną dla tej właściwości. Poniższy CSS powinien obejmować IE i wszystkich innych:
color: rgb(255, 0 , 0);
color: rgba(255, 0, 0, .5);
Dopasowanie kolorów w IE, aby wyglądały bardziej jak przezroczyste kolory, jest możliwe. Na przykład, jeśli wiesz, że blok tekstu pojawi się na białym tle, możesz użyć wartości rgb(255, 127, 127) aby wyglądać na przezroczysty w 50%. Kiedy zmienia się tło, różnica stanie się jasna:
Różowa wartość symuluje wygląd 50% przezroczystej czerwieni. Ale gdy tylko umieścisz tekst na ciemnym tle, iluzja zostanie ujawniona.
Okay, to nie jest doskonałe rozwiązanie, ponieważ nie jest tak naprawdę przejrzyste. Nie mogę tego naprawić. Ale mogę podzielić się wskazówką, jak umieścić przezroczyste kolory w tle dowolnego elementu w dowolnej nowoczesnej przeglądarce internetowej.
Za kulisami, część 1: Przejrzyste kolory w twoich środowiskach
Niewielką zaletą Internet Explorera jest to, że zawiera on kilka "filtrów". Filtry IE nie są częścią standardowego języka CSS i nigdy nie będą, ale możemy je wykorzystać w ciekawy sposób, aby uzyskać wyniki podobne do niektórych funkcji CSS3. .
W przypadku jednego z tych filtrów specyficznych dla IE możemy dodać gradient do tła elementu i zawrzeć przezroczyste kolory za pomocą zapisu szesnastkowego. Pierwsza wartość w łańcuchu szesnastkowym dotyczy krycia koloru i wynosi od 00 (nieprzejrzysty) do ff (przezroczysty). Zapewnia to interesującą niewielką lukę, ponieważ ustawiając początkowe i końcowe wartości gradientu na ten sam kolor, możemy skutecznie dodać przezroczysty kolor tła:
/* For CSS3 */ background-color: rgba(255,0,0,.5);/* For lt IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(gradientype=0,startColorstr='#88ff0000', endColorstr='#88ff0000');/* For gte IE8 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(gradientype=0,startColorstr='#88ff0000', endColorstr='#88ff0000');
Musimy użyć filtra dwukrotnie: raz dla starszych wersji IE ( lt oznacza "mniej niż") i ponownie dla IE8 i później ( gte oznacza "większy lub równy"), które używają nowego -ms przedrostek, aby identyfikować się jako rozszerzenia Microsoft. Zapewnia to 50% przezroczystości tła dla zgodnych ze standardami przeglądarek i Internet Explorera powracającego do wersji 5.5.
Powinny wyglądać tak samo w większości przeglądarek. Zobacz przykład na żywo .
Za kulisami część 2: Gradienty w twoich środowiskach
Poczekaj minutę! Czy nie powiedziałem, że można dodać gradienty do tła w Internet Explorerze, używając filtru gradientowego? Rzeczywiście, zrobiłem. I czy nie możesz dodać gradientów do tła za pomocą CSS3? Cóż, w pewnym sensie. To, na co patrzymy, to rozwiązanie oparte na różnych przeglądarkach, które pozwoli nam dodawać gradienty w tle, korzystając tylko z CSS: bez grafiki, bez przezroczystego PNG, bez szykowania się w Photoshopie za każdym razem, gdy twój klient chce zrobić cień fioletowy nieco bardziej niebieski. Możesz to zrobić w Firefoksie 3.6, Safari 4 i Chrome 5.
Jeśli uważasz, że używanie gradientów nie byłoby łatwe, jest jedna drobna komplikacja, która, wierzcie lub nie, nie pochodzi z Internet Explorera. W3C dopiero niedawno rozpoczęło pracę nad składnią gradientową dla CSS i nie było jej prawie ukończone, ale zarówno Mozilla (Firefox), jak i Webkit (Safari) dodały już własne (sprzeczne) wersje specyficzne dla przeglądarki. Te "rozszerzenia" przeglądarki mają na celu popchnąć branżę do przodu poprzez dodanie pożądanych i niezbędnych funkcji przed sankcjonowanymi wersjami z W3C.
Nie wszystko jest stracone. Każda wersja ma swój własny przedrostek rozszerzenia przeglądarki, więc jeśli dodamy wszystkie składnie gradientu do naszego kodu, to wszystkie przeglądarki będą odtwarzać ładnie:
/* For WebKit */ background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,0,0,1)), to(rgba(0,0,255,.25)));/* For Mozilla */ background: -moz-linear-gradient(top, rgba(255,0,0,1), rgba(0,0,255,.25));/* For lt IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(gradientyype=0,
startColorstr='#88ff0000', endColorstr='#3300ff00');/* For gt IE8 */ -moz-filter: progid:DXImageTransform.Microsoft.gradient(gradientyype=0,
startColorstr='#88ff0000', endColorstr='#3300ff00');
Jest to pionowy gradient liniowy, który działa w IE 5.5+, Firefox 3.6+, Chrome 5+ i Safari 4. Zobacz przykład na żywo .
Tworzy to liniowy gradient pionowy w większości nowoczesnych przeglądarek. Wielkim wyjątkiem jest Opera; nie wprowadził on składni gradientowej, najprawdopodobniej dlatego, że jej twórcy czekają, aby zobaczyć, co robi W3C.
Aby umożliwić zmianę kierunku gradientu, Webkit definiuje narożniki początku i końca, Mozilla definiuje bok lub narożnik, gdzie gradient zaczyna, a IE po prostu definiuje 0 (pion) lub 1 (poziomo). Aby zmienić nachylenie o 90 °, kodujemy tak:
/* For WebKit */ background: -webkit-gradient(linear, left top, right top, from(rgba(255,0,0,1)), to(rgba(0,255,0,.25)));/* For Mozilla */ background: -moz-linear-gradient(left, rgba(255,0,0,1), rgba(0,255,0,.25));/* For lt IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(gradientyype=0,
startColorstr='#88ff0000', endColorstr='#3300ff00');/* For gt IE8 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(gradientyype=0,
startColorstr='#88ff0000', endColorstr='#3300ff00');
Oto poziomy gradient liniowy, który działa w IE, Firefox, Chrome i Safari. Zobacz przykład na żywo .
Zarówno Webkit, jak i Mozilla pozwalają na dużą różnorodność gradientów, w tym radialnych gradientów i wielu kolorów. Składnia może być dość złożona, ale na razie będziemy ją utrzymywać, ponieważ IE obsługuje tylko liniowe gradienty pionowe i poziome.
Dodaj trochę kolorów do swojego życia
Otwieranie przed nami to nic innego jak rewolucja w sposobie, w jaki traktujemy kolory w projektowaniu stron internetowych. Kamyki, których używamy teraz, aby uzyskać przezroczysty kolor, znikną. Zaczniemy dostrzegać o wiele więcej projektów elementów warstwy, opierając się na RGBa i już ustalonej właściwości nieprzezroczystości.
Dalsze czytanie
- Moduł kolorów CSS3
- Gradienty w Firefoksie
- Gradienty w pakiecie Webkit
- Gradienty w przeglądarce Internet Explorer
Jason Cranford Teague jest autorem, nauczycielem i projektantem. Jego następna książka, CSS3 Visual Quickstart Guide , wyjdzie jesienią. Dowiedz się więcej o Jasonie na swojej stronie internetowej, JasonSpeaking lub śledzić go na Twitterze ( @jasonspeaking ).