Створіть ефекти колажу в браузері з CSS

Jan 28, 2026

Як

Якщо ви коли-небудь хотіли, щоб ви могли відтворити ефекти традиційного колаж у вашому Макети веб-сайтів Це підручник для вас.

Підручник веб-дизайну подивиться на три властивості CSS: маска-зображення , кліп-шлях і зовнішній . Навіть якщо б ви їх використовували, не хвилюйтеся. Я покажу приклади, які допоможуть вам створювати ефекти, які ви, мабуть, не бачили на багатьох веб-сайтах.

Шукаєте інший тип підручника? Подивитися Як зробити фото колаж у Photoshop . І для зручних довідників, побачте наш вибір вершини Веб-будівельник і веб хостинг Сервіс.

18 кращих прикладів анімації CSS

Моє найбільше натхнення з точки зору використання зазначених властивостей - це традиційні колажі. Мені було цікаво, якщо можна було створити їх у веб-браузері, не використовуючи будь-які графічні редактори або програмне забезпечення. З магією CSS, це абсолютно Додатково! Інший бонус створення їх з кодом має їх масштабований, анімований та інтерактивний. Перш ніж почати, переконайтеся, що у вас є наступне:

Ви будете потребувати:

Ваш улюблений веб-браузер та інструменти розробника - я рекомендую використовувати Google Chrome, оскільки він підтримує всі функції, які я використовую у цьому підручнику
Редактор коду
Активи, такі як файли зображень або SVG - ви можете завантажити ті, що ми використовуємо в цьому підручнику тут

Маска зображень, які перекриваються текст

CSS masks example — Маски CSS дозволяють створювати спеціальні ефекти, як дозволяють заголовок сайту, щоб вибірково з'являтися та зникнути, оскільки користувач прокручує вгору та вниз сторінці (контрастувати це зображення на вище)

Маскування - це перша функція, яку я хотів би показати вам. Це допомагає створювати більш творчі форми та макети в Інтернеті, повідомляючи свій браузер, які елементи активів повинні бути видимими. Маскування може бути зроблено трьома різними способами: використання растрового зображення (тобто у форматі PNG з прозорими деталями); Градієнти CSS; або елементи SVG. Зверніть увагу, що на відміну від типового растрового зображення, SVG може бути масштабований або трансформований без значних втрат якості.

Що я особливо люблю маскування - це його здатність застосовувати ті ж властивості, що й для фон - Ми можемо визначити положення, розмір і повторення маски, наприклад, використання: Маска-повторення: без повторюваного і Маска-розмір: обкладинка .

Завдяки маскуванню CSS ми можемо створити більш складні ефекти в Інтернеті. Один з них можна знайти у нашому прикладі, де частини зображення покривають якийсь текст; Коли користувач прокручує вгору та вниз на сторінці кілька частин тексту відображаються / приховані. Це створює враження, що назва сторінки розташована за горами. Щоб створити цей ефект, потрібні деякі трюки, і розумне застосування масок CSS допоможе нам досягти цього.

Давайте створимо заголовок з вибраним фоновим зображенням та двома заголовками всередині. Одним з них буде первинний (перший рівень заголовків).

 & lt; заголовок & gt;
        & lt; h3 & gt; це & lt; / h3 & gt;
        & lt; h1 & gt; & lt; span & gt; мої пригоди & lt; / span & gt; & lt; / h1 & gt;
& lt; / заголовок & gt;

