✅ CSS индикаторы загрузки

Наткнулись на статью, где автор отрисовал сотню индикаторов загрузки.

Берем и пользуемся. Даже если не потребуется сам индикатор, можно глянуть реализацию анимаций, их тут уйма

Ссылка на статью

#css #bundle

✅ Новое в CSS 2023

11 мая гугл выпустил статью о нововведениях в css.

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

Из интересного:
- @ container element - новый медиа запрос. Очень крупное нововведение. Позволяет применять стили относительно размеров РОДИТЕЛЬСКОГО элемента. И неограниченно по вложенности. Допустим, мы хотим поменять стили у элементов, у которых родитель имеет минимальную ширину в 200px или родитель родителя имеет конкретный размер. Теперь адаптивка заиграет новыми красками, подробнее тут

- @ container style - аналогичен первому пункту, только проверяет определенные стили, а не размеры, данный пункт еще очень сырой, в сафари и лисе еще даже не ввели поддержку.

- :has() - новый селектор. Позволяет определить содержит ли родительский элемент дочерние элементы с определенными параметрами, которые перечисляются в скобках. Подробнее

- initial-letter позволяет определить место, занимаемое первой буквой в параграфе (буквицы). Через свойство задается размер и смещение. Выглядит красиво.

- Новые динамические единицы размеров: svh и svw, lvh и lvw, dvh и dvw. В статье приведены хорошие примеры.

- color-mix - функция смешивания цветов. Теперь можно просто взять цвет и добавить к нему прозрачности (например, через переменную). Те, кто работал с палитрами в проекте оценят всю прелесть нововведения)

- ВЛОЖЕННОСТЬ - пока все очень сыро и плохая поддержка, но надобность в препроцессорах может очень сильно уменьшиться. Это, по сути, базовая вещь для чего подобные инструменты используются. Ждем.

Там еще много чего, например, scope, cos, sin и т.д.

Пост на chrome.com на английском

#css #news

✅ Preline UI

Набор компонентов с использованием Tailwind CSS. Простенько, но красиво.

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

Есть инструкции по установке с разными фреймворками

Страничка на productHunt
Ссылка на либу

#lib #js #css #tailwind #vue #react

✅ DaisyUI 3

На днях релизнулась новая версия библиотеки компонентов для Tailwind css. (Библиотека для библиотеки))

Поправили ошибки и баги. Добавили несколько новых функций и улучшений:
- Новые компоненты загрузки
- Новые темы
- и т.д.

Для информации, либа позволяет сокращать полотна с перечислением классов tailwind css.

Ссылка на релиз
Сайт DaisyUI

#css #tailwind #lib #news

✅ Uiverse 2.0

Под конец года обновился сайт с пользовательскими элементами, чем-то похож на codesandbox и прочие, только тут все заточено конкретно под ui.

Выбираем элемент - получаем готовые html/css. На productHunt этот ресурс высоко оценили.

Ссылка на сайт | Ссылка на productHunt

#html #css #news

✅ 12 обновлений css

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

aspect-ratio: 16/9;

Соотношение сторон. Контент имеет приоритет, использовать можно, например, для задания соотношения сторон для видео.

/* До */
margin-left: auto;
margin-right: auto;

/* После */
margin-inline: auto;

Сокращение для боковых отступов. Много раз видел применение новых свойств по отступам. Но до сих пор не могу отвыкнуть от базовых padding и margin

width: fit-content;

Ширина подстраивается под контент.

text-underline-offset: 0.25em;

Смещение линии подчеркивания у текста. Так же есть свойства для изменения цвета и толщины линии.

Статья на английском

#css #html

✅ Frontendchecklist

Контрольный список для сайтов, которые улетают в продакшен. Начиная с HTML заканчивая SEO.

Сайт | Репозиторий

#html #css #seo

✅ Генераторы, песочницы и css рецепты

1. 10015.io
10 CSS генераторов

2. Glassmorphism Generator
Генератор эффекта стекла (глассморфизм/стекломорфизм). Результат можно лицезреть на изображении к этому посту

3. Shadows by Brumm.af
Генератор теней

4. Hamburgers by Jon Suh
Гамбургеры на любой вкус и эффект

5. Easing Gradients by Larsenwork
Маленький генератор градиентов

6. Neumorphism.io
Неоморфизм: исключительно, чтобы посмотреть, что это такое, и никогда не использовать

7. CSS Buttons
Набор готовых кнопок с анимацией

8. Animista
Большое количество готовых анимаций

Ссылка на статью

#css #junior

✅ CSS-in-JS JS-from-CSS

Если вы когда-нибудь мечтали писать только css и ничего больше - то эта библиотека для вас! Пишем css - получаем react компоненты. Есть поддержка Tailwind.

Цитата с сайта:

Когда ваш код станет чище, вы, скорее всего, почувствуете себя более расслабленно

Ссылка на библиотеку

#js #news #react #css

✅ 3D эффект на тексте с React Three Fiber

Может показаться немного бесполезным, но выглядит прикольно.

Для любителей красивых эффектов.

🇺🇸 Ссылка на статью

#js #react #css #design #threejs