Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице

Ещё не успели попробовать Flexbox или хотите освежить в памяти все его возможности? В этой статье мы собрали для вас все свойства и продемонстрировали их работу в гифках:

https://tproger.ru/articles/how-css-flexbox-works/

#css #фронтенд

​Шпаргалка по CSS

CSSReference.io — это бесплатное визуальное руководство по CSS. Здесь собраны примеры для каждого свойства и их детальное объяснение в виде диаграмм и иллюстраций:

https://cssreference.io/

#css #веб

Советы, которые помогут увеличить скорость загрузки страницы

Ни для кого не секрет, что на скорость страницы влияет множество факторов. Однако сделать сайт быстрым и удобным для пользователей — актуальная задача для любого разработчика.

Для начала можно улучшить скорость загрузки страницы оптимизируя HTML-код и CSS-файлы. В этой статье автор собрал несколько советов, которые помогут улучшить производительность страницы только за счёт CSS и HTML:

https://levelup.gitconnected.com/html-css-features-tips-for-a-10x-fast-page-loading-speed-5fb6c2d88df8

#html #css

​Браузерные игры, которые помогут легко изучить CSS

1. Flexbox Froggy — с помощью подсказок нужно помочь группе лягушек добраться до их кувшинок. На каждом уровне нужно выбрать какое свойство CSS использовать.

2. CSS Diner — в игре даётся таблица блюд, HTML форма и таблица с элементами. Игроку нужно подготовиться к ужину и разместить все предметы. Эта игра отлично подойдёт для изучения CSS селекторов.

3. Flexbox Defense — классическая игра жанра Tower Defense. Вам нужно отбить свою базу от врагов, расставляя защитные башни с помощью знаний в CSS.

#css

​Десять советов по улучшению CSS-переходов и анимации

Одни анимации и переходы только украшают приложение — другие делают его хуже. Пользователи могут не понимать, что такого особенного в переходах или анимации, но они могут чётко определить разницу между хорошим и плохим.

Как избежать негативных отзывов при создании собственных виджетов? В этой статье автор собрал советы и рекомендаций для CSS анимаций :

https://joshcollinsworth.com/blog/great-transitions

#css

#css #tip by David Mraz

Пример кастомных курсоров на CSS.

​Создание часов с помощью новых тригонометрических функций CSS sin() и cos()

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

В этой статье вы познакомитесь с тригонометрическими функциями CSS и даже создадите с помощью них первый проект:

https://css-tricks.com/creating-a-clock-with-the-new-css-sin-and-cos-trigonometry-functions/

#css

​Руководство по наложению изображений в CSS

Обычно мы создаём наложения в CSS, чтобы получить изображения за текстом, значками или другими изображениями. Это руководство покажет вам, как красиво наносить слои как на фоновые изображения, так и на обычные <img> элементы в CSS. 

Подробнее:

https://blog.logrocket.com/guide-image-overlays-css/

#css #фронтенд

SnipCSS — инструмент для извлечения CSS из веб-компонентов

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

При этом вы также можете заменить любой авторский текст, изображение и SVG на данные, сгенерированные AI, или иконки под лицензией MIT

Стоимость: #бесплатно (но есть платные тарифы)

#CSS #web #code

CSS Selectors/Combinators Classifier — классификатор селекторов и комбинаторов CSS

Он предназначен для организации и выделения селекторов и комбинаторов CSS по типам

Особенностью инструмента является возможность быстро и эффективно группировать и классифицировать селекторы CSS, что помогает упростить процесс написания и отладки CSS-кода

Стоимость: #бесплатно

#CSS #web #code

Best CSS Button Generator — генератор олдовых стилей кнопок на CSS

Сервис предлагает удобный интерфейс для дизайна кнопок, которые легко интегрируются с различными фреймворками и библиотеками

Вы можете выбрать из 30+ предопределённых стилей или цветовых тем, которые затем можно легко настроить, чтобы они соответствовали интерфейсу вашего сайта

Стоимость: #бесплатно

#CSS #web

Pure CSS Tic-tac-toe

Игра крестики-нолики. Написана на чистом CSS.

#css

https://codepen.io/ziga-miklic/pen/QWrGyW

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

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

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

Десять советов по улучшению CSS-переходов и анимации

Одни анимации и переходы только украшают приложение — другие делают его хуже. Пользователи могут не понимать, что такого особенного в переходах или анимации, но они могут чётко определить разницу между хорошим и плохим.

Как избежать негативных отзывов при создании собственных виджетов? В этой статье автор собрал советы и рекомендаций для CSS анимаций:

https://joshcollinsworth.com/blog/great-transitions

#css

Большая и интерактивная шпаргалка по CSS

Эта шпаргалка не просто список параметров, а наглядный инструмент для работы с атрибутами и настройками. Ползунки и кнопки позволяют настроить значения, а итоговый CSS-код легко копируется. Включены параметры для работы с цветами, обводками, шрифтами, тенями, анимациями и многим-многим другим.

Такое терять нельзя

#шпаргалка #css #frontend

Glowing ring

Загрузчик с зеркальным эффектом, созданным при помощи теней, созданных CSS-свойством box-shadow.

#css

https://codepen.io/mortezasharifinia/pen/LYrMoQe