Korzystając z narzędzi CSS i układu przeglądarki, możesz tworzyć niesamowite wizualizacje treści internetowych. Wykorzystanie funkcji internetowych, takich jak filtry CSS, WebGL, wideo HTML5, SVG, obiekty canvas i rozwijające się technologie, takie jak regiony CSS, kształty CSS i niestandardowe filtry CSS, może zapewnić olbrzymie możliwości tworzenia. Adobe od dawna współpracuje z twórcami treści, którzy pasjonują się układem i projektowaniem, dlatego aktywnie korzysta z tej wiedzy w internecie, przyczyniając się do rozwoju wielu zmieniających się standardów internetowych.
Z pomocą National Geographic wykorzystaliśmy treści z jego funkcji zatytułowanej „Forest Giant” do stworzenia prototypu modelu, który pokazuje, w jaki sposób te funkcje mogą zapewnić bogaty układ witryny i techniki responsywne. W tym artykule pokażemy, jak zbudowaliśmy kilka szczególnie interesujących cech witryny. Krótkie omówienie można znaleźć w tym filmie, w którym Christian Cantrell omawia różne funkcje serwisu.
subtelności układu strony,
To, co składa się na świetny układ i kryjące się za nim funkcje, może być nieco subtelne, dlatego stworzyliśmy „nakładkę redaktorską”, która podkreśla najciekawsze elementy. Aby włączyć oznaczenia edytora, kliknij pasek na dole artykułu.
Niezależny od układu
W dzisiejszych czasach układ treści w internecie jest często podyktowany treścią. Kontenery powiększają się w pionie, aby zmieścić tekst. W przypadku tworzenia złożonych układów zmiany w tekście lub innych treściach mogą mieć niepożądany wpływ na ogólny układ, co powoduje konieczność wprowadzania zmian w treści w związku z nieoczekiwanymi zmianami. Dzięki regionom możemy naprawdę oddzielić treść od układu, definiując dany element jako treść, a następnie określając części układu, przez które mają się wyświetlać.
W przykładzie „Forest Giant” historia jest zawarta w jednym elemencie. Następnie na całej stronie znajduje się rusztowanie układowe, które składa się ze zdjęć i obszarów tekstowych. W CSS definiujemy elementy, przez które mają przechodzić treści. Gdy kopia osiągnie koniec elementu, przechodzi do następnego elementu w kolejności DOM. Dzięki temu możemy dać upust swojej kreatywności przy dostosowywaniu kolumn i dostosowywaniu ich wysokości do projektu, bez obaw, że tekst zmieści się w elemencie lub go przekroczy. Dzięki temu możemy też umieszczać w projekcie elementy, takie jak obrazy o pełnej szerokości, dzięki czemu historia płynnie się przez niego przepływa.
#storyContent {
flow-into: story;
}
.story {
flow-from: story;
}
W powyższym kodzie CSS tworzymy przepływ nazwany o nazwie "story". Treść tego nazwanego przepływu to element o identyfikatorze "storyContent". Następnie przechodzi przez wszystkie elementy o nazwie klasy "story". Regiony CSS to doskonałe narzędzie do elastycznego projektowania stron, które umożliwia korzystanie z takich funkcji jak wielokolumnowy i przesunięcia kolumnowy, aby zapewnić bogaty układ na dużych ekranach i dostosowywać się do układu jednokolumnowego na mniejszych ekranach. W przypadku regionów możesz też ustawić rozmiar regionu za pomocą jednostek elastycznych, takich jak vw lub vh. Dzięki temu możesz mieć pewność, że kolumny nie przekroczą wysokości widocznego obszaru w układzie bez obaw o obcięcie treści, ponieważ będzie ona naturalnie wpadała do następnego elementu w łańcuchu regionów.
Nakładki ochronne
Wykluczenia usług porównywania cen pozwalają nam zawijać tekst dookoła lub w obrębie nieregularnych kształtów. Przydaje się to podczas tworzenia elementów dekoracyjnych, takich jak kapitaliki. Stosowanie wielkich liter to powszechnie stosowana metoda projektowania polegająca na powiększeniu pierwszej litery historii lub rozdziału, dzięki czemu reszta tekstu otacza się wokół konturu postaci. Ten efekt jest bardzo podobny do tego, jak wbudowana treść owija się wokół pływających elementów, jednak dzięki wykluczeniom nie jesteśmy już ograniczeni do prostokątnych pól. Używając kształtu na zewnątrz w przypadku elementu pływającego, możemy określić geometrię, która pozwala na ciasne zawijanie treści wokół kształtu postaci.
.drop-caps {
height: 100px;
width: 100px;
float: left;
shape-outside: ellipse(50%, 50%, 50%, 50%);
}
Spowoduje to utworzenie elipsy, dzięki której zawartość będzie otaczać okrągły kształt. Ponadto, że w przypadku kształtu korzystamy z jednostek względnych, zmiana rozmiaru elementu zostanie odzwierciedlona w jego wielkości.
Kształty
Oprócz możliwości dodawania wielkich liter, wykluczenia dają możliwość zawijania tekstu wokół kształtów za pomocą kształtów wewnątrz kształtów. Używamy tej funkcji w całej witrynie, zwłaszcza w przypadku dużych podpisów pod zdjęciami, i wykorzystywać negatywną przestrzeń do ramki tekstu na zdjęciach. Umożliwia nam to również owijanie tekstu wzdłuż konturu innych obrazów i grafik emulujących układy, które wcześniej były bardzo trudne do realizacji w internecie.
Kształty mogą też działać z układami elastycznymi, używając jednostek względnych do określania kształtu. W ten sposób możemy tworzyć kształty, które rozciągają się na podstawie kontenera lub widocznego obszaru, a nawet za pomocą zapytań o multimedia, aby całkowicie zmienić kształt lub go usunąć, ponieważ wszystko jest zdefiniowane w CSS. Poniżej znajduje się przykład jednego z kształtów wielokąta używanego w witrynie z wartościami definiującymi punkty:
.shape {
shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}
Zrównoważony tekst
Zrównoważony tekst to funkcja, która podczas zawijania wierszy analizuje cały blok tekstu w elemencie, a nie słowo po słowie. Pozwala to uniknąć sytuacji, w których możemy umieścić jedno lub dwa słowa w jednym wierszu przez podział wierszy tekstu w celu uzyskania równomiernej wielkości wierszy w elemencie. Taki poziom kontroli pozwala nam tworzyć atrakcyjne wizualnie bloki tekstu, zwłaszcza w przypadku krótkich tekstów, takich jak cytaty czy napisy.
Właśnie w tym miejscu w artykule zastosowaliśmy zrównoważony tekst. Ponieważ funkcja ta jest standardem proponowanym przez firmę Adobe, do osiągnięcia tych samych wyników używamy kodu polyfill opracowanego przez Randy'ego Edmundsa. Ta funkcja najlepiej sprawdza się w przypadkach, w których można reagować. Podczas zmiany rozmiaru przeglądarki zauważysz, że bryła nadal równoważy tekst, tworząc wiersze o mniej więcej tej samej szerokości. Korzystanie ze zrównoważonego kodu polyfill jest proste, ponieważ jest to wtyczka jQuery, wystarczy więc zastosować do selektora „balanceText()”, gdy zmieni się układ, co pozwoli uzyskać ładnie zrównoważony tekst, który wygląda tak:
$('.balance').balanceText();
Filtruj przejścia
Przejścia są ważnym sposobem na zwrócenie uwagi użytkownika i przekazanie informacji o stanie witryny. Dzięki funkcji przezroczystości (a ostatnio również transformacjom 3D) można ją stosować do tworzenia efektownych przejść i animacji, które pojawiają się podczas przewijania części witryny lub interakcji z nią. Dostępne są teraz filtry, których można używać w tym samym celu.
W grze „Forest Giant” stosujemy filtry, aby odcieniować niektóre obrazy od szarości do kolorów. Filtry te można łączyć z filtrami nieprzezroczystości lub innymi filtrami, aby uzyskać złożone efekty i przejścia. Dzięki niestandardowym filtrom możemy dodać jeszcze bardziej spektakularne efekty.
Filtry niestandardowe są pisane przy użyciu GLSL, czyli tego samego języka cieniowania co WebGL. Umożliwiają stosowanie tych narzędzi do cieniowania do elementów DOM za pomocą CSS, co umożliwia złożone efekty mieszania i zniekształcenia 3D. Gdy klikniesz „Zbadaj drzewo prezydenta” u dołu witryny, strona zwinie się i odkryje kolejną sekcję pod spodem. To tylko jeden z przykładów, jak filtry niestandardowe umożliwiają tworzenie bogatych przejść między treściami. Animację można uzyskać za pomocą przejść CSS. Jeśli jednak chcesz użyć bardziej solidnych animacji lub interakcji niż przejścia, możesz przekazać wartości do cieniowania, ustawiając styl za pomocą JavaScriptu, jak pokazano poniżej. Dzięki temu możesz mieć bardziej szczegółową kontrolę nad wygładzaniem, a nawet zezwolić na wprowadzanie danych przez użytkownika do sterowania cieniem.
function applyCurl(value) {
$("#map").css("webkitFilter",
"custom(url(page-curl.vs) mix(url(page-curl.fs) normal source-atop),"
+ " 50 50, transform perspective(1000) scale(1.0) rotateX(0deg) "
+ " rotateY(0deg) rotateZ(0deg), curlPosition "
+ value + " 0, curlDirection 104, curlRadius 0.2, bleedThrough 1.0)");
}
Aby zastosować efekt, nasz filtr stosuje rasteryzację treści jako teksturę na GPU. Z tego względu musimy usunąć go po zakończeniu tego procesu, w przeciwnym razie obraz może być niewyraźny.
$("#map").css("webkitFilter", "none");
Niestandardowe filtry CSS umożliwiają korzystanie z ciekawych efektów, takich jak zawijanie stron, które wygląda jak przewracanie strony w prawdziwej książce. Umożliwiają programiście stron internetowych programowanie złożonych efektów w języku GLSL i stosowanie ich w treściach internetowych. Więcej informacji o filtrach niestandardowych, tych wszystkich parametrach i sposobie ich używania znajdziesz w tym niesamowitym samouczku.
Renderowanie wstępne tekstur w WebGL
Klejnotem tego artykułu było pierwsze pełne zdjęcie „Prezydenta”, uznawanego za drugie co do wielkości drzewo na świecie pod względem objętości. To zdjęcie powstało przez połączenie setek zdjęć drzewa w celu utworzenia pełnego obrazu. Chcieliśmy zasymulować ten proces, dzieląc zdjęcie na kilka małych zdjęć, które latają na miejsce, aby stworzyć pełny obraz. Udało się to osiągnąć przy użyciu WebGL, a zwłaszcza biblioteki Three.js, która zawiera wyższe otoczenie interfejsu API związane z WebGL.
Renderowanie dużej liczby tekstur może szybko spowodować problemy z wydajnością za każdym razem, gdy nowa tekstura zostanie wyświetlona na ekranie. Nie wspominając o dodatkowych żądaniach sieciowych. Aby go ograniczyć, powiększyliśmy nasze tekstury i odsunęliśmy je dla każdego kafelka. Ta technika jest często nazywana mapowaniem sprite i jest powszechna podczas tworzenia gier. W ten sposób powstały trzy duże tekstury dla całego drzewa. Aby pozbyć się problemów związanych z wydajnością za każdym razem, gdy jedna z tekstur po raz pierwszy staje się widoczna na ekranie, przed rozpoczęciem animacji renderujemy kwadraty o długości 1 piksela z każdą teksturą, co powoduje przeniesienie działania związanego z wydajnością na początek. Dzięki temu możemy płynnie przelatywać i animować całą wysokość drzewa, nawet na tablecie.
Aby przesunąć tekstury, zmieniamy promienie UV, które mapują teksturę na geometrię. W przypadku Three.js wygląda to tak:
geometry.faceVertexUvs[0][0] = [
new THREE.Vector2(xOffset, yOffset + 1),
new THREE.Vector2(xOffset, yOffset),
new THREE.Vector2(xOffset + 1, yOffset),
new THREE.Vector2(xOffset + 1, yOffset + 1)
];
Jak widać, używamy zmiennej do odsunięcia tekstury x i y. Ten sam efekt można osiągnąć, stosując niestandardowy materiał do cieniowania GLSL, który równoważy narysowane współrzędne na geometrii.
Funkcje eksperymentalne
Niektóre funkcje w wersji demonstracyjnej są nadal w wersji eksperymentalnej, więc musisz wyświetlić artykuł w Chrome Canary i włączyć wszystkie flagi Chrome Canary wymienione na tej stronie.
Gdy zainstalujesz i prawidłowo skonfigurujesz Chrome Canary, zapoznaj się z wersją demonstracyjną. (Cały projekt jest dostępny na licencji open source i jest dostępny na GitHubie).
Podsumowanie
Badamy też, jak te funkcje można wykorzystać w kontekście aplikacji mobilnej, podobnie jak w przypadku e-booka. Możesz zobaczyć, jak pracujemy nad tym prototypem i jak wykorzystujemy różne paradygmaty interakcji i dotyku do prezentacji tych funkcji na tablecie.
W związku z tym, że układ przeglądarek internetowych stale się zmienia, zdajemy sobie sprawę z zapotrzebowania na podnoszenie wartości produkcji i jakości układu, do których w przeszłości byliśmy przyzwyczajeni do korzystania ze starszych treści do czytania. Dzięki takim funkcjom jak regiony usług porównywania cen, wykluczenia, wyważony tekst, filtry niestandardowe i WebGL twórcy treści nie muszą już wybierać między zasięgiem a jakością grafiki. „Forest Giant” to jasny znak, że sieć przyszłości będzie spełniać oba te warunki.