В этом посте разберем способ добавить аккуратную всплывающую подсказку к кнопке или иконке полностью на 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
👍29❤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
❤29🔥11👍9🤝2
Эта шпаргалка по ключевым приёмам работы с RegExp: квантификаторы, группы, классы символов, флаги и проверки начала или конца строки. Подойдёт для валидации данных, парсинга текста и оптимизации поиска.Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥24👍11❤8
В этом посте - эффектный приём, который позволяет переворачивать карточку при наведении только средствами html/css. Идеально подходит для подсказок или скрытого превью.
Как работает:
• Используем контейнер с перспективой, чтобы задать 3D эффект.
• Cоздаём «внутреннюю» обёртку, которая вращается.
• Стороны карточки располагаем в одной плоскости и скрываем заднюю.
• При наведении карточка поворачивается, открывая обратную сторону.
Приём легко кастомизируется: можно добавить текст, иконки или даже интерактивный контент.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥40❤15👍14
Привет! В этом гайде создадим меню, которое появляется по правому клику мыши с кастомным дизайном.
Ключевые моменты:
• HTML: контейнер и список элементов меню.
• CSS: стиль меню и hover эффекты.
• JS: обработка события contextmenu и позиционирование под курсором.
Подходит для интерактивных панелей управления, редакторов и UI с кастомной логикой.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤24👍13🔥9🤝4
This media is not supported in your browser
VIEW IN TELEGRAM
Настоящая находочка для тех, кто пишет HTML, CSS, JavaScript, интересуется новинками Web API, продуктивностью и доступностью. Здесь регулярно появляются статьи, гайды и приёмы, которые реально прокачивают ваш фронтенд-скилл.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤14🔥10👍8😁1
Простой парсер погоды с выводом текущей температуры!
Напишем скрипт, который берет данные о погоде в вашем городе и выводит их в удобном виде.
Задаем функцию, которая получает данные с API Open-Meteo:
Координаты вашего города (например, Москва):
Выведем температуру и скорость ветра:
🔥 Получаем свежие данные о погоде — полезно для проектов или ботов!
📣 Code Ready | #практика
Напишем скрипт, который берет данные о погоде в вашем городе и выводит их в удобном виде.
Задаем функцию, которая получает данные с API Open-Meteo:
async function getWeather(lat, lon) {
const url = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}¤t_weather=true`;
const res = await fetch(url);
return (await res.json()).current_weather;
}Координаты вашего города (например, Москва):
const moscowCoords = [55.45, 37.37];
Выведем температуру и скорость ветра:
getWeather(...moscowCoords).then(weather => {
console.log(`Температура: ${weather.temperature}°C, Ветер: ${weather.windspeed} км/ч`);
});🔥 Получаем свежие данные о погоде — полезно для проектов или ботов!
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥24👍19❤13