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

Почему не работает стиль :: 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 элемент — вызывает много вопросов у начинающих. Основная проблема — установка цвета.

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

Bootstrap extra large — стили для сетки свыше 1600 точек
 20 Апр, 2017

3я версия Bootstrap определяет 4 размера сетки: <768px, ≥768px, ≥992px, ≥1200px. Этих размерностей явно не достаточно.

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

Эффект исчезновения/появления цветности CCS3
 7 Апр, 2017

Среди простых, но эффектных способов оживить картинки на сайте есть следующий визуальный эффект, для которого нужны лишь CSS3 стили. Назовем его — «игра с цветностью».

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

Как запретить растягивание textarea
 27 Фев, 2017

Тэг TextArea — незаменимое поле ввода для текста. Современные браузеры по-умолчанию позволяют пользователям изменять размеры, растягивать его за правый нижний угол. Сделано это с добрыми намерениями, но для верстальщика оборачивается не самыми приятными последствиями.

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

Делаем треугольник на CSS с помощью border
 19 Апр, 2016

Мы не будем углубляться в CSS3, где есть такое свойство как shape-outside, т.к. с его помощью легко можно сделать из обычного слоя любой многоугольник: что уж там какие то треугольники?

Мы попробуем выжать, казалось бы, немыслемое из свойства border. Итак, треугольники бордюрами.

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

Как делаются сайты с адаптивным дизайном?
 7 Апр, 2016

All-Devices-Supported

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

Только в одном им нелегко тягаться с настольными компьютерами — это размер дисплея. Комфортные глазу 24 дюйма никак не хотят влезать в карман :).

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