Frontend Lab

Анимация кнопки на чистом CSS 🟣 Полный код можно посмотреть тут 🧑‍💻 Frontend Lab

Фишка в CSS: Свойство clip-path для создания уникальных форм 🟣Вы когда-нибудь хотели сделать элемент на странице нестандартной формы, например, круг, треугольник или даже сложные геометрические фигуры? 🟣В CSS есть мощное свойство clip-path, которое позволяет обрезать элементы и создавать уникальные формы без использования изображений. div { width: 200px; height: 200px; background: #C075FC; clip-path: polygon(50% 0%, 100% 100%, 0% 100%); } Этот код превращает обычный блок в треугольник. clip-pa...

Простой пример debounce в JavaScript 1️⃣ Debounce — это техника, которая ограничивает частоту вызова функции. Проще: функция выполнится только после того, как пользователь «перестанет дёргать» событие. 🟣Представим, что нам нужно отправлять запрос на сервер при вводе текста в input, но не на каждый символ: function debounce(fn, delay) { let timeout; return function (...args) { clearTimeout(timeout); timeout = setTimeout(() => { fn.apply(this, args); }, delay); }; } const input = document.querySe...

3D-карточка с интерактивным эффектом 1️⃣ В HTML создаём карточку с классом .card, которая обёрнута в контейнер .wrap. Это нужно для применения 3D-перспективы и центрирования карточки на странице. 2️⃣ В CSS задаём perspective: 1400px; для контейнера .wrap, чтобы создать эффект глубины. Карточка стилизована с градиентом, тенью и закруглёнными углами, а текст выдвигается вперёд через translateZ, добавляя объём. 3️⃣ В JavaScript отслеживаем движение мыши над карточкой, вычисляем координаты курсора и...

Зачем нужен alt у изображений? 🟣Атрибут alt (alternative text) — это текстовое описание изображения. Оно отображается, если само изображение не загрузилось, и используется скринридерами. <img src="cat.jpg" alt="Серый кот спит на подоконнике"> 🟣Но alt — это не только про доступность: 1️⃣ SEO — поисковые роботы читают alt, чтобы понять, что на изображении. Это может повлиять на позиции в Google и показ в «Картинках». 2️⃣ Производительность — если изображение не подгрузилось, пользователь хотя бы...

Фишка в JS: быстрое клонирование объектов 🟣Когда нужно скопировать объект без мутации оригинала, многие пишут длинные конструкции. Но есть простой и быстрый способ. const user = { name: "Alex", age: 20 }; const copy = structuredClone(user); 🟣Почему это удобно? • structuredClone() создаёт глубокую копию — в отличие от { ...obj }, который копирует только верхний уровень. • Работает со вложенными объектами, массивами, датами и даже Map/Set. • Не требует сторонних библиотек или JSON-костылей. 🟣На...

Идеальный инструмент для создания плавных теней — smoothshadows 🟣 Это генератор многослойных теней, который делает интерфейс визуально глубже и эстетичнее. Вместо одной плоской тени вы настраиваете кривую затухания и количество слоев, а сервис выдает готовый код box-shadow для вставки в CSS. Выглядит намного лучше стандартных решений. 👍 — если было полезно! 🧑‍💻 Frontend Lab

Фишка в JS: Быстрое преобразование строки в число через + 1️⃣ Частая задача: вам приходит значение из input или API как строка, а нужно работать с числом. Вместо parseInt() или Number() можно использовать короткий и быстрый способ: const value = "42"; const num = +value; console.log(num); // 42 (тип number) 2️⃣ Как это работает? 🟣 Унарный плюс + перед значением пытается привести его к числу. Если строка содержит корректное числовое значение — вы получите number. 🟣 Это работает быстрее и короче...

Отличный инструмент для генерации SVG-графики — Haikei 🟣Это веб-генератор, который создает уникальные векторные формы, паттерны и градиенты за секунды. Выбираете тип фигуры (волны, круги, сетка), настраиваете сложность и кривизну ползунками, а на выходе получаете готовый SVG-код для вставки прямо в HTML/CSS. 👍 — если было полезно! 🧑‍💻 Frontend Lab

Эффект «волны» при клике 1️⃣ При клике создаём элемент <span> — это и будет наша волна. Она появляется под курсором и исчезает через 0.6 с. 2️⃣ В CSS задаём border-radius: 50%, transform: scale(0) и анимацию, которая увеличивает круг и делает его прозрачным. 3️⃣ Скрипт вычисляет координаты клика и добавляет круг именно в этой точке, а затем удаляет его после окончания анимации — так волна выглядит естественно и не накапливается в DOM. 🔥 — если было полезно! 🧑‍💻 Frontend Lab