Категорія:CSS

Касадные таблицы стилей.

[class^=] – для части селектора с начала
[class*=] – в любой части
[class$=] – заканчивающиеся на...

После = писать часть селектора.
Кавычки не обязательны.
Вместо имени класса может быть ID.

• Знаете ли вы селекторы?
• 30 CSS селекторов, которые вы должны запомнить
• Комплексные селекторы | WebReference

• caniuse.com — Support tables for HTML5, CSS3
• Browser Default Styles

Калькулятор пропорционального изменения размера

• Proportional Scale Calculator
• Proportional image width height calculator — дает список размеров с шагом в 1 или 10 пикселей
• Online Proportion Wheel — показывает прямоугольники старого и нового размера

Critical CSS

• Извлекаем критический CSS — Веб-стандарты
• Critical Path CSS Generator

Градиенты и тени

• Smooth shadow generator
• CSS Gradient Generator

Иконки

• IcoMoon App — создание набора SVG иконок

Картинки

• Responsive Image Breakpoints Generator
• https://shrinkme.app — быстрая оптимизация картинок
• https://squoosh.app/ — тщательная оптимизация, включая конвертирование в WebP
• SVGOMG — оптимизация SVG

Шрифты

• Font style matcher — сравнение стандартного и кастомного шрифта, чтобы добиться минимального FOUC
• Modular Scale — рассчет сетки размеров шрифтов, чтобы получить гармоничный вертикальный ритм
  • в поле Bases меняется размер шрифта основного текста в пикселях,
  • в поле Ratio — шаг, с которым увеличивается и уменьшается шрифт
• GlyphHanger — оптимизирует шрифты, убирая неиспользуемые глифы, и создет WOFF и WOFF2 файлы для повышенной совместимости. Описание на русском

Спецсимволы

• HTML Arrows
• Character Entity Reference Chart
• Typography Cheatsheet

Анимация

• Шпаргалка функций плавности (easing)
• Bezier curve generator

Локальный сервер

• ngrok - secure introspectable tunnels to localhost

Соцсети

• Social Media Sharing Buttons — No JavaScript. No tracking. Super fast and easy.

huijing/blank-html5 — Blank HTML5 template for experiments and stuff — Gulp + SASS

git clone https://github.com/huijing/blank-html5.git
cd blank-html5
npm install

• Picturefill
  • Как использовать HTML "picture" для адаптивных изображений

• Липкая шапка таблицы на CSS

• CSS-Only Accessible Dropdown Navigation Menu — dev.to

• ITCSS: Scalable and Maintainable CSS Architecture

• Buttons
• Arrows
• Floating Label
• Единицы измерения: "px", "em", "rem" и другие
• png-pixel.com — Transparent PNG Pixel Base64 Encoded
• Online Image to Base64 Converter
• How to add a divider between menu items in css using only one selector - Jack Reichert
• Accessible, Simple, Responsive Tables | CSS-Tricks
• Tools I use for front-end dev - DEV Community 👩‍💻👨‍💻