Верстка \ CSS 3

Руководство по единицам измерения CSS

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

Читать далее

Верстка \ CSS 3

Условный border-radius в CSS

От автора: некоторое время назад я изучал домашнюю страницу facebook*, чтобы узнать и разобраться, как она построена. Мне всегда любопытно посмотреть, как люди пишут CSS. Я заметил очень и очень интересное значение border-radius для карточного компонента в основной ленте.

Читать далее

Верстка \ CSS 3

min-content, max-content и fit-content в CSS

От автора: понимание размеров в CSS необходимо разработчикам, которым нужна гибкость для правильного представления содержимого веб-страницы. В CSS мы определяем размер элемента, используя значения длины (px, em), процентов и ключевых слов. Хотя типы значений длины и процентного значения часто используются для макетов веб-страниц, они не всегда идеально подходят.

Читать далее

Верстка \ CSS 3

Иконки сервиса IcoMoon

От автора: в этом уроке вы познакомитесь с отличным сервисом IcoMoon, который предлагает огромное количество шрифтовых иконок. Думаю, все вы в своих проектах использовали иконочные шрифты, например, наиболее известный – Font Awesome. Сервис IcoMoon предлагает не менее качественные шрифтовые иконки и в большом количестве.

Читать далее

Верстка \ CSS 3

Макет CSS Flexbox против  макета CSS Grid

От автора: Flexbox и Grid — это две модели макета CSS, которые можно использовать для создания сложных макетов веб-приложений с помощью всего лишь пары правил CSS. Это руководство поможет вам понять различия между моделями макетов CSS Flexbox и Grid и порекомендует, когда использовать одну вместо другой.

Читать далее

Верстка \ CSS 3

В добрый путь, Tailwind CSS

От автора: с годами CSS-фреймворки стали невероятно распространенными в веб-дизайне: эстетика Google Material Design постепенно проявляется в Сети, а библиотека плагинов и тем Bootstrap становится популярной по умолчанию.

Читать далее

Верстка \ CSS 3

Понимание gap в CSS

От автора: возможно, вы уже знаете о свойстве CSS gap. Оно не совсем ново, но в прошлом году это свойство получило новую важную возможность: теперь оно работает во Flexbox в дополнение к CSS Grid. Это, а также тот факт, что я считаю свойство более сложным, чем кажется, заставили меня объяснить, как именно оно работает.

Читать далее

Верстка \ CSS 3

Меньше абсолютного позиционирования с современным CSS

От автора: каждый раз, когда я работаю над компонентом, которому требуется абсолютное позиционирование, я спрашиваю себя: действительно ли это необходимо? Я заметил несколько вариантов использования, в которых нет необходимости в position:absolute. Мне показалось это интересным, и захотел, задокументировать варианты использования, с которыми я обычно сталкивался, работая над проектами.

Читать далее

Верстка \ CSS 3

Псевдоэлементы before и after в CSS

От автора: полагаю, многим из вас знакомы псевдоэлементы, которые можно получить и стилизовать с помощью before и after в CSS. Часто их используют для оформления списков, элементов меню на списках, цитат и т.д. В этом уроке будет показан еще один интересный вариант использования псевдоэлементов, который можно применить для «битых» изображений.

Читать далее