Все записи категории ‘Танцы с CSS’

Дизайнеры любят разные компоновки блоков, но не всегда удобно использовать таблицы для верстки, чтобы воплотить дизайн в HTML. Рассмотрим одну из компоновок, которые я называю «один к четырем».

Flex опирается на другие принципы нежели блочные контейнеры, и иной раз не понятно какими свойствами управляется дочерний контейнер во flex родителе.

В общем случае, это может быть и «разрыв столбца», зависит от выбранного направления заполнения flex контейнера (задаётся свойством flex-direction).

Суть проблемы в том, что иногда требуется прекратить заполнение вдоль выбранного направления и начать новую строку (или столбец).

Сложно коротко описать поведение блока, а речь пойдет о sticky позиционировании в css.

Иногда дизайн требует, чтобы все слова заголовка или слогана были с новой строки. Можно добавить <br /> после каждого слова, но можно и обойтись изменениями в CSS.

VS

Задача: eсть текст, хочется не просто подчеркнуть (text-decoration: underline), а сделать это красиво.

Хорошо известна функция linear-gradient, используемая для background. Нельзя ли её применить для оформления текста?

Да, вновь тема переносов, т.к. я уже писал небольшую статью, но еще раз возвращаюсь к данной теме с некоторыми новыми подробностями. Итак — разрыв слова, перенос текста на новую строку — рассмотрим, какие директивы даёт нам CSS для управления поведением верстки.

Мы рассмотрим здесь как обрезать текст и добавить многоточие средствами CSS. Это еще одна классическая проблема фронт-енда, как не позволить тексту менять геометрию контейнера, если он не влазит целиком.