CodePen Community
912 subscribers
17 photos
246 videos
331 links
Сообщество пользователей CodePen
加入频道
This media is not supported in your browser
VIEW IN TELEGRAM
Pure CSS Mario 64 - 3D - No JavaScript!

Mario следящий за положением курсора, выполненный с помощью SCSS, без использования JavaScript

https://codepen.io/ivorjetski/pen/abEBjKN

Подпишись👉 @codepen_1
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Hex/RGB Auto Color Converter in Vue

Конвертор цветов из HEX в RGB, выполненный с помощью SCSS и библиотеки Vue.js

https://codepen.io/collinsworth/pen/WNXxQVP

Подпишись👉 @codepen_1
👍4
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Card Hover Effects

Анимация при наведении на карточки, выполненная на чистом CSS, без использования JavaScript

https://codepen.io/Jhonierpc/pen/MWgBJpy

Подпишись👉 @codepen_1
👍6
This media is not supported in your browser
VIEW IN TELEGRAM
Little Gallery

Интерактивная галерея, выполненная с помощью CSS и JavaScript

https://codepen.io/yoann-b/pen/abEjWgq

Подпишись👉 @codepen_1
👍4
This media is not supported in your browser
VIEW IN TELEGRAM
Magic area on hover/focus

Эффект при наведении на элемент, выполненный с помощью SCSS и библиотеки GSAP.js

https://codepen.io/iamryanyu/pen/zYZGKqy

Подпишись👉 @codepen_1
This media is not supported in your browser
VIEW IN TELEGRAM
3D Gallery

Смена карточек с 3D-эффектом, выполненная с помощью SCSS и JavaScript

https://codepen.io/jsulpis/pen/GRMwBGR

Подпишись👉 @codepen_1
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
AI Art Generator

Генератор фото, выполненный с помощью SVG, CSS и JavaScript. Автор использовал нейронную сеть для "смешения" фото

https://codepen.io/Coderesting/pen/YzrOOzp

Подпишись👉 @codepen_1
👍1
Frontend meetup (Online)

1. Построение микрофронтендной архитектуры. Первый взгляд, боли и решения —Никита Морозов, АО "МТТ"
В докладе будет представлен путь построения микрофронтендной архитектуры на примере проекта МТС «Exolve», а также поэтапный рассказ об эволюции проекта от webpack до vite, от SingleSPA до собственного решения

2. Бьем монолит. Основные практики — Гузенко Александр IT_ONE
Рассмотрим основные подходы к разбиению монолитных фронтедов.

3. Безопасный TypeScript. Защищаемся от any в кодовой базе —Максим Земсков, Яндекс
Как получить максимум безопастности при использования TypeScript. Какие настройки стоит использовать и как улучшить типизацию стандартных функций.

4. Beyond Frontend — Алексей Тюльдюков, VK
Как T-shape подход может помочь фронтенд разработчику стать техническим менеджером

🗓 12 июля, начало в 19:00 мск, Среда

🚀 Телеграмм канал с анонсами митапов

Регистрация на мероприятие
This media is not supported in your browser
VIEW IN TELEGRAM
Light/Dark Toggle With Morphing Icon

Переключатель темы оформления, выполненный на чистом CSS, без использования JavaScript

https://codepen.io/jkantner/pen/eYygqJm

Подпишись👉 @codepen_1
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Menu Grid with Fixed Background

Сетка с анимированными блоками, выполненная с помощью SCSS и JavaScript

https://codepen.io/noahraskin/pen/JjrydbL

Подпишись👉 @codepen_1
🔥2👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Another Datepicker

Datepicker стилизованный под карту солнечной системы, выполненный с помощью SVG, SCSS и библиотеки GSAP.js

https://codepen.io/aaroniker/pen/MWQjxro

Подпишись👉 @codepen_1
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Sassy Search Bar 💁

Строка поиска с подсказками, выполненная с помощью SCSS и TypeScript

https://codepen.io/Hyperplexed/pen/xxXJbqq

Подпишись👉 @codepen_1
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Stripe Like CSS Only Menu

Выпадающее меню, выполненное на чистом CSS, без использования JavaScript

https://codepen.io/smpnjn/pen/VwKXdmy

Подпишись👉 @codepen_1
🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Recreating "Minimal keyboard" by Dibyajyoti Mishra

Виртуальная клавиатура, выполненная с помощью Pug, SCSS и JavaScript. Клавиатура реагирует на нажатие клавиш

https://codepen.io/Alca/pen/vYeyOwd

Подпишись👉 @codepen_1
This media is not supported in your browser
VIEW IN TELEGRAM
Kodama Generator

Генератор персонажа, выполненный с помощью SVG, CSS и JavaScript

https://codepen.io/pavlovsk/pen/rNYwKeo

Подпишись👉 @codepen_1
😁1
This media is not supported in your browser
VIEW IN TELEGRAM
"slide-in-from=" attribute

Анимированная шпаргалка по анимации, выполненная на чистом CSS, без использования JavaScript

https://codepen.io/MarkBoots/pen/BaJqKyY

Подпишись👉 @codepen_1
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Claymorphic SVG button

Анимированная кнопка, выполненная с помощью SVG, CSS и библиотеки GSAP.js

https://codepen.io/chrisgannon/pen/rNGqLmK

Подпишись👉 @codepen_1
This media is not supported in your browser
VIEW IN TELEGRAM
Neumorphic Fitbit UI

Интерфейс приложения, выполненный на чистом CSS и SVG, без использования JavaScript

https://codepen.io/jkantner/pen/poWxOVY

Подпишись👉 @codepen_1
🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Animated BottomBar Experiment (CSS Transitions only)

Набор анимированных tabbar'ов, выполненный с помощью SCSS и JavaScript

https://codepen.io/chrisbautista/pen/NWXjqLN

Подпишись👉 @codepen_1
👍52
This media is not supported in your browser
VIEW IN TELEGRAM
Text Alignment

Панель выравнивания текста, выполненная с помощью Pug и SCSS, без использования JavaScript

https://codepen.io/z-/pen/XWZgZxx

Подпишись👉 @codepen_1
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Infinite scrollable and draggable (WebGL)grid

Бесконечная сетка с возможностью прокрутки, выполненная с помощью SCSS и JavaScript

https://codepen.io/ReGGae/pen/eYGyLrP

Подпишись👉 @codepen_1
👍2