​Как работает CSS Position — объяснение с примерами кода

Рассказываем, как работать с CSS Position и применять его свойства — relative, absolute, static, fixed и sticky для разработки веб-сайтов

#веб #фронтенд #css

Убираем JavaScript. Как при помощи htmx красиво использовать HTML и уменьшить объём кода?

Есть такая библиотека htmx. Она позволяет создавать сложные веб-приложения на HTML и выступает как альтернатива клиентскому рендерингу на Javascript. htmx помогает переиспользовать элементы на сервере, сократить объём кода на Javascript и отказаться от сборки.

Страница проекта

Небольшой вводный гайд по работе с htmx

#инструменты #css #javascript #html #веб

​Полный самоучитель по CSS Grid на примере единорога и со шпаргалкой

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

#css #шпаргалка #веб #фронтенд

​Центрируем вообще всё!

Рассказываем и показываем, как центрировать в CSS всё, что угодно, через Flexbox, Grid, Position и Margin

#css #веб

CSS следующего поколения: @container

Новое свойство @container дает нам возможность стилизовать элементы в зависимости от размера их родительского контейнера. Это что-то типа медиа-запросов, но с ориентацией не на область просмотра, а на родительский контейнер элемента.

В этой статье вы узнаете, какие возможности это открывает, как работает и где использовать:

https://webdevblog.ru/css-sledujushhego-pokoleniya-container/

#css

Что изменилось в CSS за последние несколько лет

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

О том, что нового появилось в в CSS за последние годы вы сможете узнать здесь.

И нет, в статье не будет разбора и упоминания каждой новой функции за последние 5 лет, но в ней вы сможете узнать о новинках, оказавших наибольшее влияние на повседневную работу с CSS.

#веб #фронтенд #css

​​Как научиться анимациям в CSS за 20 минут

На YouTube-канале Slaying The Dragon вышел 20-минутный туториал, посвящённый анимациям CSS. Вы познакомитесь с базовым набором свойств, которые позволят реализовать почти любое движение / преобразование текста, кнопки или любого другого объекта.

#css

​​Почему не стоит использовать сброс стилей (reset.css, обнуление стилей CSS)?

Интересная предложка от нашего читателя Виталия Першина, в которой он кратко объяснил, почему сброс стилей — худшее решение в современной верстке: https://www.youtube.com/watch?v=eDXSW22p9Bk

@tproger_web #css

— Насколько хорошо вы умеете работать с CSS?
— Настолько, что рисую на CSS картины.
— Что?
— Что?

Целый аккаунт с похожими работами: https://twitter.com/asyrafhussin4

#css @tproger_web

​​Интерактивный гайд по CSS Container Queries

Отличная возможность для того, чтобы попробовать относительно новую фичу без необходимости создавать свою песочницу: https://ishadeed.com/article/css-container-query-guide

#инструменты #css

​​6 полезных шпаргалок по CSS, которые сэкономят вам часы работы

Они идеально подходят как для новичков, так и для тех, кто уже неплохо разбирается.

Чит-листы охватывают такие аспекты как:
— CSS Flexbox.
— CSS Grid.
— CSS Positions.
— CSS Display Values.
— CSS Selectors.
— CSS :nth-child Selectors.

Сохраняйте, чтобы не потерять: https://github.com/WebdevShefali/CheatSheets/tree/main

#css #фронтенд

​​24 CSS-проекта: Анимация загрузки, индикаторы выполнения, карточки и многое другое

На freeCodeCamp вышло новое видео, в котором вы сможете узнать, насколько хорошо вы на самом деле знаете CSS.

На протяжении 24 заданий вы будете воссоздавать компоненты и макеты из популярных приложений, таких как GitHub, CodePen и Instagram. Вы также создадите анимацию загрузки, индикаторы выполнения, карточки и многое другое, используя чистый CSS: https://youtu.be/TzuWIHGFKCQ

#css