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

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

Все это обрабатывается так называемой явной и неявной сеткой.

Использование переменных CSS, по крайней мере, когда я пишу эти строки в июне 2021 года, не поддерживается в медиа-запросах или селекторе, например :nth-child(var(--my-variable)), не работает.

Flexbox великолепен, и они делают позиционирование в CSS намного лучше, чем исходное позиционирование (абсолютное, относительное и т. д.), но иногда их очень легко забыть или перепутать из-за их структурной природы.

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

Вы когда-нибудь хотели узнать, как создать эффект тени, который наследует некоторые цвета от элемента переднего плана? Прочтите или посмотрите ниже, чтобы узнать, как!

В течение многих лет я использовал ITCSS в качестве архитектуры Goto CSS для больших проектов. Это помогло мне сохранить мой CSS поддерживаемым с небольшой командой. Но в последние два года я стал больше применять утилиты и меньше писать компоненты / блоки CSS. Все больше и больше частей ITCSS оставались нетронутыми и неиспользованными. Моя архитектура CSS стала слишком сложной для повседневного использования. И это был не только я. Вы видите движение в сообществе, но также и в моей собственной команде.

Сегодня мы добьемся того, что вы видите ниже:

По сути, мы бы анимировали текст кнопки, чтобы плавно скользить вверх и вниз и отображать другой текст при наведении на него курсора.

В недавнем проекте я хотел добавить изображение, которое поворачивается при прокрутке вверх или вниз. Проведя небольшое исследование, я обнаружил, что есть несколько способов сделать это: использовать только css, использовать javascript, использовать библиотеки и так далее.

Это короткое руководство будет посвящено простому и короткому способу добавления анимированного скроллера. Если вы создаете небольшой веб-сайт или проект и хотите включить его.

Когда дело доходит до CSS, иногда border не совсем border.

В этой статье мы рассмотрим различия между:

1. border
2. outline
3. box-shadow

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

Макет CSS Grid - это двухмерная сетка, предназначенная для помощи веб-разработчикам в разделении элементов на столбцы и строки для создания согласованного и бесшовного макета для веб-приложений.

Логика CSS Grid заключается в том, что, если разработчик берет такой элемент, как div и отображает в нем сетку, он может затем разбить элемент на столбцы и строки - вместе известные как треки - где элементы можно взять и разместить в сетке. С CSS Grid, все это может произойти без дополнительной работы с использованием свойств позиционирования (top, right, left, bottom).

Есть случаи, когда можно использовать фреймворки CSS, а в других - CSS Grid, но, как и в большинстве случаев в веб-разработке, это зависит от вашего варианта использования.

В этой статье мы сосредоточимся на базовом дизайне с использованием строк, столбцов и областей для создания простого адаптивного веб-приложения с использованием CSS Grid.