Верстка \ HTML5

Выделение текста с помощью HTML-тега mark

От автора: если вам когда-либо понадобится выделить текст внутри абзаца, лучше используйте тег mark. Это HTML-версия желтого маркера. Я всегда использовал тег span с некоторыми CSS-стилями, не понимая, что существует более семантический вариант. HTML5 полон всяких вкусностей, не правда ли?

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

Верстка \ CSS 3

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

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

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

Верстка \ CSS 3

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

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

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

Верстка \ CSS 3

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

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

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

Верстка \ CSS 3

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

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

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

Верстка \ CSS 3

4 причины, по которым ваш z-index CSS не работает (и как это исправить)

От автора: Z-index — это свойство CSS, которое позволяет размещать элементы в слоях друг над другом. Это супер полезно, и, честно говоря, очень важно знать, как использовать в CSS этот инструмент. К сожалению, z-index является одним из тех свойств, которые не всегда ведут себя интуитивно. Сначала это кажется простым — более высокий номер z-индекса означает, что элемент будет поверх элементов с более низкими номерами z-index.

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

Верстка \ CSS 3

О, так много способов создать строку ссылок в виде треугольных лент!

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

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

Верстка \ CSS 3

Создание адаптивного макета сетки CSS Grid без медиа-запросов

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

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