Всем привет! Сегодня разберём, как сделать плавное переключение между светлой и тёмной темой на чистом HTML, CSS и JavaScript.
Ключевые моменты:
• HTML: структура переключателя
• CSS: анимация и смена темы через переменные
• JavaScript: логика сохранения выбора с localStorage
🔥 — если хочешь побольше подобного
🤝 — если уже делал что-то похожее
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥84🤝14👍12😁4❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Если изменение разрешено — в углу элемента появляется специальная иконка (похожая на треугольник), за которую можно потянуть и изменить размер в нужном направлении.
Варианты значений:
• none — размеры изменить нельзя (значение по умолчанию).
• both — можно менять и по ширине, и по высоте.
• horizontal — размер можно изменять по горизонтали.
• vertical — размер можно изменять по вертикали.
Есть и экспериментальные:
• block — изменение в блочном направлении.
• inline — изменение в строчном направлении.
Дайте пользователю свободу — но с умом. Не каждый блок должен тянуться во все стороны, иначе дизайн может "поплыть".
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥23👍14🤝5❤1
This media is not supported in your browser
VIEW IN TELEGRAM
OverAPI — это справочник для быстрого поиска синтаксиса и примеров по множеству языков и технологий, удобный для фронтенд разработчиков, работающих с HTML, CSS, JavaScript, и не только.
📌 Ссылочка: overapi.com
📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍19🔥13❤1
Например,
git push
отправляет твои изменения на сервер, а git checkout
позволяет быстро переключаться между ветками.На картинке — 12 самых нужных команд, которые стоит держать под рукой.
Сохрани, чтобы не забыть!
Please open Telegram to view this post
VIEW IN TELEGRAM
👍32🔥12🤝6❤1
С его помощью можно задать регулярное выражение, которому должно соответствовать введённое значение.
Особенно полезен, когда вы хотите контролировать формат: телефон, пароль, ссылка — всё это можно заранее «обрисовать» через pattern.
Но не забудьте:
• Работает только с <input> и типами вроде text, tel, email, password и т.д.
• Проверка сработает только при отправке формы через <form>.
Бонус: можете добавить атрибут
title
, чтобы пользователь сразу понял, что не так.Главное — не усложняйте! Простые и понятные правила = довольный пользователь.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍38🔥11🤝7
В статье:
• Как с помощью HTML5 и CSS3 сделать переключение между формами через :target.
• Стильные анимации и иконки через data-атрибуты.
• Продвинутые стили форм и плавные переходы с использованием CSS3.
🔊 Продолжай читать на Habr!
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🔥9🤝8
Привет! Сегодня разберем, как сделать таймер, который отсчитывает время до указанного события (например, до конца распродажи), и по завершении показывает сообщение.
Результат:
На странице будет таймер вроде
00:00:10
, который уменьшает время каждую секунду и завершает обратный отсчёт.🔥 — если хочешь побольше такого
🤝 — если уже делал подобное
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥53👍16🤝11😁2
Практико-ориентированный курс по фронтенд-разработке, в котором вы создадите полноценные проекты с нуля. Курс охватывает HTML, CSS, JavaScript, работу с препроцессором Sass, а также подключение внешних библиотек и современные подходы к вёрстке и дизайну.
Ссылочка на плейлист: YouTube🖤
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13🤝6🔥5
🔥21👍10
This media is not supported in your browser
VIEW IN TELEGRAM
JSRobot — небольшая игра, в которой вам предстоит управлять роботом с помощью Javascript для преодоления препятствий и решения головоломок.
📌 Ссылочка: antemalkah.jsrobot
📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥23👍8🤝5
В этом посте — простой, но полезный приём, который можно внедрить в любой сайт или форму без JavaScript-файлов.
Как работает:
• При первом клике кнопка становится неактивной.
• Больше её нажать нельзя — предотвращает повторную отправку формы.
• Работает без JS-файлов, просто onclick.
Полезно при отправке форм и заказов — меньше багов, меньше повторов, больше контроля!
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥46👍21🤝8❤3😁1
This media is not supported in your browser
VIEW IN TELEGRAM
CodeRun — платформа для решения задач от Яндекса. Все задачи распределены по таким направлениям как фронтенд, бэкенд, машинное обучение, аналитика данных и мобильная разработка. Каждая задача имеет свой уровень сложности.
📌 Ссылочка: coderun.yandex.ru
📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
❤14🔥7
Proxy позволяет перехватывать базовые операции с объектами и функциями: чтение, запись, удаление, вызов и многое другое. Это инструмент, с которым можно гибко управлять логикой доступа и поведения объектов без изменения их структуры.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥49👍15❤8🤝5