10 niesamowitych przykładów masek CSS, SVG i Canvas w akcji

Z maskami SVG można robić niesamowite rzeczy. Ta technika istnieje od lat, ale dopiero niedawno pojawiła się w głównym nurcie tworzenia stron internetowych.

Przeszukałem sieć, aby znaleźć poniższe dema niestandardowych masek przycinających i masek SVG/canvas. Te przykłady pokazują, jak daleko można przesuwać maski w sieci i ostatecznie, co mogą zaoferować deweloperom w przyszłości.

1. Maskowanie tekstu

Aby uzyskać czysty przykład maskowania tekstu w akcji, sprawdź powyższe pióro. Używa rzeczywistego tekstu strony w HTML, dzięki czemu możesz łatwo zmienić ten tekst, aby czytać, co chcesz.

Cała magia dzieje się w CSS z właściwościami takimi jak background-clip. Możesz je zastosować do prawie każdego tekstu na dowolnej stronie, ale nie będą wyświetlane, chyba że masz jasne tło.

Efekt powiększenia jest również tworzony wyłącznie w CSS, co czyni ten fragment kodu jeszcze bardziej imponującym.

2. Wielokąty maski wycięcia

Zauważ, że to pióro używa JavaScript do złożonych animacji, ale całe maskowanie jest obsługiwane przez element canvas. Jest to zaskakująco złożony pomysł, więc próba podążania za kodem będzie trudna.

Ale powyższy efekt maskowania wielokątów jest jednym z bardziej unikalnych projektów, jakie widziałem. Przyjmuje kształty zaprojektowane w CSS i używa JavaScript do tworzenia tych kształtów jako elementów strony do maskowania obrazu tła.

To uruchamia spójną animację i działa na elemencie Canvas opartym na JS, który zachowuje się jak kontener dla zawartości SVG/XML. Całkiem szalone rzeczy, ale fajnie jest zobaczyć, co potrafią maski!

3. Maskowanie obrazu

Ten wycięty i suchy przykład pokazuje, jak wygląda maska ​​obrazu CSS. Zobaczysz przed i po powyższej masce obrazu stworzonej przez Vincenta De Oliveira.

Zauważ, że rzeczywista czarna maska ​​z teksturą to tylko plik PNG. Ale jest nakładany dynamicznie na obraz w CSS, aby stworzyć zamaskowany efekt fotograficzny.

Możesz to zrobić z dowolną teksturą, o ile jest eksportowana z przezroczystością. Istnieje wiele szczegółów na temat właściwości maski i chociaż obsługuje ona pliki .svg, może być łatwiej zacząć od plików PNG.

4. Przycisk aktywuje

Myślałeś kiedyś o dostosowaniu efektów najechania przyciskiem? Cóż, ten fragment kodu udowadnia, że ​​możesz to zrobić przy odrobinie kreatywności i maskowaniu CSS.

Ponownie, cały kod działa na predefiniowanej masce obrazu, a każdy przycisk ma swój własny efekt maski. Najfajniejszą częścią jest animacja najechania, która nie tylko pokazuje maskę, ale raczej animuje ją w widoku.

Jest to z pewnością eksperymentalny fragment kodu, ale wygląda fenomenalnie w przeglądarkach WebKit i miejmy nadzieję, że ta technika stanie się podstawą za kilka lat.

5. Maska tekstowa SVG

Oto nieco inny przykład efektu maski tekstu stworzonego przez programistę Marco Barria.

Zamiast definiować niestandardowe obrazy SVG, kod faktycznie używa elementu SVG. Jest nadal zbudowany na zawartości zwykłego tekstu HTML, ale działa z dynamicznym filtrem SVG.

Jest to nieco bardziej techniczne, ale daje też znacznie większą kontrolę programiście. Zamiast bawić się programem Illustrator w celu tworzenia plików SVG, możesz kodować wbudowane pliki SVG bezpośrednio w dokumencie HTML.

6. Maska tekstowa na płótnie

W tym przykładzie płótna autorstwa Calvina Davisa zauważysz, że używa on surowego kodu HTML dla treści, ale samego tekstu nie można zaznaczyć.

Zamiast tego jest renderowany na stronie za pomocą elementu Canvas, który może abstrahować tekst poza DOM. To sprawia, że ​​zachowuje się bardziej jak obraz, więc zobaczysz ten efekt, gdy tekst maskuje się w tle, ale nie wygląda jak tekst.

Niektórym projektantom może się to nie podobać z powodu braku użyteczności, więc jeśli chcesz wybrać tekst, nie zawracałbym sobie głowy tą konfiguracją.

Ale to świetny przykład na to, jak daleko możesz posunąć typografię za pomocą kształtów płótna.

7. Animowany Gradient

Innym naprawdę fajnym efektem tekstowym jest animowany gradient stworzony przez programistę Svante Richtera.

Używa całego kodu SVG na stronie HTML, więc dynamicznie tworzy maski. Ta konfiguracja SVG działa, przejmując całą stronę i nadając jej tło gradientowe, a następnie maskując to tło tylko przez tekst.

Ponieważ gradient można animować za pomocą CSS, wydaje się, że tekst jest jedyną częścią animacji. Całkiem fajny efekt i warto rozważyć dodanie go do eksperymentalnej strony internetowej lub strony docelowej.

8. Animowana maska ​​przycinająca

Ta abstrakcyjna animacja maski przycinającej wykorzystuje generowane losowo bąbelki oparte na technologii JS w celu zamaskowania obrazu. Wykorzystuje element płótna wraz z animowanymi maskami przycinającymi połączonymi w spójną rzecz SVG.

Może się wydawać, że to niewiele, ale deweloper Neil McCallion napisał całkiem słodki kod, a ostateczny wynik jest zdecydowanie dziwny.

Maskowanie odbywa się głównie w elemencie canvas, ale jest kontrolowane przez JavaScript. To świetny sposób na połączenie dwóch obrazów z abstrakcyjną animacją SVG.

Ponownie, może to nie służyć wielu celom na rzeczywistej stronie internetowej, ale jest to fajny eksperyment do majsterkowania przy maskach.

9. Maska SVG BG

Z drugiej strony mamy efekt maskowania, który można uruchomić na prawie każdej stronie internetowej.

Wykorzystuje gradient tła wraz z nagłówkiem bohatera, aby stworzyć złożony efekt maskowania, który nadal idealnie się łączy.

Deweloperka Ryna Rudenko przesunęła kopertę tym piórem, używając surowego elementu płótna z większością efektów maskujących nałożonych na kod HTML.

Ta maska ​​jest nie tylko praktyczna i użyteczna w dużym nagłówku, ale także jest naprawdę dobrze wykonana i działa wyłącznie w HTML5 i CSS3. Doskonały przykład dobrze wykorzystanych nowoczesnych standardów internetowych.

10. Maski CSS i SVG

Ta kompletna galeria masek SVG naprawdę pokazuje, jak wiele można zrobić za pomocą czystego CSS.

To demo prezentujące kilka różnych technik maskowania, które wykorzystują to samo zdjęcie w różnych formatach. Dodatkowo każdy przykład zawiera przykładowe kody bezpośrednio na stronie, które możesz przetestować samodzielnie — chociaż równie łatwo jest skopiować kod z edytora CodePen.

Ale to małe pióro działa bardziej jak wprowadzenie do różnych efektów maskowania obrazu, które możesz zrobić. Świetne miejsce na rozpoczęcie, jeśli chcesz zagłębić się w SVG i maski za pomocą prostych wersji demonstracyjnych.