Подчёркивание текста кнопок при наведении в ЗЕРО блоке Тильды. Эффект кнопки Тильда Кнопка ЗЕРО блок
Подчёркивание текста кнопок при наведении в ЗЕРО блоке Тильды. Эффект кнопки Тильда Кнопка ЗЕРО блок.
Ссылка на код:
Подчёркивание-текста-кнопок-при-наведении-в-ЗЕРО-блоке-Программный-код-для-Тильды-p654816259
🏆 Мой СУПЕР-Курс по программированию в Тильде: Курс-ПРОГРАММИСТА-на-TILDA-от-Чайника-до-ПРОФИ-за-2-часа-p583848367
Партнёрская программа:
===================
Нередко на сайтах применяется эффект подчёркивание текста кнопок меню при наведении мыши.
Подчёркивание может пригодиться как снизу, так и сверху или перед текстом или за ним, а также оно может выползать слева направо, из центра или справа налево и иметь разный цвет, толщину и даже бордюр и скругления по углам или вообще выглядеть как картинка.
Чтобы реализовать в Тильде такое подчёркивание кнопки меню в ЗЕРО-блоке, можно воспользоваться SBS-анимацией. Так обычно и делают. Создают под каждым текстом шейп, которому назначают первым шагом нулевой масштаб, а при наведении на кнопку вторым шагом масштаб увеличивают до 100%. Неудобно это тем, что для каждой кнопки приходится создавать отдельный шейп и равнять все эти шейпы по длине текстов кнопок. Потом надо делать то же самое для других диапазонов дисплеев – как минимум для диапазона от 960 до 1200, потому что нередко этот диапазон также включает в себя устройства с мышью, где эффект по наведению должен ещё работать. Если же в процессе вёрстки приходится перетаскивать кнопки, то их надо очень внимательно таскать вместе с этими шейпами и следить, чтобы они не расползлись. Плюс ко всему, захламляется панель слоёв, в которой потом трудно разобраться какой шейп к какой кнопке относится.
В общем, кто это делал, тот понимает сколько уходит времени и как всё это чертовски неудобно.
А что если я Вам предложу создать всего лишь два шейпа, которые вообще никуда таскать не надо? Вы просто размещаете кнопки где требуется и не паритесь по поводу шейпов. Всё будет работать корректно на любых размерах дисплеев.
Это очень просто с моим новым программным кодом:
Создаём кнопку, назначаем ей CSS-класс «hoverdecor1». Клонируем сколько надо таких кнопок и всем пишем нужные тексты. Разумеется, на разных дисплеях они могут выглядеть по-разному.
Далее создаём шейп, который будет символизировать само подчёркивание. Отключаем ему LazyLoad и назначаем CSS-класс «hoverline1». По длине не паримся, потому что мой программный код сам будет растягивать это подчёркивание на нужную длину текста для разных кнопок. Нас интересует только высота (то есть, толщина линии) и стиль подчёркивания, поэтому задаём этому шейпу необходимую высоту, цвет, можно даже применять бордюры если надо и скругление по углам, а также можете туда загрузить картинку. Тащим этот шейп под текст любой кнопки, чтобы просто прикинуть как высоко он должен располагаться. Это может быть и над кнопкой и перед ней или за кнопкой и под ней. То же самое – расположение, толщину, цвет, бордюр и скругление – задаём ему для других дисплеев.
После этого создаём второй шейп, присваиваем ему класс «hovermargin1», равняем его по верхнему краю кнопки и по высоте делаем таким, чтобы он доставал до шейпа подчёркивания. В результате получается высота, равная расстоянию от верхнего края кнопки до шейпа подчёркивания. Программный код будет все подчёркивания выравнивать по этой высоте. Корректируем его для других дисплеев.
Эти два шейпа мой программный код скроет, поэтому в принципе вы их можете так и оставить или убрать с глаз долой.
После этого добавляем на страницу из раздела «Другое» блок T-123 HTML, жмём «Контент» и вставляем туда мой программный код. Публикуем страницу и видим что вне зависимости от расположения и длины текста кнопок, при наведении мыши они все подчёркиваются ровно по длине текста, и это корректно работает для разных размеров экрана.
При этом вы можете задавать стартовую анимацию кнопкам, чтобы при загрузке они выползали как надо. Подчёркивание будет работать. И также всё работает с резиновой вёрсткой.
Ключевые слова:
подчеркивание кнопки тильда
эффект кнопки тильда
подчеркивание меню тильда
эффект меню тильда
подчеркивание кнопки зеро
эффект кнопки зеро
подчеркивание меню зеро
эффект меню зеро
подчеркивание кнопки zero
эффект кнопки zero
подчеркивание меню zero
эффект меню zero
выделение меню тильда
эффект меню тильда
выделение меню зеро
эффект меню зеро
1 view
2117
674
3 months ago 00:25:56 1
🔥 Текст и типографика в Фигме: выравнивания, vertical trim Figma, список, абзацы. Фигма с нуля
3 months ago 00:00:38 1.1K
Подчеркивание текста Microsoft Word
4 months ago 00:02:33 5
Как добавить подчеркивание текста в Figma
5 months ago 00:10:55 40
Тени от деревьев в 3ds Max — уроки 3DHamster
5 months ago 00:05:57 80
Подчёркивание текста кнопок при наведении в ЗЕРО блоке Тильды. Эффект кнопки Тильда Кнопка ЗЕРО блок
6 months ago 00:03:29 7
Натали - О Боже, какой мужчина!
6 months ago 00:21:35 1
СЛОВА- ПАРОЛИ- КЛЮЧИ К ДОСТИЖЕНИЮ ЖЕЛАЕМОГО. КОД ПОДСОЗНАНИЯ.
6 months ago 00:00:22 51
От журналиста (ROMAN ROMANOV) Промежуточные итоги (много)национальной политики, программы (де)централизации власти и откровенного поощрения русофобии. Известная блогерша из Дагестана, Джамиля Оспатова, с огромной аудиторией около 1,4 миллиона подписчиков в нельзяграме, опубликовала видео, где гармонично сочетает элементы дагестанской и русской культуры в своем наряде, исполняя танец под музыку Татьяны Куртуковой “Матушка“ (Святая Русь), и добавила пост, подчеркивающий, что Дагестан и Россия - это Россия. Читаем обсуждение под публикацией. Оказывается, укрепление мысли о самоопределении национальных меньшинств, постоянное подчеркивание их важности и создание на искусственной основе новых народов, с “восстановлением языка“, развитием литературы на нём, выдумыванием национально-освободительных историй и прочее, может привести к увеличению сепаратистских настроений. Куда только смотрит Центр «Э» и прочие ответственные? Сегодня человека за слова “Дагестан – это Россия“ просто засмеют. Завтра – затравят, а послезавтра – затопчут.
7 months ago 00:01:01 1
Нравится -самое важное слово , выбор счастливой жизни человека
7 months ago 00:53:34 1
Как читать книги. Мои рекомендации
8 months ago 00:08:15 7
Создаём караоке прямо в браузере! Karaoke Video Studio
9 months ago 00:01:25 2
Как в Word подчеркнуть слово двумя чертами
9 months ago 00:10:22 1
HTML5 уроки для начинающих | #5 - Теги для работы с текстом
9 months ago 00:04:06 1
Ты обвела меня вокруг пальца (кавер) + видео и голос В. Цоя
9 months ago 00:38:47 1
Евг. Евтушенко читает Владимира Маяковского. Облако в штанах. Тетраптих
9 months ago 00:03:26 1
Как добавить текст с подчеркиванием в документ Word 📐📝