Перевод статьи «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]
