https://styles.refero.design/ — сайт-каталог корпоративных сайтов для каждого из которых есть описания и промты в виде design.md, Tailwind, CSS переменных и JSON токенов. Мне эта ссылка интересна не сколько описаниями для AI вёрстки, сколько тем что там собрано много качественных дизайнов с ясными превьюшками, каталогизацией и просмотром аналогичных дизайнов.
Разработчик Сергей Дмитриев опубликовал бесплатный курс «Обучение фулстек-разработке веб-сервиса с нуля».
Стек технологий: TypeScript, React, Vite, Node.js, pnpm, Express, tRPC, PostgreSQL, Prisma, Formik, Zod, Jest, Prettier, ESLint, Stylelint, SCSS, Husky, React Router, Cloudinary, AWS S3, MJML, CRON, Winston, Balsamiq, Sentry, Mixpanel, Cloudflare, Docker, DataDog, Heroku
«Цель обучения — создать проект с нуля, изучив и применив технологии и архитектуру, которые обеспечивают качество и масштабируемость вашего кода, скорость разработки, а также удовольствие и радость от процесса.»
Для оформления веб-страниц часто нужна тень. В CSS есть тень, которую назвали почему-то «box-shadow», которая создаёт тень как от плоского прямоугольника, которая выглядит как его размытая исходная форма, а, не как ожидается из названия, как тень от коробки (box).
При этом достаточно часто нужна псевдотрехмерная тень, которая имела бы имитацию высоты предмета — когда в близи от объекта тень имеет небольшое размытие, а на расстоянии уже размывается. Например, для кнопок или карточек, или для изображений, которым надо сделать тень, чтобы она выглядела не как тень от открытки, а как тень от книги, которая имеет высоту. Такая псевдотрехмерная тень сильно бы спасла дизайнеров и фронтенд-разработчиков, сейчас такой эффект или имитируется картинкой или набором из теней «размытых форм», что приемлемо выглядит только при имитации теней от объекта небольшой высоты.
И, соответственно, стоило бы назвать такие тени по их объёмности: тень, которая создается от плоского прямоугольника назвать «rectangle-shadow», а тень которая имитирует выдавливание прямоугольного параллелепипеда — «box-shadow».