🔥 Вы можете создать градиентные границы на полупрозрачных элементах, используя mask-clip и mask-composite с псевдо-элементом:

.gradient-border::after {
mask-clip: padding-box, border-box;
mask-composite: intersect;
mask:
linear-gradient(transparent, transparent),
linear-gradient(white, white);
}

• Небольшая хитрость заключается в создании псевдо-элемента с градиентным фоном и затем маскировке его, чтобы мы видели только ту часть, которую хотим, границу.

• mask-clip определяет область, затронутую маской, подобно тому как можно определить background-size. Использование padding-box и border-box ограничивает обе маски.

• mask-composite — это волшебная часть. Она определяет операцию композиции для слоев маски. Использование intersect означает, что перекрывающиеся части заменяются.

📌Что касается остальных стилей:

• Убедитесь, что вы установили pointer-events: none на псевдо-элементе.
• Убедитесь, что он заполняет родительский элемент. Вы можете использовать position: absolute и inset: 0.
• Убедитесь, что фон заполняет пространство, включая border-width. Вы можете использовать calc для этого:

--bg-size: calc(100% + (2px * var(--border)));
background: var(--gradient) center center / var(--bg-size) var(--bg-size);

👉 Посмотреть код и поиграть можно здесь

#css #tip by Jhey

🕘 Timeline JS — созданный в стенах Northwestern University Knight Lab JavaScript-инструмент, с помощью которого с легкостью можно создать красивую шкалу истории или поделиться хронологией каких-то событий.

🧰 Одним словом, маст-хэв для тех, кто любит решения под ключ. Опытные разрабы тоже могут найти для себя что-то полезное.

👉 GitHub

📖Test-Driven Development with React and TypeScript: Building Maintainable React Applications, 2nd Edition (2023)

Автор: Juntao Qiu

Вышла вторая версия книги о разработке через тестирование (TDD) с использованием React и TypeScript, которая на практике погрузит вас в использование принципов TDD для создания полноценного приложения.

📌Чему вы научитесь:

👨‍🎓Освоите основные методы рефакторинга для повышения качества кода
👨‍🎓Научитесь использовать современные методы написания поддерживаемого кода React, включая тестирование и внедрение продукта
👨‍🎓Получите практический опыт применения принципов TDD в реальных проектах и многое другое

👉 Скачать книгу

💡Во время отладки иногда может быть полезно просмотреть все event listener’ы, прикрепленные к элементу, и удалить их один за другим, чтобы найти основную причину проблемы.

#devtool #tip by Shripal Soni

🏛 Музей открыт! Приходите исследовать артефакты из раннего Интернета.

🤩 Все экспонаты в основном представляют собой интерактивные, а не статичные изображения, с прокручиваемыми страницами, играми и т. д.