Верстка \ CSS 3

Балансировка текста и изображений с помощью Flexbox

От автора: в конце семестра студенты сдают мне свои работы. В этих демо зачастую можно встретить очень длинный текст сбоку или под изображениями, или же наоборот, слишком большие изображения с небольшим отрывком текста. В работу дизайнера входит балансировка текста и изображений, чтобы все смотрелось гармонично: что-то одно не должно заглушать страницу за счет другого. Это крайне важно в выносках (небольшие отрывки текста с изображением), которые должны быть жидкими и уметь адаптироваться к изменению размера экрана и непредсказуемому изменению количества контента. После недолгих экспериментов я нашел идеальное решение, удовлетворяющее обоим условиям. Для этого нам понадобится flexbox и фоновые изображения.

Продолжить чтение

Верстка \ CSS 3

Из Sass в PostCSS

От автора: я работал с Sass на протяжении многих лет. Но сейчас я хочу поменять способ написания стилей с помощью PostCSS и плагина cssnext. Мне нравится идея, что уже сегодня можно писать CSS синтаксисом будущего и использовать инструменты, подходящие под те, к которым я привык. Мой личный сайт идеально подходит для тестирования новых функций.

Продолжить чтение

Верстка \ CSS 3

Стилизация лендингов с помощью PostCSS

От автора: у нас есть Sass, LESS, Stylus, зачем нам препроцессор PostCSS? У Sass есть свой уникальный синтаксис, а у PostCSS нет особых ограничений по написанию стилей. Это больше инструмент трансформации CSS. Трансформации в PostCSS осуществляются с помощью плагинов, написанных на JS. Входящий CSS конвертируется в дерево, которое потом трансформируется плагинами. Конечный этап заключается в обратной конвертации дерева в CSS при помощи PostCSS.

Продолжить чтение

Верстка \ CSS 3

Сокращенный синтаксис CSS считается антишаблоном

От автора: я часто сталкиваюсь с небольшой, но удивительно значимой проблемой, когда работаю с чьим-то кодом, делаю рефакторинг, проверяю его. И проблема заключается в использовании сокращенного синтаксиса CSS.

Продолжить чтение

Верстка \ CSS 3

Создание сложных макетов с PostCSS-Flexbox

От автора: узнайте, как с помощью этой маленькой, но мощной PostCSS функции создавать системы сеток, о которых вы всегда мечтали. Flexbox – замечательный инструмент для сокращения кода. Кроме того, в нем есть несколько отличных функций по изменению порядка сортировки элементов и выравнивания. Однако данный инструмент не проводит вычисления по размерам колонок и разделителей. Эксперты повторяют из раза в раз: Flexbox – хороший инструмент, но это не система сеток.

Продолжить чтение

Верстка \ CSS 3

Директива @support и ее JS двойники. Можно использовать!

От автора: вчера я прочла замечательную статью «директива @supports изменит вашу жизнь» за авторством Шарлотты Джексон. Я наконец выделила время на то, чтобы познакомиться с этой староновой функцией. Давайте быстренько разберем эту директиву.

Продолжить чтение

Верстка \ CSS 3

Гибкая типографика при помощи :root

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

Продолжить чтение

Верстка \ CSS 3

Выводим CSS формы на новый уровень

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

Продолжить чтение