—»     —»   Вдохновение стилями строчных анкоров
  Раздел: CSS/Style Sheets   Нет комментариев  

Вдохновение стилями строчных анкоров



Вдохновение стилями строчных анкоров

Сегодня мы хотим поделиться с вами вдохновением! На этот раз давайте поговорим о разработке креативных и современных стилей для строчных анкоров (inline anchors), то есть, ссылок, которые находятся прямо в тексте. Эти анкоры зачастую немного ограничены, так как окружены текстом, и поэтому у нас, ввиду недостаточного пространства вокруг, нет возможности использовать любые стили. Однако все же существуют такие эффекты, которые мы можем применять к подобным ссылкам, чтобы хоть как-то привлечь к ним внимание.

Сегодня мы решили поделиться с вами вдохновением на создание стилей и эффектов при наведении, которые в большинстве своем основаны на трюках с псевдо-элементами, а также магии SVG (2 последних стиля).

Пожалуйста учтите, что эти примеры только для вдохновения, так что вам следует использовать самые свежие версии браузеров. Некоторые браузеры до сих пор не имеют поддержки переходов в псевдо-элементах.

К сожалению, даже Firefox делает что-то непонятное с текстом, если к нему применяются переходы (особенно при использовании scale). IE11 также не очень дружит с переносами элементов при помощи calc, так что, какие-то из эффектов будут генерироваться неверно.

Что же касается большинства стилей, то там используется обычный анкор и простые псевдо-элементы ::before и ::after. Некоторым анкорам также потребуется data-атрибу, а некоторые используют SVG.

Чтобы добиться желаемой очередности анкоров и их псевдо-элементов, нам нужно применить несколько основных стилей:

section {
position: relative;
z-index: 1; /* needed for setting pseudo-element z-index */
backface-visibility: hidden;
}

section a {
outline: none;
color: #404d5b;
text-decoration: none;
white-space: nowrap;
position: relative;
display: inline-block;
vertical-align: bottom;
}

section a::before,
section a::after {
pointer-events: none;
backface-visibility: hidden;
}

Установка анкора, который нам нужно оформить стилем, на inline-block, позволяет нам работать с ним как с блочным элементом, но при этом не выбивает его из потока текста.

Примером данного стиля является следующий трехмерный эффект переворота:

.link-flip a {
font-weight: 500;
perspective: 600px;
perspective-origin: 50% 100%;
transition: color 0.3s;
}

.link-flip a:hover,
.link-flip a:focus {
color: #e74c3c;
}

.link-flip a::before,
.link-flip a::after {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: -4px;
z-index: -1;
box-sizing: content-box;
padding: 0 4px;
content: '';
}

.link-flip a::before {
background-color: #fff;
transition: transform 0.2s;
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transform: rotateX(90deg);
transform-origin: 50% 100%;
}

.link-flip a:hover::before,
.link-flip a:focus::before {
transform: rotateX(0deg);
}

.link-flip a::after {
border-bottom: 2px solid #fff;
}

Сам анкор мы используем как перспективную оболочку и применяем 3d-вращение к псевдо-элементу ::before. Сначала он будет повернут на 90 градусов (поэтому будет невидимым), а когда мы наведем на него курсор мыши, он повернется обратно, и мы сможем его увидеть. Псевдо-элемент ::after используется для симулирования боковой части повернутого псевдо-элемента.

Надеемся, что вам понравились эти стили, и вы вдохновились на собственные проекты!

Копирайты: иконка в виде стрелки arrow_right.svg от P.J. Onori распространяется под лицензионным соглашением CC BY-NC 3.0 NL. Иконка ссылки из набора иконок Feather от Cole Bemis под лицензионным соглашением CC BY 3.0.

Демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 2236   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930