Несколько CSS-премов, о которых вы не знали, но которые вам пригодятся

0
1895
views
verstka logo

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

×

Перевод статьи «5 CSS tips you didn’t know you needed».

CSS-приемы

За несколько лет работы в разных компаниях, занимающихся разработкой ПО, я собрала собственную коллекцию приемов использования CSS. Эти вещи я применяю ежедневно, порой даже не задумываясь. Несколькими такими приемами я поделюсь с вами. Какие-то из них достаточно стандартны, другие более необычны, но все они применялись мной на реальных сайтах клиентов.

Переходы

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

// Background colour transition
transition: background 0.2s ease-in-out;

В случае с кнопкой я чаще всего добавляю transition для цвета фона (как показано выше), а для ссылки устанавливаю для свойства transition значение all (transition: all 0.2s ease-in-out), что позволяет мне сделать переход, например, для цвета и рамки.

Также я никогда не использую text-decoration: underline. При его использовании у вас остается не слишком много пространства для маневров, а вот если использовать нижнюю границу элемента, можно получить более красивый эффект. Padding позволяет поиграть с расстоянием, кроме того, при желании можно добавить переход или даже анимацию для границы.

.link {
     transition: border 0.2s ease-in-out;
     border-bottom: 1px solid transparent;
 }
 .link:hover {
     border-color: blue;
 }

«Живой» пример, созданный комментатором статьи, Akshay Kadam:

See the Pen #1 Tip for Transitions of Button & Link by Akshay Kadam (@deadcoder0904) on CodePen.

Перекрытие фона

Допустим, у вас есть какой-нибудь текст с абсолютным позиционированием вверху изображения. Но фоновое изображение чересчур яркое, из-за чего снижается читаемость текста. Можно добавить еще один div куда-нибудь, чтобы создать темное перекрытие сзади текста, но это не слишком удачное решение, к тому же добавление пустого div-а не так уж необходимо.

Нам помогут псевдоэлементы! Например, можно применять элемент :before. Вот, как я сделала перекрытие фона:

See the Pen Background overlay by Lynne Finnigan (@lynnewritescode) on CodePen.

Главное в этом коде — установить цвет перекрытия и уровень непрозрачности. Цвет может быть любым, я использовала просто черный и белый, как в примере:

//Black overlay - 0.5 opacity
background: rgba(0,0,0,0.5);
//White overlay - 0.2 opacity
background: rgba(255,255,255,0.2);

Эффект подчеркивания нескольких строк

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

See the Pen Nice underline effect by Lynne Finnigan (@lynnewritescode) on CodePen.

Возможно, такой вариант не соответствует вашим требованиям или дизайну. Но его можно использовать для добавления эффекта при наведении курсора на ссылку, как в примере ниже:

See the Pen Multi line hover effect by Lynne Finnigan (@lynnewritescode) on CodePen.

«Липкие» элементы

Вам нужно, чтобы какой-то элемент был закреплен при прокрутке, но при этом вы не хотите использовать JavaScript или какой-нибудь плагин? Или высота вашего контента динамична и склонна меняться? Ваш друг — position: sticky.

position: -webkit-sticky;
position: sticky;
top: 0px;

Мне это свойство очень пригодилось, когда нужно было сделать так, чтобы боковая панель «прилипла» рядом с элементом-аккордеоном. Поскольку аккордеон разворачивается и сворачивается, без использования position: sticky мне пришлось бы высчитывать высоту или использовать еще какой-то заумный метод, а применение этого свойства позволило достичь нужного эффекта сразу же.

Только следует учитывать, что этот подход не работает, когда для элемента body установлено overflow: hidden. Также это свойство не поддерживается в IE11 (элемент просто не прилипает).

«Живой» пример, созданный комментатором статьи, Akshay Kadam:

See the Pen #4 Tip for Sticky Elements by Akshay Kadam (@deadcoder0904) on CodePen.

Предотвращение выделения

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

Для предотвращения такого нежелательного эффекта можно использовать следующий код:

.noselect {
   -webkit-touch-callout: none; /* iOS Safari */
     -webkit-user-select: none; /* Safari */
        -moz-user-select: none; /* Firefox */
         -ms-user-select: none; /* Internet Explorer/Edge */
             user-select: none; /* Non-prefixed version, currently
                                   supported by Chrome and Opera */
 }

«Живой» пример, созданный комментатором статьи, Akshay Kadam:

See the Pen #5 Tip for Prevent Highlighting by Akshay Kadam (@deadcoder0904) on CodePen.

Спасибо за внимание! Надеюсь, эти приемы пригодятся еще кому-нибудь, кроме меня!

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here