1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Типографика typography3dcreative

3D Stacked Text

Многослойный объемный 3D-текст с реалистичными тенями глубины.

Использование

Скопируйте и вставьте этот код на вашу страницу Astro:

astro 
---
import { 3DStackedText } from 'astro-component-kit';
---

<Text3DLayer>3D TEXT</Text3DLayer>
--- import { 3DStackedText } from 'astro-component-kit'; --- <Text3DLayer>3D TEXT</Text3DLayer>

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/lib/3DStackedText.astro:

astro 
---
---
<div class="stack-3d"><slot /></div>
<style>
  .stack-3d { font-size: 4rem; font-weight: 900; color: #fff; position: relative; text-shadow: 1px 1px #6366f1, 2px 2px #6366f1, 3px 3px #6366f1, 4px 4px #6366f1; line-height: 1.1; }
  @media (max-width: 768px) { .stack-3d { font-size: 2.5rem; } }
</style>
--- --- <div class="stack-3d"><slot /></div> <style> .stack-3d { font-size: 4rem; font-weight: 900; color: #fff; position: relative; text-shadow: 1px 1px #6366f1, 2px 2px #6366f1, 3px 3px #6366f1, 4px 4px #6366f1; line-height: 1.1; } @media (max-width: 768px) { .stack-3d { font-size: 2.5rem; } } </style>

Краткая информация

Категория
Типографика
Имя файла
3DStackedText.astro
Зависимости
Нет — чистый Astro + CSS
Теги
typography3dcreative