Utwórz efekty kolażu w przeglądarce CSS

Sep 15, 2025

Jak

Jeśli kiedykolwiek życzyłeś, możesz odpowiedzieć efekty tradycyjnej Maker kolaż w Twoim Układy stron internetowych. , To jest samouczek dla Ciebie.

Samouczek projektowania stron internetowych będzie wyglądać na trzy właściwości CSS: maska , klip-ścieżka i kształt na zewnątrz . Nawet jeśli ich użyłeś, nie martw się. Pokażę przykłady, które pomogą Ci stworzyć efekty, które prawdopodobnie nie widziałeś na wielu stronach internetowych.

Szukasz innego rodzaju samouczka? Widzieć Jak zrobić kolaż zdjęć w Photoshopie . I za poręczne przewodniki, zobacz nasz wybór Kreator strony internetowej i hosting usługa.

18 najlepszych przykładów animacji CSS

Moją największą inspiracją w zakresie korzystania z wymienionych właściwości jest tradycyjne kolaże. Zastanawiałem się, czy można było utworzyć je w przeglądarce internetowej, bez korzystania z edytorów graficznych lub oprogramowania. Z magią CSS, jest całkowicie wykonalny! Kolejny bonus tworzenia ich z kodem jest skalowalny, animowany i interaktywny. Przed rozpoczęciem upewnij się, że masz następujące czynności:

Będziesz potrzebować:

Twoja ulubiona przeglądarka internetowa i narzędzia deweloperskie - polecam korzystanie z Google Chrome, ponieważ obsługuje wszystkie funkcje, których używam w tym samouczku
Edytor kodu.
Aktywa, takie jak obrazy lub pliki SVG - możesz pobrać te, które używamy w tym samouczku tutaj

Maski obrazy, które nakładają się na tekst

CSS masks example — Maski CSS umożliwiają tworzenie efektów specjalnych - jak umożliwić wyświetlanie pozycji na selektywnie i zniknąć, ponieważ użytkownik przewija się w górę iw dół (przestają ten obraz do jednego powyżej)

Maskowanie jest pierwszą cechą, którą chciałbym ci pokazać. Pomaga zbudować więcej kreatywnych kształtów i układów w sieci, mówiąc przeglądarkę, które elementy aktywów powinny być widoczne. Maskowanie można wykonać na trzy różne sposoby: za pomocą obrazu rastrowego (w formacie PNG z przezroczystymi częściami); Gradienty CSS; lub elementy SVG. Należy pamiętać, że w przeciwieństwie do typowego obrazu rastrowego, SVG można skalować lub przekształcić bez znacznej straty jakości.

Szczególnie podobny do maskowania jest jego zdolność do stosowania tych samych właściwości tło - Możemy zdefiniować pozycję maski, rozmiar i powtórzenie, na przykład, używając: maska-powtórz: bez powtórzeń i maska rozmiar: okładka .

Dzięki maskowaniu CSS możemy stworzyć bardziej wyrafinowane efekty w sieci. Jeden z nich można znaleźć w naszym przykładzie, gdzie części obrazu obejmują jakiś tekst; Gdy użytkownik przewija się w górę iw dół strony niektóre części tekstu są wyświetlane / ukryte. Daje to wrażenie, że tytuł strony znajduje się za górami. Aby utworzyć ten efekt, potrzebne są pewne sztuczki, a sprytna aplikacja masek CSS pomoże nam to osiągnąć.

Utwórzmy nagłówek z wybranym obrazem tła i dwoma nagłówkami wewnątrz. Jeden z nich będzie pierwszym (pierwszym poziomem pozycji).

 Header & GT;
        & lt; h3 & gt; jest to & lt; / h3 & gt;
        & LT; H1 & GT; moja przygoda & LT; / Span & GT; & LT; / H1 & GT;
& LT; / Header & GT;

