Несколько полезных CSS-трюков для Front-end разработчиков
Хотим поделиться с вами несколькими CSS трюками, которые вам точно пригодятся при создании сайтов. Они позволят вам без использования Javascript создать анимацию и эффекты.
Анимированные ссылки
Создание эффектов наведения ссылок CSS может добавить немного изюминки на скучную веб-страницу. Если вы когда-либо оказывались в тупике, пытаясь создать эффект плавного наведения, у меня есть шесть CSS-эффектов, которые вы можете взять и использовать для своего следующего проекта.
1. Эффект наведения на ссылку скользящей подсветкой
Этот эффект накладывает тень прямоугольника на встроенную ссылку, изменяя цвет текста ссылки в процессе. Мы начинаем с отступов вокруг ссылки, затем добавляем отрицательное поле с тем же значением, чтобы отступы не нарушали текстовый поток.
Мы будем использовать box-shadow вместо свойства background, поскольку оно позволяет нам переходить.
HTML
<a href="#">Наведите на ссылку</a>a {
box-shadow:
inset 0 0 0 0 #54b3d6;
color: #54b3d6;
margin: 0 -.25rem;
padding: 0 .25rem;
transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
box-shadow: inset 100px 0 0 0 #54b3d6;
color: white;
}
ДЕМО
Наведите на ссылку
2. Эффект наведения на текстовую ссылку
Вот забавный вариант, в котором мы меняем текст ссылки на какой-либо другой текст при наведении курсора мыши. Наведите курсор на текст, и связанный текст выскользнет, когда появится новый текст.
Легче показать, чем рассказать.
В этом эффекте наведения ссылок происходит довольно много хитрости. Но волшебный соус использует атрибут данных для определения текста, который вставляется, и вызывает его со contentсвойством ::after псевдоэлемента ссылки.
Во-первых, разметка HTML:
<p>Hover <a href="#" data-replace="get a link"><span>get a link</span></a></p>
Это много встроенной разметки, но вы смотрите на тег абзаца, который содержит ссылку и интервал.
Давайте дадим ссылке несколько базовых стилей. Нам нужно придать ему относительное расположение, чтобы удерживать псевдоэлементы, которые будут расположены абсолютно, на месте, убедитесь, что они отображаются так inline-block, чтобы получить возможности оформления элементов блока, и скрыть любое переполнение, которое могут вызвать псевдоэлементы.
a {
overflow: hidden;
position: relative;
display: inline-block;
}
Псевдоэлементы ::beforeи ::afterдолжны иметь некоторое абсолютное расположение, чтобы они складывались с фактической ссылкой. Мы убедимся, что они установлены на всю ширину ссылки со смещением нуля в левую позицию, настраивая их для некоторого скользящего действия.
a::before, a::after {
content: '';
position: absolute;
width: 100%;
left: 0;
}
::after Псевдоэлемент получает содержимое из атрибута данных ссылки, который находится в разметке HTML:
a::after {
content: attr(data-replace);
}
Теперь мы можем transform: translate3d()::after переместить элемент псевдо-элемента вправо на 200%. Мы возвращаем его в положение вкл :hover. Пока мы этим занимаемся, мы можем придать этому нулевое смещение в topнаправлении. Это будет важно позже, когда мы будем использовать ::before псевдоэлемент как подчеркивание под текстом.
a::after {
content: attr(data-replace);
top: 0;
transform-origin: 100% 50%;
transform: translate3d(200%, 0, 0);
}
a:hover::after, a:focus::after {
transform: translate3d(0, 0, 0);
}
Мы также перейдем к transform: scale()::before псевдоэлементу, чтобы он был скрыт по умолчанию, а затем снова увеличим его масштаб :hover. Мы сделаем его маленьким, например 2px, по высоте, и прикрепим его bottomтак, чтобы он выглядел как подчеркивание в тексте, который заменяется на ::after.
a::before {
background-color: #54b3d6;
height: 2px;
bottom: 0;
transform-origin: 100% 50%;
transform: scaleX(0);
}
a:hover::before, a:focus::before {
transform-origin: 0% 50%;
transform: scaleX(1);
}
Остальное - все предпочтения! Мы добавим transitiontransform эффекты, некоторые цвета и еще много чего, чтобы получить полный эффект. Эти значения полностью зависят от вас.
ДЕМО
Наведите на ссылку
3. Эффект растущего фона на ссылке
Это довольно популярный эффект, который я видел используемым во многих местах. Идея заключается в том, что вы используете ::before псевдоэлемент ссылки в качестве жирного подчеркивания, которое находится немного позади фактического текста ссылки. Затем при наведении псевдо-элемент расширяется, чтобы охватить все целиком.
Хорошо, несколько базовых стилей для ссылки. Мы хотим, чтобы notext-decoration, поскольку ::before будет действовать как один, тогда некоторое относительное позиционирование сохранится ::before, когда мы зададим это абсолютное позиционирование.
HTML
<p>Hover this <a href="#">cool</a> link.</p>a {
text-decoration: none;
position: relative;
}
Теперь давайте настроим ::before его, сделав его чем-то вроде 8pxвысокого, чтобы он выглядел как жирное подчеркивание. Мы также зададим ему абсолютное позиционирование, чтобы у нас был контроль, чтобы сделать его на всю ширину фактической ссылки, смещая ее так, чтобы она была на уровне left и находилась чуть дальше bottom, чтобы казалось, что она слегка выделяет ссылку. Можно также дать это z-index: -1, чтобы мы были уверены, что оно находится за ссылкой.
a::before {
content: '';
background-color: hsla(196, 61%, 58%, .75);
position: absolute;
left: 0;
bottom: 3px;
width: 100%;
height: 8px;
z-index: -1;
}
Красиво, красиво. Давайте сделаем так, чтобы при наведении курсора казалось, что ::before ссылка увеличивается. Все, что нам нужно, это изменить высоту с 3px на 100%. Обратите внимание, что я также уменьшаю bottomсмещение до нуля, чтобы фон занимал больше места, когда он увеличивается.
a:hover::before {
bottom: 0; height: 100%;
}
Теперь для небольшого перехода к этим изменениям:
a::before {
content: '';
background-color: hsla(196, 61%, 58%, .75);
position: absolute;
left: 0; bottom: 3px;
width: 100%;
height: 8px;
z-index: -1;
transition: all .3s ease-in-out;
}
ДЕМО
Наведите на эту классную ссылку
4. Эффект с изменением цвета справа налево
Лично нам нравится использовать этот эффект для ссылок в навигации. Ссылка начинается одним цветом без подчеркивания. Затем, при наведении курсора, справа появляется новый цвет, а слева - подчеркивание.
Там происходит много движения, поэтому вы можете рассмотреть последствия доступности и обернуть все это в prefers-reduced-motion запрос, чтобы заменить его чем-то более тонким для тех, кто чувствителен к движению.
Вот как это работает. Мы придаем ссылке линейный градиент фона с жесткой остановкой между двумя цветами на полпути.
HTML
<a href="">Hover This Link</a>a {
background-image: linear-gradient( to right, #54b3d6, #54b3d6 50%, #000 50% );
}
Мы делаем фон вдвое больше ширины ссылки или 200% и размещаем его полностью слева. Таким образом, как будто отображается только один из градиентов двух цветов.
a {
background-image: linear-gradient( to right, #54b3d6, #54b3d6 50%, #000 50% );
background-size: 200% 100%;
background-position: -100%;
}
Волшебство происходит, когда мы достигаем пары нестандартных -webkit-свойств с префиксами. Один из них удаляет цвет из текста, чтобы сделать его прозрачным. Другой обрезает градиент фона к тексту, так что кажется, что текст на самом деле является цветом фона.
a {
background-image: linear-gradient( to right, #54b3d6, #54b3d6 50%, #000 50% );
background-size: 200% 100%;
background-position: -100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Теперь давайте сделаем искусственное подчеркивание ссылки ::before, применив его. Мы придадим ему тот же цвет, что и скрытой части градиента фона ссылки, и разместим его под фактической ссылкой, чтобы она выглядела как правильная text-decoration: underline.
a:before {
content: '';
background: #54b3d6;
display: block;
position: absolute;
bottom: -3px; left: 0;
width: 0;
height: 3px;
}
При наведении мы перемещаемся ::beforeна место, заходя слева:
a:hover {
background-position: 0;
}
Теперь это немного сложнее. При наведении мы делаем ::before псевдоэлемент ссылки 100% от ширины ссылки. Если бы мы применили это непосредственно к наведению ссылки, мы бы сделали саму ссылку во всю ширину, что перемещает ее по экрану. Ого!
a:hover::before { width: 100%; }
Добавьте небольшой переход, чтобы сгладить ситуацию:
a {
background-image: linear-gradient( to right, #54b3d6, #54b3d6 50%, #000 50% );
background-size: 200% 100%;
background-position: -100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: all 0.3s ease-in-out;
}
ДЕМО
5. Эффект с подчеркиванием ссылок радужными цветами
Мы не можем сделать text-decoration-color: rainbow, но мы можем подделать это с помощью небольшой background магии, смешанной с линейными градиентами.
Сначала мы удаляем ссылки text-decoration:
a { text-decoration: none; }
Теперь перейдем к этим градиентам. Мы объединяем два линейных градиента в одно background свойство. Один градиент - это начальный цвет перед наведением. Вторая - радуга при наведении.
a {
background:
linear-gradient( to right, rgba(100, 200, 200, 1), rgba(100, 200, 200, 1) ),
linear-gradient( to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1) );
}
Давайте сделаем размер фона небольшим 3px, чтобы он выглядел, знаете, как подчеркивание. Мы можем совместить оба градиента в background-size с войстве так, чтобы начальный градиент был полной ширины и 3pxвысоты, а радуга - нулевой ширины.
a {
background:
linear-gradient( to right, rgba(100, 200, 200, 1), rgba(100, 200, 200, 1) ),
linear-gradient( to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1) );
background-size: 100% 3px, 0 3px;
}
Теперь мы можем расположить фоновые градиенты — одновременно в background-position свойстве — так, чтобы первый градиент был полностью виден, а радуга была скрыта из виду. О, и давайте убедимся, что фон не повторяется, пока мы этим занимаемся.
a {
background:
linear-gradient( to right, rgba(100, 200, 200, 1), rgba(100, 200, 200, 1) ),
linear-gradient( to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1) );
background-size: 100% 3px, 0 3px;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat;
}
Давайте обновим background-size при наведении, чтобы градиенты меняли значения:
a:hover { background-size: 0 3px, 100% 3px; }
И, наконец, небольшой переход при наведении:
a {
background:
linear-gradient( to right, rgba(100, 200, 200, 1), rgba(100, 200, 200, 1) ),
linear-gradient( to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1) );
background-size: 100% 3px, 0 3px;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat; transition:
background-size 400ms;
}
Вуаля!
ДЕМО
6. Эффект с передвигающимся подчеркиванием
Данный пример убирает фон, делая ссылку более подчёркнутой.
a {
position: relative;
}
a::before {
content: '';
position: absolute;
width: 100%;
height: 4px;
border-radius: 4px;
background-color: #18272F;
bottom: 0; left: 0;
transform-origin: right;
transform: scaleX(0);
transition: transform .3s ease-in-out;
}
a:hover::before {
transform-origin: left;
transform: scaleX(1);
}
ДЕМО
На этом всё.
