Фронтенд Гайд
Відкрити в Telegram
Канал для фронтендеров, много полезных лайфхаков, фичей, макетов, тестов! Все представлено в виде готового кода, бери и юзай в своем проекте. 6ad1a2aabe82d4fbb0d6
Показати більше7 650
Підписники
-324 години
-267 днів
-5030 днів
Архів дописів
\n\n📌В этом примере через style элементу назначаются цвет текста и фон.\n\nstyle удобно использовать для изменения размеров, позиционирования, анимаций и состояния элементов. Но если требуется масштабное оформление, лучше применять CSS-классы, а не инлайн-стили — это делает код чище и легче поддерживаемым","datePublished":"2025-09-14T09:00:52Z","dateModified":"2025-09-14T09:00:52Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":4,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":674},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":4}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3500","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3500","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3500","headline":"Фронтенд Гайд","datePublished":"2025-09-13T09:03:19Z","dateModified":"2025-09-13T09:03:19Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":641},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}}]}
Anonymous voting
Anonymous voting
Anonymous voting
Anonymous voting
Anonymous votingAnonymous voting
7 653
👩💻 button animation — Эффект наведения на ссылку с появлением указательной стрелки
Сделано на CSS🔗 Открыть код
7 653
⚙️ Отправиться на тот цвет: CSS Color 4. Как добавить яркие краски в серые веб-будни
Поведаю о цветовых пространствах спецификации CSS Color 4, объясню их уникальность и специфику, расскажу о сценариях применения и плюсах, которые можно от этого получить.🔗 Читать статью
7 653
Прозрачное декоративное изображение перекрывает текст и мешает кликам по нему. Нужно, чтобы клики проходили «сквозь» картинку. Что применить к ![]()
?
7 653
👩💻 Card UI Design — Появление кнопки со смещением остальных элементов при наведении на карточку
Сделано на CSS🔗 Открыть код
7 653
Нужно запретить встраивание сайта в iframe везде, кроме partner.example.com, с учётом современных браузеров. Что настроить?
7 653
❓ Зачем используется свойство
placeholder в HTML и когда его применять?
Атрибут placeholder задаёт текст-подсказку внутри поля ввода, которая исчезает, когда пользователь начинает вводить данные. Это удобно для улучшения UX и пояснения назначения поля.
✅Пример:
<input type="text" placeholder="Введите имя">
<input type="email" placeholder="Введите ваш email">placeholder удобно использовать в формах, когда нужно кратко показать формат или пример данных. Однако он не заменяет полноценные <label> — для доступности и удобства навигации лучше использовать оба.
7 653
👩💻 Ubisoft Quartz Background Animation — Размытая анимация отлично подойдёт для фона на вашем сайте
Сделано на CSS🔗 Открыть код
7 653
Хотите, чтобы при повторных запросах JSON браузер получал 304 Not Modified при неизменности. Что настроить?
7 653
⚙️ Коллекция полезных HTML и CSS фич, которые редко используются
Покажу забытые, но полезные фичи HTML/CSS: когда они лучше JS и как применить без боли. Мини-примеры и быстрые советы — внедряем сегодня.🔗 Читать статью
7 653
Подключаете CSS/JS с CDN с Subresource Integrity. Что нужно, чтобы браузер не заблокировал ресурс?
7 653
👩💻 SVG background animation test — Разъезжающиеся фигуры произвольной формы в качестве фона
Сделано на CSS🔗 Открыть код
7 653
⚙️ Вам больше не нужен JavaScript
Покажу, как CSS+HTML берут интерактив: вложенность, @starting-style, dvh/dvw, :has(), переходы — меньше JS, больше скорости и красоты. Примеры, гайды.🔗 Читать статью
7 653
Проектируете CSS-библиотеку. Хотите, чтобы потребители легко переопределяли стили без !important. Что использовать в базовых селекторах?
7 653
Элемент с position: sticky «не прилипает». У предка стоит overflow:auto. Относительно чего работает sticky по умолчанию?
7 653
❓ Зачем используется свойство
style в JavaScript и когда его применять?
Свойство style позволяет напрямую изменять инлайн-стили элемента через JavaScript. Это удобно для динамического управления внешним видом интерфейса.
✅Пример:
<div id="box">Hello</div>
<script>
const box = document.getElementById("box");
box.style.color = "white";
box.style.backgroundColor = "blue";
</script>style удобно использовать для изменения размеров, позиционирования, анимаций и состояния элементов. Но если требуется масштабное оформление, лучше применять CSS-классы, а не инлайн-стили — это делает код чище и легче поддерживаемым