Tekst pozycji będzie przechowywany w & lt; span & gt; etykietka. To nie jest powszechna rzecz, ale w tym przypadku stosujemy maskowanie do pozycji, a nie do kontenera.

 Nagłówek {
    Szerokość: 100vw;
    Wysokość: 80VH;
    Top: 0;
    Po lewej: Auto;
    Tło: URL (Zdjęcia (obrazy / landscape.jpg) Center Top No-Powtórz;
    Rozmiar tła: okładka;
}
h1 {
    maska: URL (../ obrazy / mask.svg # Masker);
    -Webkit-masce: URL (../ Obrazy / krajobraz-mask.png)
Center Top No-Powtórz;
    maska rozmiar: pokrywa;
    -Webkit-maska-rozmiar: okładka;
    Szerokość: 100vw;
    Wysokość: 80VH;
    Kolor: #FFF;
    Rozmiar czcionki: 100px;
    Pozycja: krewna;
}
H1 Span {
    Pozycja: Naprawiono;
    Wyświetlacz: blok inline;
    Tekst-Wyrównuj: Centrum;
    Czcionka: "Libre Baskerville", Serif;
    Szerokość: 100vw;
    Top: 80px;
    Styl czcionki: kursywą;
}

Wytnij obrazy za pomocą przycinania CSS

CSS clipping example — Ścieżki przycinające umożliwiają wycinanie obrazu roślinnego w tym przykładzie

Przeglądajmy kolejny przykład i dowiedz się więcej o przycinaniu CSS. Krótko mówiąc, wycinek określa, który obszar obrazu powinien być widoczny. Clipping jest podobny do krojenia papieru. Granica kształtu nazywa się ścieżką klipu: wszystko poza ścieżką zostanie ukryte, podczas gdy wszystko wewnątrz ścieżki będzie widoczne. Z ścieżką klipu można usunąć tło z obrazu, zamiast używać ciężkich plików PNG. W tym celu musimy już przygotować kształt do wycięcia.

Celem w tym ćwiczeniu jest przypięciem rośliny z obrazu, usuwając tło. Możemy skopiować kod SVG z naszego pliku i wkleić go do dokumentu HTML. Ścieżka klipu musi być umieszczona wewnątrz & lt; defs & gt; & lt; / defs & gt; Tagi.

 Svg & GT;
  & lt; defs & gt;
      & lt; clippath id = "clip-fabryka" & gt;
     & lt; ścieżka D = "M293.2524.8c0,3.3,0 ... [i więcej liczb]" & GT;
     & lt; / clippath & gt;
  & lt; / defs & gt;
& lt; / svg & gt;
& lt; div Class = "Roślina" & GT; & LT;

Później możemy łatwo odwołać ścieżkę zdefiniowaną w kodzie SVG, dodając URL. funkcjonować.

 .plant {
    Wysokość: 700px;
    Background-Image: URL (. "Zdjęcia / plant.jpg);
    Rozmiar tła: okładka;
    Pozycja: krewna;
    Powtórz tło: bez powtórzeń;
    -Webkit-klip-ścieżka: URL ("# Clip-fabryka");
    Clip-Path: URL ("# Clip-Plant");}

Myśl nieszablonowo

clipping in CSS example — Możesz użyć **kształt wewnątrz** i **kształt na zewnątrz** Aby stworzyć wszystkie rodzaje kształtów

Kto powiedział, że pojemniki tekstowe zawsze muszą być prostokątne? Zawartość może zostać przecięta na wszelkiego rodzaju różnych kształtach, stosując kształt na zewnątrz i kształt wewnątrz Właściwości, które umożliwiają owijanie treści wokół niestandardowych ścieżek w CSS.

Więc jak działa? Po prostu zastosuj kształt na zewnątrz na dany obraz lub pojemnik. Ważne jest, aby pamiętać, że pływak Nieruchomość i wymiary elementu - Wysokość lub szerokość - muszą być zdefiniowane, inaczej nie działa. Możesz użyć URL () funkcja, która umożliwia kształt na zewnątrz Właściwość do zdefiniowania kształtu elementu na podstawie ścieżki z pliku SVG.

 .a-litera {
    Background-Image: URL ('./ Obrazy / Gold-bg.jpg');
    Rozmiar tła: 1000px;
    -Webkit-mask-Image: URL ('./ Obrazy / a-letter2.svg ');
    -Webkit-maska-kompozyt: źródło;
    -Webkit-maska-powtarzanie: bez powtórzeń;
    -Webkit-maska-rozmiar: 300px;
    Szerokość: 100%;
    Wysokość: 60VH;
    Pozycja: krewna;
    Top: 0px;
    Mocowanie w tle: Naprawiono;
    Float: Left;
    Wyświetlacz: blok inline;
    Szerokość: 310px;
    Kształt marginesu: 23px;
    Kształtowany na zewnątrz: URL ('./ Obrazy / maska.svg');
}

The. kształt na zewnątrz Nieruchomość nie zmienia nic o elemencie innym niż jego obszar pływakowy. Oznacza to, że wszystkie granice i obrazy tła nie będą dostosować się do kształtu utworzonego na elemencie. To jest powód, dla którego musimy również zastosować maska Nieruchomość - wyciąć tło elementu, aby dopasować zdefiniowany kształt.

Ważna rzecz do zanotowania jest to, że kształt na zewnątrz Funkcja działa tylko z plikami z obsługą CORS. CORS oznacza współdzielenie zasobów Cross Origin.

W tym konkretnym przypadku najlepszym sposobem przeglądania jest użycie localhost, w przeciwnym razie nie zadziała, jeśli po prostu otworzysz go w przeglądarce.

Podczas eksperymentowania należy pamiętać, że nie wszystkie wspomniane funkcje są obsługiwane przez wszystkie przeglądarki, więc warto je sprawdzić tutaj . Najnowszy przykład nie działa w Firefox, Operze i IE, ale mam nadzieję, że wkrótce będzie dostępny dla wszystkich przeglądarek. A jeśli masz wiele dokumentów do przechowywania projektu, zachowaj je bezpiecznie magazyn w chmurze .

Czytaj więcej:

Zacznij od zmiennych czcionek w CSS
Kompleksowy przewodnik do korzystania z siatki CSS
Jak wypróbować nowe zasady CSS

Utwórz efekty kolażu w przeglądarce CSS

Będziesz potrzebować:

Maski obrazy, które nakładają się na tekst

Wytnij obrazy za pomocą przycinania CSS

Myśl nieszablonowo

Jak - Najpopularniejsze artykuły

Łatwe stwarzające techniki modeli 3D

Jak malować zamek ze SketchUp

Jak utworzyć robot papierowy

Wprowadzenie do właściwości niestandardowych CSS

Jak narysować refleksje metalowe

Jak tworzyć realistyczną tkaninę CG

Jak zrobić renderujące renderowanie samochodów sportowych

Utwórz ubrania 3d z realistycznymi fałdami i fałdami

Kategorie