Привет! В этом гайде создаём компактный аудио-плеер с кнопкой воспроизведения и плавным прогресс-баром.
Ключевые моменты:
• HTML: минимальная структура — кнопка Play/Pause и индикатор прогресса.
• CSS: чистое оформление, мягкая тень и плавные переходы.
• JS: логика воспроизведения, обновление прогресса и сброс состояния при окончании трека.
Такой мини-плеер отлично подойдёт для сайтов, блогов, портфолио или UI-демо, где важно добавить звук, сохранив лёгкость интерфейса.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍29❤13🔥10🤝4
This media is not supported in your browser
VIEW IN TELEGRAM
Хочешь пройти путь от основ до уверенного разработчика без скучной теории и бесконечного поиска информации? The Odin Project - это платформа, где обучение строится на практике: создаёшь полноценные сайты и приложения, реально прокачиваешь навыки фронтенда, бэкенда и даже DevOps.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13❤9🔥6🤝3
Когда выделяешь текст на сайте, браузер по умолчанию красит его голубым. Но можно полностью кастомизировать выделение.
::selection {
background: #ffcc00;
color: #111;
}Это псевдоэлемент, который управляет стилем только выделенного текста. Работает со шрифтами, цветами и даже с прозрачностью.
Делаем тему динамической:
[data-theme="dark"] ::selection {
background: #444;
color: #fff;
}Можно стилизовать и выделение в
input / textarea:input::selection,
textarea::selection {
background: #222;
color: #0ff;
}
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥25👍10❤9🤝1
Анимационный приём, создающий ощущение живого интерфейса. Каждая точка пульсирует с разной задержкой, формируя плавную волну света.
Как работает:
• keyframes glow управляет размером и прозрачностью точек, создавая эффект пульсации;
• animation-delay задаёт разный ритм для каждой точки, формируя плавную волну;
• box-shadow добавляет мягкое неоновое свечение для глубины.
Так с помощью простых свойств анимации и задержки можно создавать динамику интерфейса.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍26❤12🔥10
This media is not supported in your browser
VIEW IN TELEGRAM
Sort Lines — расширение, которое сортирует выделенные строки за секунду: по алфавиту, длине, в обратном порядке или даже уникальности. Работает с любым текстом, от JSON и env-файлов до списков классов в CSS.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥18👍10❤8
В этой шпаргалке собраны основные приёмы работы с Fetch API: выполнение запросов, обработка ответов, парсинг данных, проверка статусов, отмена через AbortController, а также использование объектов Request, Response и Headers. Fetch API — это способ выполнять HTTP-запросы без лишнего кода и сторонних библиотек.Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥27❤10👍6🤝4
This media is not supported in your browser
VIEW IN TELEGRAM
Это не просто учебник, а визуальная карта: ты вводишь тему, и сразу видишь список лучших ресурсов для погружения. Можно строить свой путь обучения. А ещё всё открыто и развивается сообществом. Отлично подходит, если не хочешь тратить время на бесконечный поиск информации.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥19👍10❤9🤝1
CSS умеет отслеживать, какой блок сейчас в зоне видимости:
section {
view-timeline-name: --reveal;
animation-timeline: --reveal;
animation-name: fade;
}Создаём временную шкалу для каждого блока при скролле.
Теперь можно анимировать появление или подсветку:
@keyframes fade {
0% { opacity: 0.2; }
50% { opacity: 1; }
100% { opacity: 0.2; }
}Эффект: блок становится ярче, пока он в центре экрана, и тускнеет, когда уходит за пределы вьюпорта.
Можно добавить плавный переход:
section {
transition: opacity 0.3s ease;
}Please open Telegram to view this post
VIEW IN TELEGRAM
🔥25👍12❤10