10 полезных советов по CSS

Это 10 небольших советов по CSS, которые действительно могут помочь тебе в проектах.

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

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

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

Живой пример: https://codepen.io/mrwolferinc/pen/BapbJKK

2. Запретить изменение размера <textarea>

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

Живой пример: https://codepen.io/mrwolferinc/pen/poRYpVL

3. Отступы

Можно добавить отступы к абзацу с помощью псевдоэлемента ::first-letter.

Живой пример: https://codepen.io/mrwolferinc/pen/qBRvxZO

4. Падающая тень

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

Живой пример: https://codepen.io/mrwolferinc/pen/bGgJwjq

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

Иногда бывает трудно отцентрировать элемент <div> на странице, но только не с помощью этого совета. Ты можешь отцентрировать любой элемент <div> на странице с помощью нескольких строк кода CSS.

Живой пример: https://codepen.io/mrwolferinc/pen/NWdmbRy

6. Ввод цвета каретки

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

Живой пример: https://codepen.io/mrwolferinc/pen/xxgeRYG

7. Предотвращение копипастинга

Этот вариант похож на №2, но ты можешь использовать свойство user-select, чтобы предотвратить копипастинг элемента пользователем.

Живой пример:https://codepen.io/mrwolferinc/pen/zYNXobv

8. Псевдоклассы входного диапазона

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

Живой пример: https://codepen.io/mrwolferinc/pen/poRBMGd

9. Наложение изображений

Ты можешь создать наложение изображения, используя свойство object-fit. Это может оказаться полезным, когда ты хочешь создать изображение героя на своем сайте.

Живой пример: https://codepen.io/S_HappY/pen/OJpWwYg

10. Свойство перехода (transition)

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

Живой пример: https://codepen.io/mrwolferinc/pen/RwKmbzZ

Источник: https://dev.to/mrwolferinc/10-helpful-css-tips-4669