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

Разрыв строки во flex
 6 Мар, 2024

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

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

Читать далее »
Скользящий блок внутри контейнера, но фиксированный относительно экрана
 15 Июн, 2023

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

Читать далее »
Сделать перенос каждого слова на новую строку CSS
 29 Май, 2023

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

Читать далее »
Подчеркиваем текст или бек-граунд для текста
 4 Апр, 2023

VS

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

Читать далее »
Использование CSS градиента цвета для текста
 28 Фев, 2022

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

Читать далее »
И снова переносы в CSS
 30 Ноя, 2021

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

Читать далее »
Ошибка background-size:cover в Firefox при рендеринге svg
 21 Сен, 2021

По какой то причине firefox не верно отрабатывает свойство background-size: cover для SVG.

Читать далее »
Переполнение текста (text-overflow)
 3 Сен, 2021

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

Читать далее »
100vh не корректно работает для мобильных устройств
 23 Июл, 2021

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

Читать далее »
Переносы элементов сетки bootstrap разной высоты (фикс для версии 3.x)
 2 Май, 2021

В третей версии бутстрапа используется выравнивание элементов сетки col-* с помощью свойства float: left;. Пока элементы в сетке имеют одинаковую высоту, то никаких проблем с переносами нет.

Читать далее »