Тильдошная

2022-09-13 17:36:33 Переключатель смены фона с помощью step-by-step анимации

В этом видео показываем, как с помощью пошаговай и триггерной анимации в Zero Block можно реализовать тумблер со сменой цвета фона и текста.

Коротко по шагам:

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

• Создали шейп нужного цвета, который будет пропадать по триггеру, задали ему 100% ширины и высоты по виндоу, опустили шейп в слоях, чтобы было видно верхний текст, картинку.

• Из двух шейпов сделали «тумблер», шарик которого и будет основным триггером.

• Задаём шарику тумблера нужное движение сбс-анимацией по клику.

• Верхнему текстовому контейнеру и темному шейпу на весь экран задаем анимацию по триггеру, триггер в нашем случае как раз вот этот шарик тумблера.

Подробнее процесс и шаги смотрите на видео выше Открыть/Комментировать

2022-09-08 10:36:39 Чем может помочь дизайнеру нейросеть MidJourney?

Узнаем в новом видео Макса Ширко, в котором он нагенерирует уникальные картинки кроссовок.
А на их основе соберёт дизайн.



Открыть/Комментировать

2022-09-06 09:40:15 Вебинар «Дизайн сайта с Autoscale в прямом эфире»

На бесплатном мастер-классе 7 сентября увидите процесс дизайна и вёрстки с использованием автомасштабирования в прямом эфире.

Запишитесь, чтобы получить ссылку перед началом: https://tilda.link/webinar-live-autoscale

На вебинаре разберём:
— Как работает Autoscale в нулевом блоке.
— Что нужно учитывать при использовании автомасштабирования.
— Особенности работы с контентом сайта.

Мастер-класс проведёт Антон Командин, UX/UI-дизайнер и куратор курсов в Школе Тильды. Открыть/Комментировать

2022-09-05 16:00:54 Как распознать шрифт на сайте и на картинке?
Если вам понравился шрифт на сайте или баннере, его можно найти и использовать.

Расширения и сервисы для определения шрифта на сайте:

Fonts ninja

Typ.io

Type sample

CSS peeper (ремарка: расширение для тех, кто не любит лазить в коде страницы. Оно позволяет не только видеть названия установленных на сайт шрифтов, но и все цвета (их HEX можно скопировать) и картинки (их можно сохранить).


Поиск по картинке:

Идеального инструмента, чтобы определить шрифт по картинке онлайн, не существует. Если соблюдать несложные требования, то сервис выдаст похожий шрифт и чаще всего предложит аналоги и варианты для платного и бесплатного использования.
1. Буквы чёткие, а контур различимый.
2. Не нарушено расстояние между буквами, каждый символ отделён.
3. Изображение сохранено в формате jpeg или png.
4. Картинка не самого низкого качества и не мылит при увеличении.

WhatFontis

Font Identifier

FontSpring

En.likefont Открыть/Комментировать

2022-09-02 13:42:57 Кроссбраузерность.
Что это и как проверить.

Если сайт хорошо отображается в Chrome, то это не значит, что он будет также выглядеть, например, в firefox.

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

Именно поэтому, перед запуском сайта нужно проверять кроссбраузерность.
Согласитесь, когда сайт работает только для одной категории пользователей (тех, кто использует Chrome, например), то это не очень хорошо.


Как проверить кроссбраузерность сайта?

Существует много сервисов для проверки, вот некоторые из них:

Browser Sandbox – песочница позволяет тестировать сайт в разных версиях популярных браузеров (крайние релизы доступны бесплатно, а более ранние – после оплаты)

Browsershots – отображается сайт сразу с нескольких браузеров. Но ожидание ответа не самое быстрое

Sauce Labs – Огромная платформа для тестирования ресурсов на кроссбраузерность. Есть бесплатная пробная версия, но ключевые функции там заблокированы.

Browserstack – платный, но по отзывам делает максимально точную аналитику, также есть демо-версия Открыть/Комментировать

2022-08-30 11:16:51 Магия заголовков

Вышло интересное видео от Макса Ширко, где он создает первые экраны, а главная часть композиции — заголовки.





Макс показывает, как правильно и интересно подобранная типографика может выигрышно обыграть главный экран. Открыть/Комментировать

2022-08-26 19:17:44 И снова ANNEXX радует нас обновлениями.

Новый блок ANX825, ссылка для меню второго уровня.

Буквально за пару кликов у вас будет дополнительная ссылка для пунктов меню и текстовых zero-элементов, у которых есть ссылки на меню второго уровня.

Посмотреть видео и почитать подробнее про блок тут
https://t.me/annexx_team/86 Открыть/Комментировать

2022-08-20 10:05:41 День открытых дверей на курсе Tilda Pro в Школе Тильды.
Начало в 16:00, прямой эфир.

Сегодня пройдет вступительный эфир для студентов нового потока курса Tilda Pro. Вы тоже можете присоединиться эфиру и задать свои вопросы преподавателям курса.

Tilda Pro — это продвинутый курс по Тильде для опытных. Упор идет на UI/UX дизайн, Zero Block, анимацию. Подробнее о курсе

Чтобы записаться на день открытых дверей, перейдите по ссылке в бот и нажмите «Начать»

Записаться Открыть/Комментировать

2022-08-12 17:05:11 Плагины и виджеты для Figma

Виджеты:

Activity Tracker
Виджет-трекер рабочего времени.

Notion ticket
Простой виджет для добавления тикетов со ссылками на Notion.

lil todo
Если хочется держать задачи под рукой

Плагины:

Geometric
Помогает создавать геометрические шейпы и линии

Ruri – Splines
Плагин для создания сплайнов

Physics animation
Помогает создавать не сложную двухмерную анимацию. Можно экспортировать в GIF и SVG, есть 7 дней триала

PhotoRoom Background Remover
Очередной плагин, который умеет удалять фон с изображений

Marka Email Generator
Конструктор имейл-писем в плагине фигма. Открыть/Комментировать

2022-08-08 14:07:03 Как сделать эффект маски с видеофоном

Создать маску можно в фигме.
В примере на видео мы создаем 3 объекта: первый – обычный салатовый шейп, второй и третий объекты – текст и прямоугольник поверх салатного шейпа.
Объединяем их с помощью «Substract selection». Экспортируем.

В зеро-блоке добавляем видео нужным нам способом и выставляем позиционирование по window-контейнеру, поставив его в процентах 100-110% по x и у. Также ставим 100% и нашему контейнеру.

Загружаем маску в шейп, выставляем позиционирование по window-контейнеру, поставив его в процентах. Центрируем, опубликовываем, радуемся.

Чтобы еще больше ускорить и облегчить процесс, в ANNEXX есть блок ANX817. Буквально в пару кликов вы можете создать маску любого вида и формы, настроить адаптив, настроить анимацию (например, можно увеличивать маску при наведении или воспроизводить видео). В том числе эта штука работает с Конструктором видео (ANX011) — Видеоинструкция Открыть/Комментировать