Создайте эффекты коллажа в браузере с CSS

Sep 12, 2025

Инструкции

Если вы когда-либо хотели, вы могли бы реплицировать эффекты традиционного Коллаж Maker в твоей Макеты сайта Это учебник для вас.

Учебник веб-дизайна будет смотреть на три свойства CSS: маска - изображение , Клип-путь и в форме Отказ Даже если вы использовали их, не волнуйтесь. Я покажу примеры, которые помогут вам создать эффекты, которые вы, вероятно, не видели на многих веб-сайтах.

Ищете другой тип учебника? Видеть Как сделать фото коллаж в фотошопе Отказ И для удобных гидов см. Наш выбор верхней части Строитель сайта и веб хостинг служба.

Примеры анимации Hop CSS

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

Тебе понадобится:

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

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

CSS masks example — Masks CSS позволяют создавать специальные эффекты - вроде бы, чтобы включить заголовок сайта к выборовочному появлению и исчезнуть, когда пользователь прокручивается вверх и вниз по странице (контрастирует это изображение на один выше)

Маскировка - это первая особенность, которую я хотел бы показать вам. Это помогает построить более творческие формы и макеты в Интернете, сообщая вашему браузеру, какие элементы актива должны быть видны. Маскировка может быть сделана тремя разными способами: использование растрового изображения (то есть в формате PNG с прозрачными частями); Градиенты CSS; или элементы SVG. Обратите внимание, что в отличие от типичного растрового изображения, SVG может быть масштабирован или преобразован без значительных потерь в качестве.

То, что я особенно люблю к маскировке, - это его способность применять те же свойства, что и для фон - Мы можем определить положение маски, размер и повторение, например, использование: Маска-повторение: нет-повтора и Маска-размер: крышка Отказ

Благодаря маскировке CSS мы можем создать более сложные эффекты в Интернете. Один из них можно найти в нашем примере, где части изображения охватывают некоторые текст; Когда пользователь прокручивается вверх и вниз по странице, некоторые порции текста отображаются / скрыты. Это создает впечатление, что название страницы находится за горами. Чтобы создать этот эффект, необходимы некоторые трюки, и умное применение масок CSS поможет нам достичь этого.

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

 & lt; header & gt;
        & lt; h3 & gt; это & lt; / h3 & gt;
        & lt; ht & gt; Мое приключение & lt; / span & gt & gt;
& lt; / header & gt;

