Привет! В этом гайде создаём современную шапку сайта, которая меняет прозрачность при прокрутке страницы.
Ключевые моменты:
• HTML: семантическая шапка и контентные блоки.
• CSS: пастельные цвета, плавные переходы и стеклянный эффект.
• JS: отслеживание скролла и динамическое управление классами.
Подходит для лендингов и адаптивных сайтов, где важен акцент на визуальные эффекты и удобство пользователя.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍30❤10🔥9
Шпаргалка по ключевым методам Map, Set, WeakMap и WeakSet: создание, добавление, чтение, проверка и управление уникальными значениями. Подойдёт для эффективного хранения данных, приватных полей объектов и оптимизации структуры сложных приложений.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤20👍11🔥9
This media is not supported in your browser
VIEW IN TELEGRAM
Быстрый и наглядный способ собрать Grid или Flexbox-layout: выбирай схему, настраивай параметры и сразу получай готовый CSS-код. Подходит для прототипов, адаптивных макетов и production-верстки.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥20👍8❤6🤝2
This media is not supported in your browser
VIEW IN TELEGRAM
Тег
<legend> добавляет заголовок в <fieldset>, который по умолчанию оформляется браузером как текст, органично вписанный в рамку.Особенности:
• Обычно отображается в начале рамки <fieldset>
• Может содержать текст, HTML-форматирование или вложенные элементы.
• Улучшает семантику и восприятие формы.
Так пользователи и вспомогательные технологии сразу видят, что поля относятся к одной группе.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤21👍11🔥7🤝1
В этой статье:
• Реализована поддержка формул с использованием библиотеки HyperFormula;
• Добавлено условное форматирование с учётом строгой типизации столбцов;
• Интегрирован функционал построения графиков с использованием Chart.js;
• Рассмотрены возможности кастомной интеграции в другие приложения и расширения функционала.🔊 Продолжай чтение на Habr!
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13🔥6🤝6❤2
В этом посте разберем способ добавить аккуратную всплывающую подсказку к кнопке или иконке полностью на html/css. Пользователь получает мгновенный визуальный отклик при наведении.
Как этой работает:
• Скрытый блок .tip появляется при наведении на .tooltip через селектор :hover.
• Используем transform: scale() и opacity для плавного проявления подсказки.
• Легко вставляется в формы, таблицы, интерфейсы и кнопки действий.
Такой приём улучшает UX без лишнего кода!
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤21👍10🔥7👎1
Псевдокласс
:visited добавляется ссылкам, по которым уже переходил пользователь.Возможные значения:
• color — можно задать отдельный цвет для посещённых ссылок.
• background-color, outline, border-color — тоже разрешены.
Браузер отслеживает, по каким ссылкам на странице кликнул пользователь, и подставляет фантомный класс
:visited тем из них, по которым был совершён переход на другую страницу.Please open Telegram to view this post
VIEW IN TELEGRAM
👍28❤6🔥6😁1
Привет! В этом гайде создаём звёздный рейтинг, где каждая звезда — интерактивная кнопка, а подпись оценки меняется динамически.
Ключевые моменты:
• HTML: кнопки <button> с data-value и aria-label.
• CSS: hover-анимация, подсветка и масштабирование.
• JS: подсветка, фиксация оценки и динамическая подпись.
Подходит для отзывов, профилей пользователей и интерактивных интерфейсов.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤28🔥11👍9🤝2