От создателя: не так давно я переработал личный сайт и добавил несколько увлекательных трюков с CSS. В последующих нескольких постах я поделюсь некими из их. 1-ый — это подчеркивание. В Вебе достаточно нередко можно узреть анимационные эффекты подчеркивания с внедрением псевдо-элементов и / либо границ.
Попытайтесь навести курсор на примеры в демонстрации ниже.
Они непревзойденно подступают для одиночных маленьких строк текста (к примеру, навигационных ссылок), но не для многострочного текста. Мы можем анимировать подчеркивание в многострочном тексте с внедрением линейных градиентов совместно с background-size и background-position.
Но этот подход имеет свои ограничения: он просит, чтоб текст был интегрированным элементом, потому он отлично работает, к примеру, для анкоров ссылок в абзаце текста. Но если для вас необходимо анимационное подчеркивание в элементе заголовка, для вас, возможно, придется поменять разметку, чтоб добавить span снутри элемента, что не постоянно может быть.
«Реальное» подчеркивание
С некими из новейших параметров text-decoration мы можем анимировать фактические подчеркивания — это намного лучше, чем просто дозволить нашим подчеркиваниям мигать и исчезать при наведении курсора. Анимировав реальное подчеркивание, мы можем сохранить комфортную функцию, которую дает нам большая часть браузеров, когда подчеркивание пропускает нижние элементы текста (по дефлоту для характеристики text-decoration-skip-ink). В самом ординарном примере мы можем воплотить эффект плавного возникновения. Мы не можем анимировать непрозрачность подчеркивания текста, но мы можем создать его из прозрачного до хотимого цвета. Поначалу мы устанавливаем свойство text-decoration-style равным underline. Тут я использую сокращение, text-decoration чтоб указать text-decoration-thickness и text-decoration-color сразу. Мы можем установить цвет на прозрачное значение. Потом при наведении мы можем перевести его в непрозрачное значение:
RPM – новый показатель доходности каналов на YouTube
CSS a { text-decoration: underline 0.15em rgba(0, 0, 0, 0); transition: text-decoration-color 300ms;
}
a:hover { text-decoration-color: rgba(0, 0, 0, 1);
}
| 12345678 | a { text-decoration: underline 0.15em rgba(0, 0, 0, 0); transition: text-decoration-color 300ms;} a:hover { text-decoration-color: rgba(0, 0, 0, 1);} |
Это лучше, чем по дефлоту, и достаточно просто. Наиболее того, мы можем перенести свойство text-underline-offset, которое является относительно новеньким, но обширно поддерживается браузерами. Ах так я использую его на собственном веб-сайте:
CSS a { text-decoration: underline 0.15em rgba(0, 0, 0, 1); text-underline-offset: 0.2em; transition: text-decoration-color 300ms, text-underline-offset 300ms;
}
a:hover { text-decoration-color: rgba(0, 0, 255, 1); text-underline-offset: 0.4em;
}
| 12345678910 | a { text-decoration: underline 0.15em rgba(0, 0, 0, 1); text-underline-offset: 0.2em; transition: text-decoration-color 300ms, text-underline-offset 300ms;} a:hover { text-decoration-color: rgba(0, 0, 255, 1); text-underline-offset: 0.4em;} |
Единицы измерения
В качестве примечания, мне нравится употреблять em для значений, поэтому что они относятся к размеру шрифта, а это значит, что если у нас есть текст различных размеров, подчеркивание будет пропорционально масштабироваться.
Поддержка браузерами
Вышесказанное непревзойденно работает … в Firefox. Сейчас никакие остальные браузеры не поддерживают переход либо анимацию для text-underline-offset. (То же самое относится к text-decoration-thickness, что также может добавить некие достойные внимания эффекты.) Но, к счастью, есть другой подход к анимации этих параметров…
Houdini торопится на помощь
Не вдаваясь в маленькие технические детали, CSS Houdini — это набор низкоуровневых API-интерфейсов, которые предоставляют разрабам доступ к частям движка CSS-рендеринга браузера. Это дозволяет нам зарегистрировать пользовательское свойство и анимировать его при помощи CSS. Ранее разрабам приходилось регистрировать свойство в Javascript, но сейчас может быть создать это на сто процентов при помощи CSS, используя @property.
Для наших целей мы можем зарегистрировать свойство с именованием —offset, которое будем употреблять для значения text-underline-offset.
CSS @property –offset { syntax: ‘’; inherits: false; initial-value: 0px;
}
| 12345 | @property –offset { syntax: ‘’; inherits: false; initial-value: 0px;} |
Принципиально установить изначальное значение, по другому ничего не получится. По некий причине ems не работает в качестве исходного значения, хотя я не понимаю, почему. Потом заместо перехода text-underline-offset мы переносим самонастраиваемое свойство:
CSS a { transition: –offset 300ms, text-decoration-color 300ms;
}
a:hover, a:focus { –offset: 0.4em; text-decoration-color: rgba(0, 0, 255, 1);
}
| 123456789 | a { transition: –offset 300ms, text-decoration-color 300ms;} a:hover,a:focus { –offset: 0.4em; text-decoration-color: rgba(0, 0, 255, 1);} |
Тестирование
К огорчению, перенос пользовательских параметров при помощи Houdini не поддерживается в Firefox либо Safari, потому мы возвращаемся к предшествующей дилемме, связанной с решением ограниченной поддержки браузеров! Но не волнуйтесь, мы можем воплотить кросс-браузерное решение!
Мы можем употреблять запрос функций, чтоб найти, поддерживает ли браузер Houdini (этот запрос относится к Paint API). Для браузеров, которые не поддерживают Houdini, мы заместо этого будем употреблять свойство text-underline-offset, которое, к счастью, работает в Firefox и Safari!
CSS @supports not (background: paint(something)) { a { transition: text-underline-offset 400ms, text-decoration-color 400ms;
}
a:hover, a:focus { text-underline-offset: 0.4em; }
}
| 12345678910 | @supports not (background: paint(something)) { a { transition: text-underline-offset 400ms, text-decoration-color 400ms; } a:hover, a:focus { text-underline-offset: 0.4em; }} |
Вот полное решение:
Создатель: Michelle Barker
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Yandex.Дзен
Источник
