Все записи категории ‘Танцы с 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;. Пока элементы в сетке имеют одинаковую высоту, то никаких проблем с переносами нет.

Читать далее »
Битые картинки vs CSS
 6 Фев, 2021

Перефразируя устойчивое выражение: broken image happens. И раз уж они все равно могут появиться на вашем сайте, то с ними нужно что то делать, т.е. как минимум иметь механизм управления их внешним видом, вместо стандартного поведения браузера.

Читать далее »
SVG to CSS конвертер
 21 Июн, 2020

Небольшая тулза по конвертации SVG картинок в CSS backgroung-image код.

Читать далее »
Вставка переменной в инлайновое изображение в LESS
 29 Авг, 2019

Небольшие векторные элементы очень удобно вставлять как часть CSS кода. Хочу показать пример, как сделать их еще и параметрически зависимыми, при компиляции из LESS.

Читать далее »
CSS высота равна ширине
 11 Авг, 2019

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

Читать далее »
Верстка слоя-подкладки во всю ширину viewport
 16 Апр, 2019

В лендинговой верстке дизайнеры часто прибегают к следующему приему — фон одного или нескольких блоков растягивается на всю ширину документа. При этом максимальная ширина содержимого блоков чаще всего ограничена.

Читать далее »
Скрыть/изменить стили выделения в HTML — псевдокласс css::selection
 12 Мар, 2019

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

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