[Перевод] Все, что вам нужно знать о выравнивании во Flexbox

Цикл публикаций по особенностям CSS-технологии Flexbox от Rachel Andrew. Что происходит при создании контейнера Flexbox. Резюме В этой статье мы рассмотрим свойства выравнивания во Flexbox, а также основные правила, помогающие запомнить, как работает выравнивание как на главной, так и на поперечной оси. В первой статье этой серии я объяснила, что происходит при объявлении display: flex для элемента. На этот раз мы рассмотрим свойства выравнивания и их работу с…

Подробнее

[Перевод] Что происходит при создании контейнера Flexbox?

Это перевод статьи Rachel Andrew, являющейся одним из разработчиков спецификаций CSS. В короткой серии статей я собираюсь потратить некоторое время на детальную распаковку Flexbox — точно так же, как я делала в прошлом с grid. Мы рассмотрим, для чего был разработан Flexbox, что он действительно делает хорошо, а когда мы не можем выбрать его в качестве способа компоновки. В этой статье мы подробно рассмотрим, что на самом деле происходит при добавлении display: flex в вашу…

Подробнее

[Перевод] Краткое руководство по переменным в CSS (причины использования, синтаксис и примеры)

Я уже достаточно давно экспериментирую с CSS-переменными. Если вы к ним еще не подступались, вы можете воспользоваться этим кратким руководством, чтобы быстро во всем сориентироваться и приступить к работе. Читать дальше →

Подробнее

[Перевод] Всё, что нужно знать о выравнивании во Flexbox

Об авторе: Рэйчел Эндрю — не только главный редактор журнала Smashing Magazine, но и веб-разработчик, писатель и спикер. Она автор ряда книг, в том числе The New CSS Layout, один из разработчиков системы управления контентом Perch. Пишет о бизнесе и технологиях на своём сайте rachelandrew.co.uk. Краткое содержание: в этой статье мы рассмотрим свойства выравнивания во Flexbox и некоторые основные правила, как работает выравнивание по основной и поперечной осям. В первой статье этого цикла

Подробнее

Firefox и псевдокласс first-letter

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

Подробнее

JSFiddle — новая версия

Привет! Сегодня, я хочу поговорить об одном полезном инструменте — jsfiddle. Сейчас мало кто из разработчиков не знает о его существовании, поскольку jsfiddle очень прост в использовании и достаточно функционален. Но, возможно, кто-то из вас откроет для себя что-то новое, прочитав эту статью. Давайте знакомиться. jsFiddle — одна из самых популярных сред веб-разработки (работающая в веб-браузере), позволяющая редактировать и запускать код, написанный на HTML, JavaScript и CSS, который

Подробнее

[Из песочницы] Коллекция css теней Box-shadows.css

Привет всем! Наверняка, некоторые из вас замечали, что на разных сайтах используются практически однотипные тени в блоках, панелях навигации и прочих контейнерах, плюс — минус пара пикселей в сторону прозрачности. Я проанализировал ряд популярных сайтов, как наших, так и зарубежных, и попытался собрать максимально приближенные параметры используемых теней в одну большую коллекцию, или библиотеку. Кому как удобнее. Надеюсь, кому-нибудь пригодится. Основная цель проекта — облегчить работу…

Подробнее