На одном экране
На всем сайте
Drew custom illustrations, and designed the whole thing
Big thanks to Adobe Illustrator, which allowed us to draw and perfect these beauties. These guys are real members of our team, by the way.
We put together desktop, tablet and mobile versions
Big thanks to Adobe Illustrator, which allowed us to draw and perfect these beauties. These guys are real members of our team, by the way.
1) В Zero блок добавляем shape с container: window, height 100%, width: 100% и вставляем в него нужное нам изображение. Так же, можно сразу поставить прозрачность 20-30%.

2) Добавляем код в блок Т123. Код 1 для эффекта на 1 экран, код 2 для эффекта на всю страницу.
В коде нужно дважды указать class нашего shape элемента.

Дальше в редакторе Zero блока настройте прозрачность шейпа, как вам нужно.
Чтобы изменить размер паттерна нужно в коде изменить (например, сделать точки меньше и плотнее), нужно в строке "background-size: auto !important;" заменить auto на 50px. Так ваш паттерн будет повторяться каждые 50 пикселей. Можно поставить любое нужное вам значение.
Можно применить как к отдельному экрану, так и ко всему сайту поверх всех элементов сайта. Как изображение используется gif с шумом, но его можно вполне заменить на любое другое изображение или gif с паттерном, к примеру как точки на заднем фоне в примере выше. Так-же, можно добавить несколько изображений.

Инструкция

Паттерн на весь экран

Код 1: для применения на один экран
<!-- Тильдошная код для повторяющегося паттерна -->
<!-- Код 1: для применения на один экран -->
<style>
.tn-elem__1260597101567609545323 .tn-atom {
    background-size: auto !important;
    background-repeat: repeat !important;
    pointer-events: none;
}
.tn-elem__1260597101567609545323 {
    pointer-events: none;
}
</style>
Код 2: для применения на всю страницу
<!-- Тильдошная код для повторяющегося паттерна -->
<!-- Код 2: для применения на всю страницу  -->
<style>
.tn-elem__1260849831567609629730 .tn-atom {
    background-size: auto !important;
    background-repeat: repeat !important;
    pointer-events: none;
}
.tn-elem__1260849831567609629730 {
    pointer-events: none;
    z-index: 99999999 !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
}
</style>
Есть вопросы?
comments powered by HyperComments
Вот что есть еще
Made on
Tilda