Берлога программиста | Веб и не только
Закрытый канал
Пригласить друга: https://t.me/+T3oGjyHRTAsxNWEy
Больше5 000
Подписчики
Нет данных24 часа
-167 дней
-13830 дней
Архив постов
Accessible Custom Toggle Switch
Отличная демонстрация того, как разметить и стилизовать семантический checkbox, чтобы он выглядел и вёл себя как toggle switch. Реализована с помощью CSS.
#чекбокс #переключатель #css
👉 @frontend_trends
Разбираетесь во фронтенд-разработке лучше других?
Тогда создайте свой собственный курс вместе HTML Academy!
Наиболее востребованные темы:
- TypeScript;
- FrontOps;
- CSS-in-JS;
- Unit-тестирование;
- Анимации на SVG;
- State-менеджеры;
- Веб-безопасность;
- Создание интерактивных карт с использованием API-сервисов.
Приходите в команду: https://tml.io/d8ak8
TOASTS
Пример реализации всплывающих уведомлений: информационное, предупреждающее уведомления и уведомление об успехе. Реализовано с помощью CSS и JavaScript.
#уведомления #css #javascript
👉 @frontend_trends
Cyberpunk 2077 Buttons
Кнопки Cyberpunk 2077 на чистом CSS. Glitch - эффекты автор реализовал с помощью CSS свойства clip-path.
#кнопка #css
Вам нравится читать контент на этом канале?
Возможно, вы задумывались о том, чтобы купить на нем рекламу?
Следуйте 3 простым шагам, чтобы сделать это:
1) Регистрируйтесь по ссылке: https://telega.in/c/frontend_trends
2) Пополняйтесь удобным способом
3) Размещайте рекламное сообщение
Если тематика вашего поста подойдет нашему каналу, мы с удовольствием опубликуем его.
Rating
Выставление рейтинга в виде звезд, анимация реализована с помощью библиотеки GSAP.
#рейтинг #gsap
Glassmorphing card
Карточка в стиле стекломорфизма с плавным 3D-наклоном при наведении, созданная с помощью библиотеки Tilt.js.
#стекломорфизм #карточка #tiltjs #3D
Верстка сайта из Figma это не сложно!
Автор канала ITDoctor выпустил 18 уроков с пошаговым объяснением как сверстать сайт по макету из Figma.
В этом бесплатном курсе: Подготовка проекта, Работа со шрифтами, Плагин Pixel Perfect, CSS Grid и Flexbox, Верстка сайта и адаптивной версии. Создание интерактивных элементов таких как меню, галерея и модальные окна. А так же домашнее задание в виде макета для Практики!
И много полезных, нюансов, лайфхаков, трюков с редактором кода и языками HTML, CSS, JS на канале ITDoctor.
Учись создавать сайты сегодня, не откладывай на завтра 👇🏻
Sale label
Несколько примеров реализации движущейся этикетки распродажи на чистом CSS.
#этикетка #css
Hopdot Loader
Плавный и приятный прелоадер в виде перекатывающихся точек, реализованный с помощью GSAP.
#прелоадеры #gsap
Day-Night toggle switch
Пример реализации переключателя "день-ночь" на чистом CSS.
#переключатель #css
👉 @frontend_trends
Custom Radio Buttons
Пользовательские радио-кнопки, выполненные на чистом CSS.
#радиокнопки #css
👉 @frontend_trends
Music player widget
Виджет музыкального плеера, реализован с помощью CSS и JavaScript.
#плеер #css #javascript
👉 @frontend_trends
React HSL Slider
Слайдер выбора цвета, реализован с помощью React. Использует цвета из библиотеки w3color.js
#слайдер #React #w3color
👉 @frontend_trends
Quickchat UI Themes
Адаптивная панель управления с темой пользовательского интерфейса Quickchat. Реализована с помощью JavaScript.
#ui #панельуправления #javascript
👉 @frontend_trends
Happy New Year
Чекбокс, при выборе которого происходит сложная анимация салюта, реализованная библиотекой GSAP.
#чекбокс #checkbox #GSAP
👉 @frontend_trends
Rolling Radio Buttons
Прокручивающиеся radio-кнопки, выполненные с помощью HTML, CSS и JavaScript.
#радиокнопки #css #javascript
👉 @frontend_trends
Animated BottomBar
Несколько вариантов анимаций нижней панели, реализованные с помощью CSS и JavaScript.
#анимация #tabbar #css #javascript
👉 @frontend_trends
2 DIV 3D dice
Анимация игральной объемной кости, реализованная с помощью двух тегов div на чистом CSS.
#анимация #css
👉 @frontend_trends
