Верстка \ CSS 3

Скролл для блока с плагином SimpleBar

От автора: в верстке частенько может возникать достаточно типовая задача: уместить в компактный небольшой блок большой объем данных. Реализовать эту задачу поможет CSS-свойство overflow. Однако, скроллы, создаваемые этим свойством для прокрутки внутреннего содержимого, выглядят так себе, хотелось бы их как-то оформить. Помочь с этим может замечательный плагин SimpleBar, использование которого вы и увидите в этом видео.

Продолжить чтение

Верстка \ CSS 3

Архитектура CSS - структура папок и файлов

От автора: одна из важных вещей в каждом языке программирования — это архитектура, то есть то, как код делится на файлы и папки. Тем не менее, почему-то CSS остался в стороне, и многие разработчики не тратят время на правильное планирование своей архитектуры.

Продолжить чтение

Верстка \ CSS 3

Как правильно мыслить, чтобы писать CSS

От автора: о да, CSS. Не проходит и недели, чтобы на эту тему не разгорались жаркие онлайн-дискуссии. Это слишком сложно. Это слишком просто. Это непредсказуемо. Это устарело. Питер Гриффин борется со слепыми точками GIF.

Продолжить чтение

Верстка \ CSS 3

Использование метода Grid Shepherd для упорядочивания данных с CSS

От автора: при работе с данными программисты часто не знают, правильно ли они отфильтрованы или отсортированы. Это особенно болезненно, когда вы перебираете массив, затем отображает данные на сайте, не зная местоположений каждого элемента, получающего их. Grid Shepherd — это метод, который помогает позиционировать и сортировать элементы там, где вы хотите, использовать CSS Grid вместо JavaScript.

Продолжить чтение

Верстка \ CSS 3

Переменные CSS: преимущества пользовательских свойств

От автора: Переменные CSS или «Пользовательские свойства CSS». Они позволяют работать с переменными непосредственно в CSS. Они очень полезны для уменьшения повторения в CSS, а также для создания мощных эффектов во время выполнения, таких как переключение тем. Они соответствуют принципу DRY — Don’t Repeat Yourself.

Продолжить чтение

Верстка \ CSS 3

Трансформация кнопки гамбургера

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

Продолжить чтение

Верстка \ CSS 3

Функция CSS для усечения многострочного текста была реализована в Firefox

От автора: когда свойство -webkit-line-clamp применяется к блоку текста (например, абзацу), текст можно ограничить указанным количеством строк (1 или более), и в конец последней видимой строки добавить многоточие (…). Таким образом, вы можете с помощью CSS скрыть текст, выходящий за блок.

Продолжить чтение

Верстка \ CSS 3

Мигающий текст на CSS

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

Продолжить чтение

Верстка \ CSS 3

Правила CSS, которые сделают вашу жизнь проще

От автора: после нескольких лет написания и поддержки нескольких очень больших веб-проектов и множества более мелких, я разработал некоторую эвристики для написания поддерживаемого CSS. Я использовал для именования BEM, SMACSS и CSS Modules, хотя эта статья сама по себе не посвящена именованию. (Я склонен использовать сочетание атомарных классов и именования BEM.) Эта статья о полезных правилах написания CSS, о свойствах и значениях, которые я использую или которых избегаю.

Продолжить чтение