​​CSS

​​CSS Cокращение

:x: Длинный вариант записи:
background-color: #000;
background-image: url(images/bg.png);
background-repeat: no-repeat;
background-position: left top;

:white_check_mark: Краткий вариант записи:
background: #000 url(images/bg.png) no-repeat left top;

​​CSS свойство webkit-line-clamp.

Ограничивает текст заданным числом строк, при превышении текст обрезается и в конце добавляется многоточие.

p {
 -webkit-line-clamp: 3
}

​​Полезный CSS лайфхак.

Вставить изображение вместо курсора.

.content{
 cursor : url(image.png), auto
}

​​CSS-полезность в ленту.

Плавная прокрутка страницы в одну строчку кода.

html{
scroll-behaviour: smooth
}

Селекторы по атрибутам в CSS

В CSS существует возможность обратиться к элементам html-документа по значению его атрибутов. Вы, конечно, уже знаете про ID и классы. Давайте взглянем на следующий html:
<h2 id=”first-title” class=”magical” rel=”friend”>David Walsh</h2>
У этого элемента три атрибута: id, class и rel. Обратиться к этому элементу в CSS вы можете либо по его идентификатору (#first-title), либо по имени класса (.magical). Однако знали ли вы, что вы также можете обратиться к нему, используя атрибут rel? Это и называется селекторы по атрибутам:

h2[rel=friend] {
/* woohoo! */
}