DevGang
Авторизоваться

Разница между явными и неявными гридами 

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

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

CSS nth- переменная селектора

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

Шпаргалка по простому CSS Flexbox 

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

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

Создание ярких умных теней

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

Методология и архитектура CSS

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

Как анимировать текст кнопки с использованием только CSS

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

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

Анимация объекта при скролле

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

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

3 CSS метода для добавления границ элементов 

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

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

  1. border
  2. outline
  3. box-shadow

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

Как использовать CSS Grid для создания адаптивного веб-макета 

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

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

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

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

Варианты стилизации веб-компонентов 

Когда я выпустил emoji-picker-element в прошлом году, я впервые написал универсальный веб-компонент, который можно было добавить в любой проект или фреймворк. Кроме того, это был мой первый раз, когда я действительно использовал shadow DOM.

Каскадные таблицы стилей (CSS) - это язык таблиц стилей, используемый для описания представления документа, написанного на языке разметки. Хотя чаще всего используется для установки визуального стиля веб-страниц и пользовательских интерфейсов, написанных в HTML и XHTML, язык может быть применен к любому XML-документу, включая простой XML, SVG и XUL. Наряду с HTML и JavaScript, CSS - это важная технология, используемая большинством веб-сайтов для создания визуально привлекательных веб-страниц, пользовательских интерфейсов для веб-приложений и пользовательских интерфейсов для многих мобильных приложений.

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

Присоединяйся в тусовку

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

Попробовать

В подарок 100$ на счет при регистрации

Получить