ВАЙЛТ™

#РецептКода

Pulse Balls Preloader

Прелоадер, напоминающий жонглирование - вид сверху. Реализовано с помощью CSS.

WEBIK | @gki_webik_ru

#Мем

WEBIK | @gki_webik_ru

#Тест

WEBIK | @gki_webik_ru

#РецептКода

Profile Card Hover Effect

Наведение на карточку с возможностью перехода на соцсети. Реализовано с помощью CSS.

WEBIK | @gki_webik_ru

#Мем

WEBIK | @gki_webik_ru

#Мем

WEBIK | @gki_webik_ru

#РецептКода

hover effect

Кубическая заливка кнопки при наведении на неё курсора мыши. Реализовано с помощью CSS.

WEBIK | @gki_webik_ru

View Transitions API 🤩

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

Теперь не нужно вручную прописывать сложные CSS- или JS-анимации — браузер сам создаёт плавный переход между старым и новым состоянием. Это экономит время и делает интерфейсы заметно приятнее.

Простейший пример:

document.startViewTransition(() => updateTheDOMSomehow());

Вызывается метод document.startViewTransition(), внутрь которого передаётся функция с изменениями в DOM. Всё остальное — на стороне браузера.

Как это работает?
Браузер "сохраняет" текущее состояние, выполняет изменения, сравнивает старую и новую версию и сам анимирует переход.

Особый интерес вызывает возможность подключить CSS-анимации через псевдоэлементы ::view-transition-old и ::view-transition-new. Это даёт больше гибкости: можно, например, задать эффект затухания для "старого" состояния и масштабирования для "нового".

💡 Небольшое демо с CSS-анимацией перехода: CodePen
📚 Документация на MDN и классная статья в блоге Chrome

WEBIK | @gki_webik_ru

В видео вспоминаем прошлое проекта WEBIK, говорим о настоящем, и показываем его будущее. Вот как всё начиналось, и вот, как все продолжится...

WEBIK | @gki_webik_ru

36 абстрактных 3D элементов, которые сгенерировала нейросеть. Доступны вам бесплатно в высоком качестве.

WEBIK | @gki_webik_ru

#Мем

WEBIK | @gki_webik_ru

#РецептКода

Interactive Radio Button Animation

Перемещение точки при выборе одного из вариантов. Реализовано с помощью CSS.

WEBIK | @gki_webik_ru

​​Полезный API для фронтенд - разработчика

Unsplash API — это простой JSON API с базой бесплатных и качественных изображений для разработчиков.

WEBIK | @gki_webik_ru

Cursor — это плагин с нейронкой, которую теперь можно вшить в Figma.

Работает через протокол MCP от Anthropic — пишете в чате «Нарисуй дизайн для экрана авторизации», Cursor пишет код, а вы получаете в Figma готовый проект.

Функционал почти безграничен — можно создавать макеты, двигать в них кнопочки и даже красить (!) в другой цвет.

⤷ Ознакомиться на сайте

#Мем

WEBIK | @gki_webik_ru

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

Мы регулярно публикуем актуальную информацию, эксклюзивные материалы и анонсы, которые помогут вам оставаться на шаг впереди. Будь то новые проекты, важные обновления или специальные предложения — вы узнаете об этом раньше всех. Пост выйдет намного раньше и приоритетнее чем в Telegram.

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

Не упустите шанс быть в центре событий — присоединяйтесь к нашему сообществу прямо сейчас!

Подписаться -> https://vk.com/gki_webik_ru

ВАЙЛТ™ pinned a photo