10 полезных приемов использования CSS

Перевод статьи «10 Helpful CSS Tips».

В этой статье вы найдете 10 маленьких приемов, которые могут пригодиться вам в ваших проектах.

1. Плавная прокрутка

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

Примечание: в Safari это не сработает!

html {
  scroll-behavior: smooth;
}

See the Pen Smooth Scrolling by mrwolferinc (@mrwolferinc) on CodePen.

2. Предотвращаем изменение размера <textarea>

При помощи свойства resize можно помешать изменению размера элемента <textarea> (или ограничить его изменением только по одной оси).

textarea.no-resize {
  resize: none;
}

textarea.horizontal-resize {
  resize: horizontal;
}

textarea.vertical-resize {
  resize: vertical;
}

See the Pen Prevent <textarea> Resize by mrwolferinc (@mrwolferinc) on CodePen.

3. Буквица

В начале абзаца можно добавить буквицу. Это делается при помощи псевдоэлемента ::first-letter.

::first-letter {
  font-size: 250%;
}

See the Pen Drop Cap by mrwolferinc (@mrwolferinc) on CodePen.

4. Эффект тени

Чтобы создать эффект тени для прозрачных изображений, можно использовать drop-shadow(). Результат получится лучшим, чем при использовании свойства box-shadow.

img {
  filter: drop-shadow(0 0 3px #000);
}

See the Pen Drop Shadow by mrwolferinc (@mrwolferinc) on CodePen.

5. Центрирование любого элемента <div>

Порой бывает сложно отцентрировать элемент <div> на странице, но этот совет вам поможет. Потребуется лишь несколько строк CSS-кода.

body {
  display: grid;
  place-items: center;
}

See the Pen Center Any <div> Element by mrwolferinc (@mrwolferinc) on CodePen.

6. Цвет курсора в поле ввода

При помощи свойства caret-color можно изменить цвет курсора.

input {
  caret-color: red;
}

See the Pen Input Caret Color by mrwolferinc (@mrwolferinc) on CodePen.

7. Запрет выделения

При помощи свойства user-select можно защитить элемент от выделения пользователем.

.no-highlight {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

See the Pen Prevent Highlighting by mrwolferinc (@mrwolferinc) on CodePen.

8. Диапазон ввода

Псевдоклассы :in-range и :out-of-range не слишком известны, но они могут помочь в валидации элемента <input>, текущее значение которого не должно выходить за определенные рамки. Сами рамки задаются при помощи атрибутов min и max.

input:in-range {
  background: rgba(0, 255, 0, .25);
}

input:out-of-range {
  background: rgba(255, 0, 0, .25);
}

See the Pen Input Range Pseudo-Classes by mrwolferinc (@mrwolferinc) on CodePen.

9. Перекрытие изображения

При помощи свойства object-fit можно сделать перекрытие изображения. Это может пригодиться при создании hero image на вашем сайте.

.image-overlay img:only-of-type:nth-child(1) {
  object-fit: cover;
  opacity: .4;
}

See the Pen Image Overlay by mrwolferinc (@mrwolferinc) on CodePen.

10. Свойство transition

Вероятно, это свойство вам знакомо. Но знаете ли вы, что с его помощью можно анимировать элементы без использования ключевых кадров (keyframes)? Свойство transition позволяет определять переход между двумя состояниями элемента. Используется этот прием, в основном, для анимаций при наведении мыши.

a {
  color: #0d6efd;
  text-decoration: none;
  -webkit-transition: .15s ease-in-out;
  -moz-transition: .15s ease-in-out;
  transition: .15s ease-in-out;
}

a:hover {
  color: #0a58ca;
}

See the Pen The transition Property by mrwolferinc (@mrwolferinc) on CodePen.

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]