⁠Самая лучшая погода — это та, которую создаёшь сам. Пусть и на CSS.

Исходный код здесь: https://codepen.io/CodeMeNatalie/pen/VNNddL

#css

Методология БЭМ

БЭМ (блок — элемент — модификатор) — это методология для разработки сайтов, созданная в Яндексе. Она позволяет писать модули, которые можно будет повторно использовать в своих других проектах.

Автор этого видео рассказывает, каким образом писать по этой методологии CSS: https://www.youtube.com/watch?v=4zt8qcZ1OXA

#css

Всё, что нужно знать про CSS

Огромная статья по CSS, которая заменит скучное чтиво большого списка CSS-свойств. Статья НЕ подойдёт тем, кто считает себя профи в CSS, и тем, кто практически с ним не знаком.

А вот для тех, кто уже делал что-то простенькое — самое то: https://www.taniarascia.com/overview-of-css-concepts/

#фронтенд #css

Большая коллекция CSS-шаблонов распространённых UI-компонентов: https://tprg.ru/E0X5

#фронтенд #css

Топ-100 самых популярных пенов на CodePen за 2019 год: https://tprg.ru/RdNU

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

Отличная интерактивная статья для изучения позиционирования в CSS с котиками:

https://tprg.ru/Pogp

#фронтенд #css

​16 генераторов CSS-кода для веб-разработчиков

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

Например, на картинке в посте — инструмент, с помощью которого много мелких картинок можно объединить в один файл и выводить не с помощью тега img, а с помощью CSS.

В подборке рассказываем ещё про 15 занятных CSS-генераторов:

https://tprg.ru/lV43

#веб #css

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

В итоге получился неплохой 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