SpinKit — коллекция симпатичных анимаций загрузки на CSS

Как и многие классные инструменты, этот позволяет крайне просто и удобно интегрировать красивые анимации загрузки в свой веб-проект

У каждого варианта доступны исходные CSS- и HTML-коды

Также у проекта есть GitHub-репозиторий, на котором можно найти инструкцию по установке SpinKit через npm

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

#css #web #анимация

Flexplorer — онлайн-песочница для экспериментов с CSS flexbox

Здесь имеется множество настроек, которые можно подкрутить и увидеть результат сразу же на сайте

При этом концепт Flexbox сам по себе позволяет быстро создавать гибкие и адаптивные макеты. Поэтому Flexplorer может сильно помочь в вашей прокачке в качестве веб-разработчика

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

#web #css

CSS Grid Generator — онлайн-инструмент, который позволяет быстро создать нужную CSS-сетку

Утилита сильно облегчает жизнь веб-разработчика — просто укажите количество столбцов и строк, после чего сервис автоматически сгенерирует сетку на основе этой информации

Упростить задачу ещё больше вряд ли получится

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

#web #css

CSS Layout Generator — веб-инструмент для создания макетов CSS с возможностью экспериментировать с ними

Сервис позволяет визуально настраивать каждый компонент вашего макета, получая полный контроль над его внешним видом

По своей сути, CSS Layout Generator является настоящим спасением для всех веб-разработчиков, которые хотят быстро и эффективно создавать уникальные макеты с использованием CSS

И вы можете воспользоваться всеми его возможностями без каких-либо ограничений или скрытых платежей

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

#web #css

CSS.gg — гигантская библиотека иконок для веб-разработки

На сайте можно найти более 700 иконок в формате CSS, которые легко встраиваются в веб-проекты без необходимости загружать отдельные изображения

При этом вы без труда можете изменять их цвет, размер и даже стиль иконок, адаптируя под свои потребности

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

#web #иконки #CSS

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

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

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

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

#CSS #web #code

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

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

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

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

#CSS #web #code

LiveCSSPlay — пошаговое применение CSS к вашему HTML

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

Далее вы можете наблюдать, как ваш HTML-документ стилизуется шаг за шагом

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

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

#CSS #HTML #web

PlayCSS — ежедневные вызовы для улучшения навыков CSS

PlayCSS предлагает ежедневные задачи по воссозданию изображений с использованием чистого CSS

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

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

#CSS #web

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

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

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

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

#CSS #web

Wind Basics — Astro.js и Tailwind CSS темы под лицензией Creative Commons

На платформе представлены различные темы, такие как Myfolio, Saasify, Propath, Itsme, Appify, Agency и Spotless, которые доступны для бесплатного скачивания

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

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

#темы #web #CSS

NeoBrutalismCSS — новый взгляд на веб-дизайн

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

Инструмент создан с акцентом на простоту, позволяя избавиться от сложности изучения множества имён классов, как в других фреймворках

Он следует минималистичному подходу, применяя основные стили, основанные на семантике HTML, что делает его удобным для быстрого начала работы и создания современной, необруталистской эстетики

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

#web #CSS

Code2Color — визуализация цвета в коде

Сервис поддерживает множество форматов цветов, таких как HEX, RGB, RGBA, HSL, HSLA и т.д

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

Преимущество инструмента — его способность помочь пользователям лучше понимать и визуализировать цвета в коде, что может быть особенно полезно при работе с CSS или при проектировании пользовательского интерфейса

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

#web #CSS
​.

CSS Transform Visualizer — интерактивная визуализация CSS-трансформаций

Инструмент позволяет лучше понять различные функции трансформации в CSS. А это значит, что эксперименты с 2D и 3D анимациями будут чаще успешны, чем наоборот

Речь идет о таких трансформациях, как поворот, масштабирование, перенос и наклон

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

#CSS #web #code

Load Awesome — коллекция красивейших CSS-анимаций загрузки

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

Каждая анимация на сайте выполнена с вниманием к деталям, обеспечивая гладкость и профессиональный вид.

Эти анимации легко интегрируются в любой веб-проект, благодаря использованию чистого CSS без необходимости JavaScript

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

#web #CSS

Animista — гигантская библиотека CSS-анимаций

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

Отличный вариант для веб-дизайнеров и разработчиков, которые хотят добавить динамичность и интерактивность в свои проекты

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

#CSS #web

​​Учимся делать CSS-анимацию за 20 минут

Существует два способа: переходы (transitions) и анимации (animations). Как их использовать, как создавать собственные библиотеки переходов и какие есть подводные читайте статье: https://tproger.ru/articles/kak-nauchitsya-animaciyam-v-css-za-2-minut

#web #CSS

MightyMeld — набор предварительно настроенных компонентов, которые полностью совместимы с Tailwind CSS и React

Просто выбираете нужный объект из большой библиотеки шаблонов, перетаскиваете его на рабочую панель и настраиваете под свои нужды. В проекте есть встроенный ИИ ассистент.

Стоимость: #бесплатно, есть платная подписка

@prog_tools #web #css #frontend

​​​Изучаем CSS Flex и Grid в фэнтезийном путешествии

Если хотите отточить свои навыки в позиционировании объектов с помощью флексов и гридов, при этом с интересным сеттингом, то вы по адресу. На сайте codingfantasy.com вы можете отправить в путешествие и помочь королю Артуру бороться со злом, используя Flex Box или спасти эльфа из лап демонов с помощью CSS Grid.

Уровней достаточно, чтобы стать настоящим CSS-гуру, проверьте сами: https://codingfantasy.com/games

#css #игры

Анимированное руководство по CSS flex

flex — свойство в CSS, определяющее способность элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства.

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

#frontend #css #ru