В этом посте — современный способ показать пользователю, что контент загружается, ещё до получения данных. Скелетон-лоадер улучшает UX и не требует JavaScript — всё работает на чистом CSS.
Как работает:
• Используем linear-gradient и keyframes для создания эффекта “бегающей” заливки.
• Стили применяются к заглушкам (.skeleton), которые имитируют структуру контента.
• Такой лоадер можно вставить в карточки, списки, таблицы, формы — и это уже продакшн-решение.
Особенно полезно при загрузке API-данных, карточек товаров, постов и аватаров
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤29👍13🤝6🔥2😁1
Привет! В этом гайде сделаем собственные уведомления — лёгкие, стильные и с анимацией появления/исчезновения.
Ключевые моменты:
• HTML: контейнер + кнопка для запуска сообщения.
• CSS: позиционирование, плавный сдвиг и прозрачность.
• JS: создание и удаление уведомлений по таймеру.
Подходит для подтверждений, ошибок и любых UI-статусов в реальном времени.
Please open Telegram to view this post
VIEW IN TELEGRAM
🤝29🔥12❤6👍6
В первой части
мы рассмотрели наиболее базовые методы. Во второй части — углублённые методы для навигации, клонирования, вставки и удаления элементов. Они помогают эффективно управлять структурой DOM и оптимизировать работу с интерфейсом.Please open Telegram to view this post
VIEW IN TELEGRAM
🔥36❤11👍8🤝1
This media is not supported in your browser
VIEW IN TELEGRAM
Оно сообщает браузеру, нужно ли применять стили ключевых кадров до или после проигрывания анимации.
Как пишется:
• none — значение по умолчанию.
• forwards — после анимации элемент сохраняет стили последнего кадра.
• backwards — до начала анимации применяется стиль первого кадра.
• both — сочетает forwards и backwards: до старта — первый кадр, после завершения — последний.
Особенно полезно при вступительных анимациях, скрытии элементов или визуальном подтверждении действий.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤24🔥12👍8
This media is not supported in your browser
VIEW IN TELEGRAM
Markdown Table Prettifier — плагин, который автоматически форматирует таблицы в тексте. Очень удобно: сразу видно, как выглядит таблица, без постоянного переключения на превью.
Особенно помогает при написании документации и любых текстов с таблицами — комфортно и быстро.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤20👍9🔥7🤝1
Привет! В этом гайде создадим карточки с плавной анимацией, увеличением при наведении и динамическим добавлением через JavaScript.
Ключевые моменты:
• HTML: контейнер с карточками и кнопкой внутри.
• CSS: тень, плавный масштаб и адаптивное расположение.
• JS: добавление новых карточек без перезагрузки страницы.
Подходит для витрин товаров, портфолио или информационных блоков.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥29👍10❤6🤝2
👍20🔥8❤5👎1