Loading...

Создаем изометрический эффект для текста в Tilda

Модификация может изменить текст для изометрической проекции с углом в 30 градусов, как в лежачем, так и в стоячем положении.
Время настройки: 3 минуты
Генератор кода
Видео инструкция
Инструкция
Вариант #1 «Текст лежит»

1. Добавляем свой текст в Зеро Блок и указываем класс к нему такой же как и в генераторе;

Что бы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираем из списка предпоследнюю строку "Add CSS Class Name", далее, справа в настройках указываем тот же класс что и в генераторе;

2. Настраиваем перспективу текста, по другому направление, ↙ Лево или ↘ Право

3. Нажимаем кнопку "Сгенерировать пример", смотрим, что получилось;

4. Копируем сгенерированный HTML код и вставляем его в Настройки сайта → Ещё → Пользовательские CSS-стили → Сохранить;

Вариант #2 «Текст стоит»

1. Добавляем свой текст в Зеро Блок и указываем класс к нему такой же как и в генераторе;

Что бы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираем из списка предпоследнюю строку "Add CSS Class Name", далее, справа в настройках указываем тот же класс что и в генераторе;

2. Настраиваем перспективу текста, по другому направление, ↙ Лево или ↘ Право

3. Добавляем объём к тексту и настраиваем глубину, цвет;

4. Настраиваем тень, положение по X и Y, Blur, цвет и прозрачность (Opacity)

Тень может использоваться когда в дизайне есть стенка за текстом, на которую текст может отбрасывать тень.

5. Нажимаем кнопку "Сгенерировать пример", смотрим, что получилось;

6. Копируем сгенерированный HTML код и вставляем его в Настройки сайта → Ещё → Пользовательские CSS-стили → Сохранить;

Вариант #3 «Текст отбрасывает тень»

1. Добавляем свой текст в Зеро Блок, устанавливаем ему выравнивание по Левой стороне и указываем класс к нему такой же как и в генераторе;

Что бы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираем из списка предпоследнюю строку "Add CSS Class Name", далее, справа в настройках указываем тот же класс что и в генераторе;

ВАЖНО: Перспектива текста автоматически стоит ↙ Лево, ↘ Право к сожалению реализовать нельзя;

2. Если нужно, добавляем цвет тени у текста, который у нас ложится в изометрическую плоскость, можно пропустить эту настройку;

3. Настраиваем цвет стоячего текста и объема;

4. ВАЖНО: В поле текст, дублируем вашу фразу, важно повторить регистры, если основной текст написан БОЛЬШИМИ буквами, то в поле пишем текст БОЛЬШИМИ, если в тексте есть только одна Заглавная, значит в поле пишем тоже с одной Заглавной.

5. С учетом того, что у текста может быть разный интервал (spacing) из-за этого нужно настроить координаты расположения текста.

ВАЖНО: Устанавливая координаты у нас в генераторе и то что отображается в сгенерированном примере, это может не совпадать с твоим текстом, потому что у твоего текста свой интервал (spacing)

6. Нажимаем кнопку "Сгенерировать пример", смотрим, что получилось;

7. Копируем сгенерированный HTML код и вставляем его в Настройки сайта → Ещё → Пользовательские CSS-стили → Сохранить;
Class элемента
Тип изометрии
Перспектива
Цвет тени у тени текста в Zero
Глубина текста
Цвет обьема
Положение Х (рх)
Положение Y (рх)
blur (px)
Цвет тени
Opacity
Цвет стоячего текста
Цвет объёма
Текст
Положение Х (рх)
Положение Y (рх)
Копировать код <!-- Создаем изометрический текст в Tilda -->
<!-- https://nolim.cc/isometric-text-tilda -->
<style> .clsh1 { position: relative; 
-webkit-transform:; -moz-transform:; -o-transform:; -ms-transform:; transform:;
-webkit-transform: skew(360deg,-26deg); -moz-transform: skew(360deg,-26deg); -o-transform: skew(360deg,-26deg); -ms-transform: skew(360deg,-26deg); transform: skew(360deg,-26deg);
text-shadow: #d6e4ff 0 0 3px;
text-shadow:
, 1px 1px 1px #a8c7ff
;
}
.clsh1 .tn-atom:after { content: "Нолим"; position: absolute; top: 15px; left: 25px; color: #0058ff; font-size: inherit; -webkit-transform: skew(-63deg) scale(1,.5); -moz-transform: skew(-63deg) scale(1,.5); -o-transform: skew(-63deg) scale(1,.5); -ms-transform: skew(-63deg) scale(1,.5); transform: skew(-63deg) scale(1,.5); text-shadow: -1px -1px 1px #aaa, -2px -2px 1px #999, -3px -3px 1px #888, -4px -4px 1px #777, -5px -5px 1px #666, -6px -6px 1px #555, -7px -7px 5px #888; }
</style>
Код доступен только тем, кто оплатил подписку
Подписка стоит 390р./мес.
Покупая подписку, ты получаешь доступ ко всем уникальным модификациям
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Подписка закончилась((
Нужно продлить, что бы получить доступ.
Так так так...
а этот генератор кода доступен только по подписке
Код доступен только тем, кто зарегистрирован
Зарегистрировавшись, ты получаешь доступ ко всем бесплатным модификациям
Made on
Tilda