CSS | Pointer-events

Свойство pointer-events позволяет управлять тем, как элементы будут реагировать на события мыши или прикосновения к сенсорному экрану. Свойство позволяет контролировать когда, как и может ли вообще указатель устройства взаимодействовать с элементом.

Продовжити читання “CSS | Pointer-events”

clip-path. Как можно изменить форму картинки или HTML элемента?

Cвойство clip-path создает ограниченную область, которая определяет какая часть элемента должна быть видимой.

Продовжити читання “clip-path. Как можно изменить форму картинки или HTML элемента?”

CSS z-index

Свойство z-index определяет уровень размещения в стеке, глубины html-элемента. Оно работает только с элементами, для которых свойство position установлено в absolute, fixed или relative.

Продовжити читання “CSS z-index”

CSS line-clamp

Cвойство line clamp усекает текст до определенного количества строк.
Синтаксис
.module {
line-clamp: [none | integer];
}

В текущем варианте спецификации line-clamp принимает следующие значения:
1. none: не устанавливает максимальное количество строк, и в результате усечение не происходит.
2. integer: устанавливает максимальное количество строк перед усечением контента, а затем отображает многоточие (…) в конце последней строки.

Эй, а не могу я сделать это с помощью text-overflow?
text-overflow действительно имеет значение ellipsis, которое будет обрезать текст:
.truncate {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Но text-overflow обрежет текст только в первой строке, а если вам нужно вывести две или более, можно использовать line-clamp

​CSS переменные.

CSS-переменные — это значения, которые объявляют в CSS, преследуя две цели. Первая — это многократное использование таких значений. Вторая — это сокращение объёмов CSS-кода.

Продовжити читання “​CSS переменные.”

Какие значения можно задать CSS переменной?

CSS переменные это сущности,, хранящие конкретные значения, которые можно повторно использовать в документе.

Продовжити читання “Какие значения можно задать CSS переменной?”

Крутые трюки с переменными CSS

Переменные в CSS (или custom properties, кому как удобнее) изначально задумывались для хранения повторяющихся свойств вроде цветовой палитры или шрифтов в одном месте.

Продовжити читання “Крутые трюки с переменными CSS”

Когда использовать Flexbox и когда использовать CSS-сетку

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

Продовжити читання “Когда использовать Flexbox и когда использовать CSS-сетку”

The Most Trending⚡️ CSS Frameworks🛠 Analogy 2020

Which framework will be suitable for you? Ever wondered, which parameters you should focus on while choosing the right framework? Well, rest your all questions here. Have a look at the detailed CSS Framework Analogy 🧐 Which will give you a detailed overview of various CSS frameworks.

Продовжити читання “The Most Trending⚡️ CSS Frameworks🛠 Analogy 2020”