Автор этого материала постарался собрать в одном месте всю информацию о кнопках и ссылках, которую только можно найти в интернете.

В итоге получился неплохой UX-гайд по использованию этих компонентов:

https://tprg.ru/yzrC

#фронтенд #css #html

Онлайн-инструмент, с помощью которого можно сгенерировать CSS-стиль для Material Design компонента:

https://tprg.ru/xV5L

#фронтенд #css

Как создать hover-анимацию, показанную в этом видео? Вот подробный гайд:

https://tprg.ru/fdgR

#фронтенд #css

Репозиторий, в котором собрано 23 примера, в которых можно запросто обойтись без JavaScript:

https://tprg.ru/9ABW

#фронтенд #css

Игра, которая помогает изучить CSS Flexbox. Что нужно делать? С помощью CSS-свойств расставлять на поле пушки, которые будут защищать вас от наступающих злодеев:

https://tprg.ru/4nLS

#фронтенд #css

CSS Diner — игра, которая научит вас корректно обращаться к конкретным элементам в CSS-стилях.

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

Заодно аппетит нагуляете: https://tprg.ru/EfGi

#фронтенд #css

Автор статьи разбирается во всех нюансах использования свойства overflow в CSS:

https://tprg.ru/x9SG

#фронтенд #css

30 вопросов по CSS

В статье разработчик собрал подборку из своих любимых вопросов по CSS, которые он обычно задаёт на собеседованиях. Ответы прилагаются:

https://tprg.ru/3ZL4

#фронтенд #css

Функции в CSS

В CSS, как и в серьёзных языках программирования, есть функции. Причём в самых разнообразных реализациях.

По ссылке — полный гайд по работе с любым типом CSS-функции:

https://tprg.ru/GKFe

#фронтенд #css

CSS Grid Generator

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

https://tprg.ru/TO9l

#фронтенд #css

Настройка размера контейнера в CSS Grid

Автор статьи столкнулся с такой проблемой, как неработающая прокрутка у контейнера. Вместо этого все блоки внутри контейнера располагались в ряд, вылезая за допустимые границы.

В этой статье он делится тем, как это исправить и почему это может случиться:

https://tprg.ru/kQpw

#фронтенд #css

Создание уменьшающейся шапки сайта без JavaScript

Следуя этому руководству, вы сможете создать красивый хэдер сайта, который будет уменьшаться при прокрутке страницы, экономя полезное пространство. А отсутствие JavaScript ещё и ресурсы сэкономит.

Делается это несложно, вот посмотрите:

https://tprg.ru/ogcS

#фронтенд #css

Создаём лоадеры при помощи CSS

Современные сайты достаточно тяжёлые, поэтому не загружаются моментально. Чтобы ваши пользователи поняли, что сайт или контент грузится, а не просто крашнулась страница, стоит добавить лоадеры, которые покажут, что процесс идёт.

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

https://techrocks.ru/2020/04/21/nice-preloaders-created-with-css/

#css