Текст заголовка буде зберігатися в & lt; span & gt; тег. Це не спільна річ, але в цьому випадку ми застосовуємо маскування, щоб заголовок, а не до контейнера.

 заголовок {
    Ширина: 100в.
    Висота: 80Вх;
    Верх: 0;
    ліворуч: Авто;
    Фон: URL (../ images / landscape.jpg) Центр верхнього не-повторення;
    Розмір фон: обкладинка;
}
h1 {
    Маска: URL (../ images / mask.svg # maskid);
    -Webkit-маска: URL (../ images / landscape-mask.png)
Центр верхнього не-повторення;
    Маска-розмір: обкладинка;
    -Webkit-mask-size: обкладинка;
    Ширина: 100в.
    Висота: 80Вх;
    Колір: #fff;
    шрифт: 100px;
    Позиція: відносна;
}
H1 Span {
    Позиція: фіксована;
    Дисплей: inline-block;
    Текст-вирівнювання: Центр;
    Шрифт-Сім'я: "Libre Baskerville", Serif;
    Ширина: 100в.
    Верх: 80px;
    стиль шрифту: курсив;
}

Вирізання зображень за допомогою CSS Clipping

CSS clipping example — Обрізні шляхи дозволяють вирізати зображення рослин у цьому прикладі

Давайте вивчимо ще один приклад і дізнайтеся більше про обрізання CSS. Коротше кажучи, обрізання визначає, яка область зображення повинна бути видимою. Обрізання схожа на подрібнення паперу. Границя форми називається Шляхом кліпу: що-небудь за межами шляху буде приховано, а що-небудь всередині шляху буде видно. За допомогою шляху кліпу ви можете видалити фон з вашого зображення, замість використання важких файлів PNG. Для цього нам потрібно вже підготнити форму для вирізаного.

Мета в цій фізичній справі полягає в тому, щоб закріпити посаду з зображення, видалення фону. Ми можемо скопіювати код SVG з нашого файлу та вставте його до документа HTML. Шлях кліпу повинен бути розміщений всередині & lt; defs & gt; & lt; / defs & gt; теги.

 & lt; svg & gt;
  & lt; defs & gt;
      & lt; clippath id = "clip-plant" & gt;
     & lt; шлях d = "m293.2.524.8c0,3.3,0 ... [та більше номерів]" & gt;
     & lt; / clippath & gt;
  & lt; / defs & gt;
& lt; / svg & gt;
& lt; div class = "завод" & gt; & lt; / div & gt;

Пізніше ми можемо легко посилатися на шлях, визначений у SVG-коді, додавши Url функція.

. Рослин {
    Висота: 700px;
    фонове зображення: URL (../ Зображення / plant.jpg);
    Розмір фон: обкладинка;
    Позиція: відносна;
    Фон-повторення: без повторюваного;
    -Webkit-Clip-Path: URL ("# Clip-Slant");
    Кліп-шлях: URL ("# Clip-Slant");}

Думати за межами коробки

clipping in CSS example — Ви можете використовувати **утворюючий** і **зовнішній** створити всі види фігур

Хто сказав, що текстові контейнери завжди повинні бути прямокутними? Вміст може бути розрізаний у всілякі різні форми, застосовуючи зовнішній і утворюючий Властивості, які дозволяють утворити вміст навколо користувацьких шляхів у CSS.

Отже, як це працює? Просто застосувати зовнішній до заданого плаваючого зображення або контейнера. Важливо відзначити, що плавати Власність та розміри елемента - або висота, або ширина - повинні бути визначені іншим чином, це не працює. Ви можете використовувати URL () функція, яка дозволяє зовнішній властивість, щоб визначити форму елемента на основі шляху від файлу SVG.

 .a-letter {
    фонове зображення: URL ('../ зображення / gold-bg.jpg');
    Фон-розмір: 1000px;
    -Webkit-Mask-Image: URL ("../ Зображення / A-Letter2.svg");
    -Мебкіт-маска-композитний: джерело;
    -Webkit-Mask-Repeet: No-Repeat;
    -Webkit-mask-size: 300px;
    Ширина: 100%;
    Висота: 60вх;
    Позиція: відносна;
    Верх: 0px;
    Фонове прикріплення: фіксований;
    поплавок: ліворуч;
    Дисплей: inline-block;
    Ширина: 310px;
    Форма-маржа: 23px;
    Форма зовні: URL ("../ Зображення / Mask.SVG");
}

Точний зовнішній Властивість нічого не змінює щодо елемента, крім його поплавкової зони. Це означає, що будь-які кордони та фонові зображення не будуть адаптуватися до форми, створеної на елементі. Ось чому ми також повинні застосовувати маска-зображення Майно - вирізати фон елемента, щоб відповідати визначеній формі.

Одне важливо відзначити, що зовнішній Функція працює лише з файлами, що дозволяються Cors. Cors виступає за спільне використання ресурсів Cross Origin.

У цьому конкретному випадку найкращим способом переглянути його є використання LocalHost, інакше він не буде працювати, якщо ви просто відкриєте його у своєму браузері.

При експерименті, будь ласка, майте на увазі, що не всі згадані функції підтримуються всіма браузерами, тому варто перевірити їх тут . Останній приклад не працює у Firefox, Opera та IE, але, сподіваюся, це буде доступно найближчим часом для всіх браузерів. І якщо у вас є багато документів для зберігання для вашого проекту, зберігайте їх у безпеці хмара зберігання .

Читати далі:

Початок роботи з змінними шрифтами в CSS
Комплексний довідник з використання CSS Grid
Як нові правила CSS спробувати зараз

Створіть ефекти колажу в браузері з CSS

Ви будете потребувати:

Маска зображень, які перекриваються текст

Вирізання зображень за допомогою CSS Clipping

Думати за межами коробки

Як - Найпопулярніші статті

Чи є ваша яблуко iCloud зберігання повна? Ось як звільнити місце

Створіть власний ботометр

4 кроки до використання змінних шрифтів

Створити перспективу в Adobe Illustrator

Як налаштувати тематику сайту з змінними CSS

5 способів підвищення вашого сайту SEO

Намалюйте оригінальну карту Таро

Як зробити гнучку стрічкову установку

Категорії