Этот туториал очень быстрый, чтобы вы создали очень красивую открытку, используя эффект грассморфизма с помощью css, в своем проекте! 💥
У нас есть 3 шага для создания этой открытки. 🧾
1. Создаем нашу структуру, так можно создать с помощью HTML, или React с JSX/TSX, так что, какую бы технологию вы не использовали для создания, сделайте это.
В моем примере я использую HTML.
2. Теперь перейдем к созданию нашего css.
Для этого нам нужно обратить внимание на 2 вещи
⚠ Элемент нижнего колонтитула получает эффект гравиморфизма, поэтому для него нужно сделать непрозрачность в цвете фона, чтобы вы могли видеть эффект.
⚠ Для непрозрачности я использовал прямой цвет в HEX-коде, например, вот такой #fafafa77 это 77 как непрозрачность в HEX, проверьте после создания этой карты.
Для заголовка мы создадим этот код.
А для нижнего колонтитула этот код.
🚀 NICE, мы создали красивую карточку с эффектом glassmorphism, и если вы хотите создать другой элемент с этим эффектом, используйте этот код:
backdrop-filter:blur(1rem)
И не забудьте сделать непрозрачность в элементе, который получил этот эффект.
Вот и весь результат!
.
.
.
.
.
Из поста в PT-BR
Instagram: @imatheus.max
Сообщение: https://www.instagram.com/p/Cdlk5fTAWEy/