💾 Ball – сфера в виде мяча с линиями из букв. Вращать фигуру можно только за специальную круглую кнопку.

Сайтодел | #сниппет #css

💾 Outlined Mobile Cards – карточки, которые в активном режиме становятся яркими. У каждой из них появляется цветная рамка с размытой полупрозрачной подсветкой.

Сайтодел | #сниппет #css

💾 A Garden – анимированная заставка с "живыми" цветами. Картинка двигается сама по себе и не реагирует на курсор.

Сайтодел | #сниппет #css

🎨 Цветовая палитра макета "Restaurant Reversion App"

HEX | RGB
#EDEDE5 | rgb(237, 237, 229)
#F27BF1 | rgb(242, 123, 241)
#8D8CF4 | rgb(141, 140, 244)

⚠️ Цвет копируется одним кликом!

Сайтодел | #палитра

🖥 Food Catering Service App – дизайн приложения для ресторана, выполненный в светлых оттенках салатового. Впечатление от дизайна - легкость, натуральность и забота о клиентах.

Сайтодел | #макет #figma

✍️ Luckiest Guy – жирный шрифт без засечек, созданный в стиле текстов американской рекламы 1950-х годов. Пример можно увидеть на обратной стороне карточки в сниппете Legally Distinct Pocket Pet

Сайтодел | #шрифт

💀 Они отжали последний копеечный фриланс...

С добрым утром, хорошего дня! 😎

🤔 Путь HTML/CSS — полезный ресурс для изучения верстки!

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

Оставляю ссылочку: GitHub 📱

📣 Code Ready | #репозиторий

💾 Dynamic Folding – плавный эффект сложения фотографии. При создании была использована библиотека Create.js.

Сайтодел | #сниппет #css

💾 Card Swipe Carousel – стопка карточек, которые нужно перетаскивать вправо и влево. От простого нажатия карточка остается на месте.

Сайтодел | #сниппет #css

🤨 Чувак просто загрузил одно 10 часовое видео с горящими дровами — и стал обеспечен на всю жизнь

Изи 😎

😳 Лайф | 📲 Зеркало Max

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

/ Пр0бuв по фото и номеру в ТГ
// Как взломать вебку подруги
/// Мануал по OSINT разведке

Ссылка действительна
23 ч. 59 мин. 👇
https://t.me/+mpeDqlACsfgxODJi

✍️ Stadt – современный геометрический гротеск, вдохновленный стилем баухаус. Он используется в карточках и подзаголовках дизайна Ray Ban Elegant Sunglasses Store App

Сайтодел | #шрифт

💾 Liquid Text Effect – текст с "жидким" эффектом и анимированным градиентом. Здесь используется библиотека WebGL.

Сайтодел | #сниппет #css

🐙 UI – репозиторий с примерами простых компонентов пользовательского интерфейса. Элементы написаны на React.js и Next.js.

Сайтодел | #репозиторий #github

👩‍💻 Тег для рисования графики и анимаций прямо в браузере!

Тег <canvas> добавляет растровый холст на страницу. Этот холст можно использовать для отрисовки 2D- или 3D-графики, анимаций, видео.

Он используется для:
• интерактивных графиков и диаграмм;
• анимаций и визуальных эффектов;
• браузерных игр;
• обработки изображений;
• 2D- и 3D-графики через Canvas API и WebGL.

Для работы с холстом обычно получают один из контекстов:
• 2d — обычная двумерная графика;
• webgl — аппаратно ускоренная 3D-графика.

Элементы, нарисованные внутри <canvas>, не являются отдельными DOM-элементами — браузер воспринимает их как единое изображение

📣 Code Ready | #атрибут

🖥 Figma Charts & Infographics UI Kit – набор готовых графиков и диаграмм. Содержит наиболее распространенные шаблоны визуализации данных, от простых столбчатых диаграмм до сложных карт.

Сайтодел | #макет #figma

Почему CSS-переменные раньше не анимировались?

Многие пытаются сделать так:
.box {
transition: --angle .3s;
}

Но обычная CSS-переменная — это просто строка. Браузер не знает, как плавно перейти от 0deg к 180deg, поэтому анимация не работает.

Регистрируем переменную через @property.
@property --angle {
syntax: "<angle>";
}

Теперь браузер знает тип значения и умеет интерполировать его.

Остаётся использовать переменную как обычно.
.box {
transform: rotate(var(--angle));
}

И менять её значение.
.box:hover {
--angle: 180deg;
}

Теперь поворот происходит плавно без JS.

🔥 @property превращает CSS-переменные из обычных строк в типизированные значения, которые можно валидировать и анимировать.

📣 Code Ready | #совет

🔴 Тестовое собеседование на Frontend-разработчика со старшим разработчиком ex. Сбер

13 августа(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика.

Как это будет:
📂 Даниил Дмитриев, старший разработчик в R-Vision, ex. Сбер, будет задавать реальные вопросы и задачи разработчику-добровольцу
📂 Даниил будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью
📂 В конце можно будет задать любой вопрос Даниилу

Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы.

Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot

Реклама.
О рекламодателе.