Текст заголовка будет храниться в & lt; span & gt; тег. Это не общее дело, но, в этом случае, мы применяем маскировку к направлению, а не к контейнеру.

 Заголовок {
    Ширина: 100 Вт;
    Высота: 80VH;
    Вершина: 0;
    Слева: авто;
    Фон: URL (.. Images / landscape.jpg) Центр топ Нет-повтора;
    Фон-размер: крышка;
}
h1 {
    Маска: URL (..../ Изображения / mask.svg # maskid);
    -Webkit-mask: URL (..../ Изображения / Landscape-mask.png)
Центр топ без повтора;
    Маска-размер: крышка;
    -webkit-mask-size: крышка;
    Ширина: 100 Вт;
    Высота: 80VH;
    Цвет: #fff;
    Размер шрифта: 100px;
    Должность: родственник;
}
H1 SPAN {
    Положение: исправлено;
    Дисплей: встроенный блок;
    текстовый выровнян: центр;
    Font-Samea: «Libre Baskerville», Serif;
    Ширина: 100 Вт;
    Топ: 80px;
    Стиль шрифта: курсивом;
}

Вырезать изображения с использованием клиппирования CSS

CSS clipping example — Обтравочные пути позволяют вырезать изображение растения в этом примере

Давайте исследуем другой пример и узнайте больше о CSS Creaking. Короче говоря, обрезка определяет, какая область изображения должна быть видна. Отсечение похоже на разделочные части бумаги. Граница формы называется путь клипов: что-либо за пределами пути будет скрыт, а что-то внутри пути будет видимым. С помощью пути клипов вы можете удалить фон с вашего изображения, а не использовать Heavy Png Files. Для этого нам нужно уже подготовить форму для вырезанного.

Цель в этом упражнении состоит в том, чтобы закрепить завод из изображения, удаляя фон. Мы можем скопировать код SVG из нашего файла и вставьте его в документ HTML. Путь клипа должен быть размещен в & lt; defs & gt; & lt; / defs & gt; Теги.

 & lt; svg & gt;
  & lt; defs & gt;
      & lt; clipphath id = "Clip-Setting" & gt;
     & lt; путь d = "M293.2 524,8c0,3.3,0 ... [и больше чисел]" & gt;
     & lt; / clipphat & gt;
  & lt; / defs & gt;
& lt; / svg & gt;
& lt; div class = "завод" & gt;

Позже мы можем легко ссылаться на путь, определенный в коде SVG, добавив Урл функция.

 .Plant {
    Высота: 700 пикселей;
    Фоновое изображение: URL (.. Images / stort.jpg);
    Фон-размер: крышка;
    Должность: родственник;
    Фон-повторение: нет-повтора;
    -Webkit-Clip-Path: URL («# Clip-Setting»);
    Клип-путь: URL ("# CLIP-STORT");}

Думать за пределами коробки

clipping in CSS example — Вы можете использовать **Форма внутри** и **в форме** создать все виды форм

Кто сказал, что текстовые контейнеры всегда должны быть прямоугольными? Содержание может быть разрезано во всевозможные разные формы, применяя в форме и Форма внутри Свойства, которые позволяют вам обернуть свой контент вокруг пользовательских путей в CSS.

Итак, как это работает? Просто подать заявку в форме до данного плавала изображения или контейнера. Важно отметить, что плавать Свойство и размеры элемента - либо высота, либо ширина - должны быть определены, иначе она не работает. Вы можете использовать URL () Функция, которая позволяет в форме Свойство для определения формы элемента на основе пути от файла SVG.

 .A-буква {
    Фоновое изображение: URL ('.. Images / gold-bg.jpg');
    Фон-размер: 1000px;
    -webkit-mask-изображение: URL ('..// Изображения / a-letter2.svg');
    -Webkit-mask-композит: источник;
    -Webkit-Mask-Repeat: No-Repeat;
    -webkit-mask-size: 300px;
    Ширина: 100%;
    Высота: 60Вх;
    Должность: родственник;
    Топ: 0PX;
    Фоновое крепление: фиксированное;
    плыть налево;
    Дисплей: встроенный блок;
    Ширина: 310px;
    Form-Margin: 23px;
    Форма - снаружи: URL ('.. Images / mask.svg');
}

То в форме Собственность ничего не меняет о элементе, кроме его области поплавка. Это означает, что любые границы и фоновые изображения не адаптируются к форме, созданной на элементе. Это причина, по которой нам также нужно применять маска - изображение Собственность - вырезать фон элемента, чтобы соответствовать определенной форме.

Одно важное, что следует отметить, что в форме Функция работает только с файлами с поддержкой CORS. CORS означает общий ресурс по пересечению происхождения.

В этом конкретном случае лучший способ просмотра - использовать localhost, в противном случае он не будет работать, если вы просто откроете его в вашем браузере.

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

Прочитайте больше:

Начните с вариабельных шрифтов в CSS
Комплексное руководство по использованию CSS Grid
Как новые правила CSS пытаются сейчас

Создайте эффекты коллажа в браузере с CSS

Тебе понадобится:

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

Вырезать изображения с использованием клиппирования CSS

Думать за пределами коробки

Инструкции - Самые популярные статьи

Учебник Adobe Fresco: создать портрет в приложении по живописи

Создание местности в Houdini 17

Начните с активами в аффинном дизайнере

Как использовать умные слои в Photoshop

Как сделать свои собственные доски Canvas

Создание живописных эффектов в Photoshop CC

Создание интерактивных диаграмм в Ionic 2

10 лучших учебников Houdini

Категории