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

Сегодня мы хотим поделиться с вами вдохновением! На этот раз давайте поговорим о разработке креативных и современных стилей для строчных анкоров (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.

Демо | Скачать исходный код