Ниже приведены примеры базовых настроек в Zero block.
Они касаются настройки высоты экрана, масштабирования элементов внутри колоночной разметки, настройки градиентов и отображения фонового изображения.
Они касаются настройки высоты экрана, масштабирования элементов внутри колоночной разметки, настройки градиентов и отображения фонового изображения.
Настройка отображения элементов
У кого-то при работе с конвертером, рекомендованном тильдой может возникнуть ошибка. Если у вас не получается скачать сконвертированный шрифт, попробуйте воспользоваться аналогами:
У кого-то при работе с конвертером, рекомендованном тильдой может возникнуть ошибка. Если у вас не получается скачать сконвертированный шрифт, попробуйте воспользоваться аналогами:
Выравнивание относительно друг друга и относительно экрана
Параметры выравнивания элементов
.
.
.
Эффект появления вверх
Элемента растягивается на 100% процентов от ширины экрана монитора
Элемент растягивается на 100% процентов от ширины grid контейнера
Элемент имеет фиксированные размеры
и располагается внутри grid контейнера
и располагается внутри grid контейнера
.
Этот текст расположен внутри window-контейнера — поэтому он ушел за границу экрана
.
Этот текст расположен внутри grid-контейнера — он будет всегда виден на экране
Этот текст вышел за границу экрана на 52 px.
Размещайте внутри window-контейнера только элементы фона и декора
Размещайте внутри window-контейнера только элементы фона и декора
Этот текст располагается на расстоянии 20 px от левого края котейнера и 38 px от верха контейнера.
Размещайте все значимые элементы внутри grid-контейнеров
Размещайте все значимые элементы внутри grid-контейнеров
.
Эффект появления вверх
Эффект появления вверх
Иерархия слоев определяет, какой элемент находится вверху
(если панель слоев скрыта — включите ее сочетанием ctrl+L)
(если панель слоев скрыта — включите ее сочетанием ctrl+L)
Эффект появления вверх
Эффект появления вверх
Каждый создаваемый элемент имеет большое количество настроек.
Набор эффектов для объекта
«Видимость» элемента для клика
Перемещение в иерархии панели Layers
Поворот элемента относительно его центра
Прозрачность элемента
Настройка тени у объектов
Настройки обводки объекта: цвет, толщина, стиль обводки
Почти на любой объект можно прикрепить ссылку
Цвет элемента
.
.
.
Эффект появления вверх
Эффект появления вверх
Примеры настройки эффектов отображения объектов
.
.
.
Эффект появления вверх
Эффект появления вверх
Примеры настройки эффектов отображения объектов
.
Эффект появления вверх
Эффект появления вверх
В этом примере в шейп загружено фото. Поскольку в настройках у шейпа выставлена прозрачность 50% — этот же эффект был применен и к фото
Общие настройки отображения элементов на Экране (высота экрана, фоновое изображение, масштаб, базовая анимация)
У кого-то при работе с конвертером, рекомендованном тильдой может возникнуть ошибка. Если у вас не получается скачать сконвертированный шрифт, попробуйте воспользоваться аналогами:
У кого-то при работе с конвертером, рекомендованном тильдой может возникнуть ошибка. Если у вас не получается скачать сконвертированный шрифт, попробуйте воспользоваться аналогами:
Задать вопрос
Купить билет
Событие для профессионалов
6 апреля
Конференц-холл «Green Plaza»
Фиксированная высота экрана
Задать вопрос
Купить билет
Событие для профессионалов
6 апреля
Конференц-холл «Green Plaza»
Для загрузки фоновой картинки используйте BACKGROUND IMAGE
Задать вопрос
Купить билет
Событие для профессионалов
6 апреля
Конференц-холл «Green Plaza»
Масштабируемая высота экрана
Задать вопрос
Купить билет
Событие для профессионалов
6 апреля
Конференц-холл «Green Plaza»
Масштабируемый размер элементов на экране
Задать вопрос
Купить билет
Событие для профессионалов
6 апреля
Конференц-холл «Green Plaza»
Параметр фонового изображения: фиксированное по экрану или по скролу
Кнопка загрузки изображения внутрь Window container
Задать вопрос
Купить билет
Событие для профессионалов
6 апреля
Конференц-холл «Green Plaza»
Настройка элементов выходящих за границу блока
Кликните на цвет, чтобы задать градиентную заливку шейпа
Меню эффектов
Интенсивность эффекта
Эффект появления вверх
Эффект паралакса от движения мышью
Задать вопрос
Купить билет
Конференц-холл «Green Plaza»
Событие для профессионалов
6 апреля
Параметры элементов внутри блока
Добавлен полупрозрачный градиентный шейп (цвета #0054c2 и #f20400), с пропорциями 80х90% от размера Grid Container, с границей в 2 px, закруглением на 20 px,
и эффектом размытия заднего фона и эффектом базовой анимации (появление вверх и паралоксом
при движении мышью)
Добавлен полупрозрачный градиентный шейп (цвета #0054c2 и #f20400), с пропорциями 80х90% от размера Grid Container, с границей в 2 px, закруглением на 20 px,
и эффектом размытия заднего фона и эффектом базовой анимации (появление вверх и паралоксом
при движении мышью)
