Небольшая тулза по конвертации SVG картинок в CSS backgroung-image код.
Читать далее »Все записи категории ‘Танцы с CSS’
Вставка переменной в инлайновое изображение в LESS
29 Авг, 2019
Небольшие векторные элементы очень удобно вставлять как часть CSS кода. Хочу показать пример, как сделать их еще и параметрически зависимыми, при компиляции из LESS.
Читать далее »CSS высота равна ширине
11 Авг, 2019
Ширина и высота контейнера — независимые параметры, но иногда хотелось бы чтобы связь между ними была, к примеру, для сохранения пропорций контейнера при адаптивной верстке.
Читать далее »Верстка слоя-подкладки во всю ширину viewport
16 Апр, 2019
В лендинговой верстке дизайнеры часто прибегают к следующему приему — фон одного или нескольких блоков растягивается на всю ширину документа. При этом максимальная ширина содержимого блоков чаще всего ограничена.
Читать далее »Скрыть/изменить стили выделения в HTML — псевдокласс css::selection
12 Мар, 2019
Для удобства пользователя, браузеры применяют специальные стили к выделенному тексту. Данные стили могут нарушать дизайн, смотреться не гармонично в верстке, и потому нужно иметь возможность изменить или убрать данный эффект.
Читать далее »Прогресс бары, анимация загрузки…
11 Янв, 2019
Сайт, где вы найдете конструкторы анимации прогресс баров — loading.io. Я бы сказал налетай, подешевело, но всё абсолютно даром.
Псевдоклассы состояния контейнера input
24 Окт, 2018
Хотелось бы выделить такой перечень css псевдоклассов и приемов работы с ними, который основан на состоянии элемента INPUT.
Эффект, затрудняющий прочтение текста
1 Авг, 2018
Этот эффект я увидел на одном сайте, где авторы решили так оригинально бороться с пользователями ад-блокера.
Убираем подсветку поля при фокусе ввода в Chrome
18 Май, 2018
В браузерах на движке chromium (Chrome, Opera) по умолчанию есть «подсветка» поля, получившего фокус ввода. Смотрим как убрать данный стиль.
Убираем нативный крестик в поле ввода под IE
13 Май, 2018
Во время ввода в текстовом поле IE появляется «крестик», который позволяет очистить поле в один клик. Иногда стиль, и вообще наличие этого крестика, не соответствуют вашему дизайну или логике работы поля. Разбираемся, как его убрать.