Берлога программиста | Веб и не только

Ghost Pill Кнопка с линейной градиентной рамкой и градиентным фоном при наведении, реализованная на чистом CSS. #кнопка #градиент #hover #css 👉 @frontend_trends

Responsive/Adaptive cut corners Кнопка с адаптивными срезанными углами, реализованная с помощью CSS и JavaScript. #кнопка #css #javascript 👉 @frontend_trends

Magnified Nav Items Навигационные элементы, увеличивающиеся при активном состоянии. Реализованы с помощью CSS и JavaScript. #навигация #css #javascript 👉 @frontend_trends

Знакомо чувство, когда сайт сделан, все работает, как ты хочешь, но проверяешь этот сайт в Lighthouse или Google PageSpeed Insights и видишь желтые или того хуже красные цифры? Ещё страшнее, когда в эти цифры тебя тыкает заказчик или руководитель проекта, или вообще твой прямой начальник. Стыдно, страшно, и потом неделю исправляешь. А вот создатели канала perfScan разбираются в скорости загрузки сайтов, так как на коммерческой основе уже 5 лет консультируют в теме WEB Performance, ускоряют сайты и разрабатывают быстрые сайты самостоятельно. Подписывайся на канал, и получай примеры кода, готовые разработки, кучу лайфхаков и полезных мелочей, внедрив которые сайт станет заметно быстрее. @perfScan

Profile Card UI Пользовательский интерфейс карточки профиля, реализованное с помощью CSS и JavaScript. #карточка #css #javascript 👉 @frontend_trends

App Admin Menus Меню админ-панели со светлым и темным режимом, реализованное с помощью Tailwind.css. #меню #панельуправления #tailwindcss 👉 @frontend_trends

Product Card Animation Анимация карточки товара, реализованная с помощью CSS и JavaScript. #карточка #анимация #css #javascript 👉 @frontend_trends

3D Leaf Heart 3D-сердце из листьев с анимацией вращения при передвижении курсора мыши. Реализовано с помощью CSS и JavaScript. #анимация #3D #css #javascript 👉 @frontend_trends

Face Grid Track Сетка лиц, следящие за движением курсора мыши. Реализована с помощью JavaScript и CSS. #grid #css #javascript 👉 @frontend_trends

Accordion POC Карточки, раскрывающиеся в виде аккордеона при наведении. Реализованы на чистом CSS. #карточки #аккордеон #css 👉 @frontend_trends

Art directed paragraphs Абзацы для заголовка и основного текста, реализованные на чистом CSS. #текст #css 👉 @frontend_trends

Invert text on scroll Инверсия текста при прокрутке страницы, реализованная с помощью CSS-переменной, GSAP и ScrollTrigger.js. #css #текст #ScrollTrigger #gsap 👉 @frontend_trends

FIT TEXT Анимация текста, реализованная на чистом CSS. #анимация #css #текст 👉 @frontend_trends

Navbar Навигационная панель, реализованная на чистом CSS. #navbar #css 👉 @frontend_trends

Cascades Анимация каскада цветных частиц, реализованная с помощью Pixi.js и Zepto.js. #анимация #zeptojs #pixijs 👉 @frontend_trends

Progress Clock Часы с анимацией прогресса месяца, дня, часов, минут и секунд. Часы реализованы с помощью CSS и JavaSript. #анимация #css #javascript 👉 @frontend_trends

NFT Dashboard Адаптивная панель управления, реализованная с помощью React и Tailwind.css. #панельуправления #react #tailwindcss 👉 @frontend_trends

Всем привет! Ребята создали чат-бота Masterhub, который рассылает разработчикам релевантные Frontend вакансии без спама.  Настрой бота за 1 минуту и получай до 50 вакансий в неделю, отобранных по твоим предпочтениям. @MasterHuBot

3D Stopwatch Функциональный и адаптивный 3D-секундомер, реализованный на чистом CSS. #3D #анимация #css 👉 @frontend_trends

Inspired by Bridget Riley #3 Анимация этюда для шаттла (1964) Бриджита Райли, реализованная с помощью CSS и JavaScript. #анимация #css #javascript 👉 @frontend_trends