Рубрика: CSS

bez-imeni-1

Создание CSS анимации «переворот»

CSS анимация — это очень весело. Её красота в том, что посредством множества простых свойств вы можете создать что угодно от элегантного затухания до Супер-Пупер эффекта. Одним из таких CSS эффектов является CSS эффект "переворот", где есть какой-то контент с друх сторон заданного контейнера. Этот урок покажет как создать этот эффект максимально простым способом.

Читать далее

screenshot_1

Колонки одинаковой высоты Bootstrap

В одном из проектов мне было нужно, чтобы четыре стандартных блока col-xs-3 были одинаковой высоты, подстраиваясь под высоту самого «длинного». Для того, чтобы этого добиться, можно использовать простое решение:

Читать далее

maxresdefault

Как добавить пользовательский (кастомный) шрифт при помощи CSS

CSS-правило @font-face позволяет подгружать пользовательские (кастомные) шрифты к странице. Добавление в таблицу стилей этого правила заставляет браузер загружать шрифт из места его хранения, а затем отображать в соответствии с CSS.

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

Читать далее

images-1fc04c47-6e34-4701-aedf-c90e5927b2f8

CSS-анимация против JS-анимации

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

Читать далее

Css-miami-desktop_(110995239)

CSS-анимация «Дрожь»

Иногда бывает необходимость создать эффект "дрожания". Можно использовать JavaScript, однако последние спецификации CSS позволяют обойтись без него. Этот сниппет взят с моего любимого сайта по CSS — https://css-tricks.com.

Читать далее

Документация Bootstrap 4. Система разметки

Bootstrap включает в себя мощную систему сеток с построением разметки всех форм и размеров. Она базируется на 12 колоночной разметке и имеет несколько уровней — по одному на каждую область медиа запросов. Вы можете использовать ее в Sass миксинах или предопределенных классах.

Читать далее