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

Убираем нативный крестик в поле ввода под IE
 13 Май, 2018

Во время ввода в текстовом поле IE появляется «крестик», который позволяет очистить поле в один клик. Иногда стиль, и вообще наличие этого крестика, не соответствуют вашему дизайну или логике работы поля. Разбираемся, как его убрать.

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

Позиционирование фона с помощью background-position
 3 Май, 2018

В CSS, для позиционирования фонового изображения в контейнере, мы используем свойство background-position.

Свойство можно задать отдельно для оси X и Y,  кроме того можно задать 2, 3 или 4 параметра.

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

Кол-во знаков после запятой при генерации css препроцессором sass
 28 Мар, 2018

В одном из проектов использовался SASS, но оказалось, что у другого разработчика другие настройки SASS. И конечные CSS генерировались с числами другой точности (другое кол-во знаков после запятой).

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

Меняем оформление input checkbox с помощью CSS
 27 Дек, 2017

Оформление элементов формы — это старая проблема. Ситуация несомненно улучшается, но финала пока не видно. С появлением псевдо-контейнеров :after и :before стало возможным без дополнительных элементов и скриптов кастомизировать элемент INPUT:CHECKBOX.

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

Пропорциональное заполнение контейнера картинкой
 29 Ноя, 2017

Речь идет о том, чтобы показать изображение внутри контейнера так, чтобы оно заполнило собой весь контейнер, но при этом не изменились пропорции картинки.

Сейчас это актуально в связи с необходимостью поддержки отображения сайта на мобильных устройствах.

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

Почему не работает стиль :: before или :: after?
 22 Окт, 2017

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

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

Центровка HTML с помощью абсолютного позиционирования
 10 Окт, 2017

Классическая задача о позиционировании контейнера относительно центра родительского блока. Я писал уже о некоторых простых способах установить контейнер по центру, но способов много и все время появляются новые. К примеру, можно использовать table-cell контейнеры или flex.

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

Меняем отступы сетки (gutter-width) в Bootstrap
 2 Окт, 2017

Дефолтова сетка в bootstrap 3 имеет размер 30 пикс. Понятно, что рабочий макет может содержать произвольные отступы и, если вы хотите использовать преимущества работы с grid от бутстрапа, придется как то их менять и фиксить.

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

Центровка по вертикали модального окна в Bootstrap
 5 Май, 2017

Модальные окна Bootstrap всем хороши, но имеют одну досадную недоработку — нет вертикальной центровки.

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

Цвет HR — как изменить в CSS
 27 Апр, 2017

Горизонтальная линия HR — независимый HTML элемент — вызывает много вопросов у начинающих. Основная проблема — установка цвета.

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