![](/data/items/18978/00.jpg)
print media queries
Вы можете стилизировать версию вашего сайта для печати с помощью media query:
@media print {
* {
background-color: transparent;
color: #000 ;
box-shadow: none;
text-shadow: none;
}
}
gradient text
![Gradient text](/data/items/18978/01.png)
h1 {
background-image: linear-gradient(to right, #C6FFDD, #FBD786, #f7797d);
background-clip: text;
color: transparent;
}
Улучшаем media defaults
Когда пишите css reset файлик, добавьте настройки для мультимедийных файлов:
img, picture, video, svg {
max-width: 100%;
object-fit: contain; /* preserve a nice aspect-ratio */
}
column count
Создаем column лейауты с помощью column-count.
![column-count](/data/items/18978/02.png)
p {
column-count: 3;
column-gap: 5rem;
column-rule: 1px solid salmon; /* border between columns */
}
Центрирование элемента с positioning
Если вы не знакомы с grid или flex, это способ центрировать div по вертикали и горизонтали:
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
List с автоматическим добавлением запятой
![List с автоматическим добавлением запятой](/data/items/18978/03.png)
li:not(:last-child)::after {
content: ',';
}
smooth scrolling
![Smooth scrolling](/data/items/18978/04.gif)
Это все делается одной строчкой:
html {
scroll-behavior: smooth;
}
hyphens
![hyphens](/data/items/18978/05.gif)
Испойлуйте этот параметр, чтобы установить настройки переноса строки.
first letter
![](/data/items/18978/06.png)
Этот псевдо-элемент позволяет стилизировать первую букву, например:
h1::first-letter {
color: #ff8A00;
}
accent color
С помощью этой настройки устанавливайте цвет для стандартных элементов форм в отличии от стандартного.
![Accent color](/data/items/18978/07.gif)
Background для текста в виде изображения
![Background для текста в виде картинки](/data/items/18978/08.png)
h1 {
background-image: url('illustration.webp');
background-clip: text;
color: transparent;
}
Стилизация плейсхолдера
Используйте псевдоэлемент для стилизации плейсхолдеров.
::placeholder {
font-size: 1.5em;
letter-spacing: 2px;
color: green;
text-shadow: 1px 1px 1px black;
}
Анимация цвета
![Анимация цвета](/data/items/18978/09.gif)
button {
animation: colors 1s linear infinite;
}
@keyframes colors {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
Центрирование с margin
.parent {
display: flex; /* display: grid; also works */
}
.child {
margin: auto;
}
Функция clamp
![Функция clamp](/data/items/18978/10.gif)
Используйте функцию для адаптивной и плавной типографики.
h1 {
font-size: clamp(5.25rem,8vw,8rem);
}
Стилизация при выделении контента
![Стилизация при выделении контента](/data/items/18978/11.gif)
::selection {
color: coral;
}
decimal leading zero
![Decimal leading zero](/data/items/18978/12.png)
li {
list-style-type: decimal-leading-zero;
}
Центрирование элемента с flex
.parent {
display: flex;
justify-content: center;
align-items: center;
}
Кастомный курсор
![Кастомный курсор](/data/items/18978/13.gif)
caret color
![](/data/items/18978/14.gif)
Вы можете настроить цвет каретки ввода текста, используя:
input {
caret-color: coral;
}
only child
:only-child находит любой элемент, являющийся единственным потомком родителя. Это тоже, что и :first-child:last-child или :nth-child(1):nth-last-child(1), но с меньшей специфичностью.
![Only child](/data/items/18978/15.png)
li:only-child {
color: lightgrey;
}
Центрирование в гриде
.parent {
display: grid;
place-items: center;
}
text indent
![Text indent](/data/items/18978/16.png)
text indent позволяет нам делать отступ в первой строке текста, мы также можем использовать отрицательные значения.
p {
text-indent: 5rem;
}
list-style-type
![list-style-type](/data/items/18978/17.png)
Вы можете установить эмодзи или любой символ в качестве стиля списка.
li {
list-style-type: '🟧';
}