✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack
💾 Skeuomorphic Toggle Switch – реалистичные 3D-переключатели, которые написаны на HTML и CSS без использования JavaScript.
Сайтодел | #сниппет #css
💾 Skeuomorphic Toggle Switch – реалистичные 3D-переключатели, которые написаны на HTML и CSS без использования JavaScript.
Сайтодел | #сниппет #css
This media is not supported in your browser
VIEW IN TELEGRAM
✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack
💾 Header Navigation Menu – кнопка с раскрывающимся меню сайта. Ее иконка трансформируется в крестик с помощью вращения ее элементов вокруг центра.
Сайтодел | #сниппет #css
💾 Header Navigation Menu – кнопка с раскрывающимся меню сайта. Ее иконка трансформируется в крестик с помощью вращения ее элементов вокруг центра.
Сайтодел | #сниппет #css
✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack
🖥 Parallax Effect – дизайн для слайдера. Здесь представлены приглушенные оттенки, зернистый фон и мягкие градиенты. Контраст создан за счет крупных заголовков и небольших кусков текста.
Сайтодел | #макет #figma
🖥 Parallax Effect – дизайн для слайдера. Здесь представлены приглушенные оттенки, зернистый фон и мягкие градиенты. Контраст создан за счет крупных заголовков и небольших кусков текста.
Сайтодел | #макет #figma
✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack
💾 Hover Effect for Headers – восемь анимированных эффектов для заголовков слайдов. Некоторые из них влияют на отдельные буквы, а некоторые – на всё слово.
Сайтодел | #сниппет #css
💾 Hover Effect for Headers – восемь анимированных эффектов для заголовков слайдов. Некоторые из них влияют на отдельные буквы, а некоторые – на всё слово.
Сайтодел | #сниппет #css
✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack
🖥 Note-taking Mobile iOS App – дизайн приложения для заметок. Его особенности - это неяркие светлые тона, кремовый фон и скругленные углы.
Сайтодел | #макет #figma
🖥 Note-taking Mobile iOS App – дизайн приложения для заметок. Его особенности - это неяркие светлые тона, кремовый фон и скругленные углы.
Сайтодел | #макет #figma
✈️ Code Ready | Frontend
Если вы уже используете ChatGPT, Claude или Cursor в разработке, но всё равно большую часть работы делаете руками — вы используете ИИ далеко не на максимум.
25 августа Хекслет проведёт бесплатный воркшоп, где покажут, как встроить AI-агента непосредственно в процесс разработки.
За 2 часа на реальном репозитории:
— настроите контекст проекта и AGENTS.md;
— дадите агенту задачу от issue до готового кода;
— подключите тесты и CI;
— автоматизируете code review;
— подключите RAG и MCP для работы с документацией, тикетами и API.
В результате — не набор промптов, а готовый процесс работы с AI-агентом.
25 августа, 19:00
Бесплатно.
👉 Записаться на вебинар
#реклама
О рекламодателе
Если вы уже используете ChatGPT, Claude или Cursor в разработке, но всё равно большую часть работы делаете руками — вы используете ИИ далеко не на максимум.
25 августа Хекслет проведёт бесплатный воркшоп, где покажут, как встроить AI-агента непосредственно в процесс разработки.
За 2 часа на реальном репозитории:
— настроите контекст проекта и AGENTS.md;
— дадите агенту задачу от issue до готового кода;
— подключите тесты и CI;
— автоматизируете code review;
— подключите RAG и MCP для работы с документацией, тикетами и API.
В результате — не набор промптов, а готовый процесс работы с AI-агентом.
25 августа, 19:00
Бесплатно.
👉 Записаться на вебинар
#реклама
О рекламодателе
✈️ Code Ready | Frontend
👩💻 Нативный раскрывающийся блок с контентом без JavaScript!
Теги
Каждый из тегов выполняет свою роль:
По умолчанию содержимое
При этом базовое раскрытие и сворачивание работает без единой строки JS.
📣 Code Ready | #атрибут
👩💻 Нативный раскрывающийся блок с контентом без JavaScript!
Теги
<details> и <summary> позволяют создавать интерактивные блоки, содержимое которых пользователь может раскрывать и скрывать прямо средствами HTML.Каждый из тегов выполняет свою роль:
• <details> — содержит скрываемый и раскрываемый контент;
• <summary> — задаёт видимый заголовок, по которому можно кликнуть для переключения состояния блока.
По умолчанию содержимое
<details> скрыто. Если добавить атрибут open, блок будет изначально раскрыт. Такая конструкция отлично подходит для FAQ, дополнительной информации, настроек, примечаний и других элементов интерфейса, которые не нужно постоянно держать на экране.При этом базовое раскрытие и сворачивание работает без единой строки JS.
📣 Code Ready | #атрибут
✈️ Code Ready | Frontend
Разбираем HTMLDialogElement — нативная модель модальных интерфейсов в браузере!
Несмотря на большое количество UI-библиотек, модальные окна часто остаются одним из компонентов, где разработчики повторяют одну и ту же инфраструктуру: создание overlay, блокировку прокрутки, управление focus lifecycle, обработку Escape, восстановление фокуса и синхронизацию состояния компонента.
<dialog id="confirmDialog">
<p>Удалить запись?</p>
<button value="cancel">
Отмена
</button>
<button value="confirm">
Удалить
</button>
</dialog>
После получения ссылки на элемент становится доступен полный API
const dialog = document.querySelector(
'#confirmDialog'
);
У элемента есть два принципиально разных режима открытия.
dialog.show();
Такой режим используется для немодальных сценариев, когда пользователь может продолжать взаимодействовать с остальным интерфейсом.
dialog.showModal();
В этом режиме браузер добавляет элемент в специальный top layer, устанавливает модальное состояние, ограничивает взаимодействие с остальным документом и управляет фокусом внутри диалога.
Это отличается от обычного
dialog.close();
При необходимости можно передать результат завершения операции:
dialog.close('confirmed');
console.log(
dialog.returnValue
);
Для форм внутри
<form method="dialog">
<button value="cancel">
Отмена
</button>
<button value="confirm">
Подтвердить
</button>
</form>
При отправке такой формы браузер автоматически закрывает диалог и записывает значение активной кнопки в
console.log(
dialog.open
);
Для интеграции с состоянием приложения используются события жизненного цикла. После закрытия:
dialog.addEventListener(
'close',
() => {
console.log(
dialog.returnValue
);
}
);
Попытка закрытия через
dialog.addEventListener(
'cancel',
event => {
event.preventDefault();
}
);
Это позволяет реализовать сценарии, где пользователь должен явно подтвердить действие перед закрытием.
Визуальное оформление модального слоя также предусмотрено платформой:
dialog::backdrop {
background: rgb(0 0 0 / 0.5);
}
Главное преимущество
🔥 Для стандартных модальных сценариев
📣 Code Ready | #практика
Разбираем HTMLDialogElement — нативная модель модальных интерфейсов в браузере!
Несмотря на большое количество UI-библиотек, модальные окна часто остаются одним из компонентов, где разработчики повторяют одну и ту же инфраструктуру: создание overlay, блокировку прокрутки, управление focus lifecycle, обработку Escape, восстановление фокуса и синхронизацию состояния компонента.
HTMLDialogElement решает эту задачу на уровне платформы. Элемент <dialog> является частью HTML Standard и предоставляет браузерную модель поведения для диалоговых интерфейсов без необходимости вручную воспроизводить базовую механику. Базовая структура:<dialog id="confirmDialog">
<p>Удалить запись?</p>
<button value="cancel">
Отмена
</button>
<button value="confirm">
Удалить
</button>
</dialog>
После получения ссылки на элемент становится доступен полный API
HTMLDialogElement:const dialog = document.querySelector(
'#confirmDialog'
);
У элемента есть два принципиально разных режима открытия.
show() переводит <dialog> в состояние отображения без модального поведения:dialog.show();
Такой режим используется для немодальных сценариев, когда пользователь может продолжать взаимодействовать с остальным интерфейсом.
showModal() создаёт настоящий modal dialog:dialog.showModal();
В этом режиме браузер добавляет элемент в специальный top layer, устанавливает модальное состояние, ограничивает взаимодействие с остальным документом и управляет фокусом внутри диалога.
Это отличается от обычного
display: block, поскольку модальное поведение реализуется самим браузером, а не JavaScript-кодом приложения. Закрытие выполняется через:dialog.close();
При необходимости можно передать результат завершения операции:
dialog.close('confirmed');
console.log(
dialog.returnValue
);
returnValue позволяет отделить состояние интерфейса от бизнес-логики. Например, один компонент диалога может использоваться для подтверждения удаления, отмены действия или выбора варианта.Для форм внутри
<dialog> существует специальный механизм method="dialog":<form method="dialog">
<button value="cancel">
Отмена
</button>
<button value="confirm">
Подтвердить
</button>
</form>
При отправке такой формы браузер автоматически закрывает диалог и записывает значение активной кнопки в
returnValue. Состояние элемента доступно через стандартное свойство:console.log(
dialog.open
);
Для интеграции с состоянием приложения используются события жизненного цикла. После закрытия:
dialog.addEventListener(
'close',
() => {
console.log(
dialog.returnValue
);
}
);
Попытка закрытия через
Escape вызывает событие cancel:dialog.addEventListener(
'cancel',
event => {
event.preventDefault();
}
);
Это позволяет реализовать сценарии, где пользователь должен явно подтвердить действие перед закрытием.
Визуальное оформление модального слоя также предусмотрено платформой:
dialog::backdrop {
background: rgb(0 0 0 / 0.5);
}
Главное преимущество
<dialog> заключается в переносе части ответственности из прикладного кода в браузерный runtime: управление фокусом, modal top layer, клавиатурное взаимодействие и базовая интеграция с accessibility.🔥 Для стандартных модальных сценариев
HTMLDialogElement позволяет избежать реализации собственного modal framework. Дополнительная логика требуется только там, где интерфейс выходит за пределы поведения, предусмотренного HTML Standard.📣 Code Ready | #практика
This media is not supported in your browser
VIEW IN TELEGRAM
✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack
💾 World Places – трехмерная галерея для карточек с текстами и изображениями. В активном состоянии элемент "всплывает" и показывается пользователю.
Сайтодел | #сниппет #css
💾 World Places – трехмерная галерея для карточек с текстами и изображениями. В активном состоянии элемент "всплывает" и показывается пользователю.
Сайтодел | #сниппет #css
✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack
💾 Infinite Scroll Animation – бесконечная прокрутка элементов, которая сделает сайт динамичнее и поможет уместить много заголовков в ограниченное пространство.
Сайтодел | #сниппет #css
💾 Infinite Scroll Animation – бесконечная прокрутка элементов, которая сделает сайт динамичнее и поможет уместить много заголовков в ограниченное пространство.
Сайтодел | #сниппет #css