Фронтенд Гайд

⚙️ Странные CSS-свойства, но, возможно, полезные

Я собрал список свойств, которые знаю, как работают, но не понимаю, зачем нужны. Делюсь «критическим обзором» и жду от вас примеры пользы — вдруг откроете мне глаза.

🔗 Читать статью

👩‍💻 Linear preloader — Анимация загрузки в виде лазера

Сделано на HTML и CSS

🔗 Открыть код

⚙️ Shadcn для Vue: норм или стрём?

Опыт использования shadcn-vue в продакшн проекте: что работает хорошо, а с чем придется помучиться. Честный обзор популярной UI библиотеки от практикующего разработчика.

🔗 Читать статью

👩‍💻 Flip-card Menu — Вращение карточек с появлением текстовой информации на обороте

Сделано на CSS

🔗 Открыть код

❓ Зачем используется свойство disabled в HTML и JavaScript и когда его применять? Свойство disabled делает элемент формы недоступным для взаимодействия. Это полезно, когда нужно временно отключить кнопку, поле ввода или выбор, пока не выполнено условие. ✅Пример:

<input type="text" id="name" placeholder="Введите имя">
<button id="submitBtn" disabled>Отправить</button>

<script>
  const input = document.getElementById("name");
  const button = document.getElementById("submitBtn");

  input.addEventListener("input", () => {
    button.disabled = input.value.trim() === "";
  });
</script>

📌В этом примере кнопка Отправить становится активной только тогда, когда пользователь ввёл текст.

disabled удобно использовать при валидации форм, управлении состоянием UI и предотвращении повторных действий (например, двойного клика по кнопке). Это делает интерфейс более надёжным и дружелюбным

👩‍💻 Smooth Pulse Button — Пульсирующая кнопка для воспроизведения видео

Сделано на CSS

🔗 Открыть код

⚙️ CSS, который все ненавидят: sin() и cos()

Мы разберёмся, что делают sin() и cos(), и посмотрим на практические примеры: от круговых раскладок до затухающих анимаций.

🔗 Читать статью

👩‍💻 button animation — Эффект наведения на ссылку с появлением указательной стрелки

Сделано на CSS

🔗 Открыть код

⚙️ Отправиться на тот цвет: CSS Color 4. Как добавить яркие краски в серые веб-будни

Поведаю о цветовых пространствах спецификации CSS Color 4, объясню их уникальность и специфику, расскажу о сценариях применения и плюсах, которые можно от этого получить.

🔗 Читать статью

👩‍💻 Card UI Design — Появление кнопки со смещением остальных элементов при наведении на карточку

Сделано на CSS

🔗 Открыть код