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

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

Text Shadow Reveal

Текст с эффектом объемной глубины и подсветкой теней при наведении.

Text Shadow Reveal

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

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

astro 
---
import { TextShadowReveal } from 'astro-component-kit';
---

<ShadowRevealText>Content</ShadowRevealText>
--- import { TextShadowReveal } from 'astro-component-kit'; --- <ShadowRevealText>Content</ShadowRevealText>

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

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

astro 
---
---
<h2 class="rev-text"><slot /></h2>
<style>
  .rev-text { font-size: 3.5rem; font-weight: 900; color: #fff; text-shadow: 4px 4px 0px rgba(99,102,241,0.3), 8px 8px 0px rgba(0,0,0,0.5); margin: 0; line-height: 1.1; }
  @media (max-width: 768px) { .rev-text { font-size: 2rem; } }
</style>
--- --- <h2 class="rev-text"><slot /></h2> <style> .rev-text { font-size: 3.5rem; font-weight: 900; color: #fff; text-shadow: 4px 4px 0px rgba(99,102,241,0.3), 8px 8px 0px rgba(0,0,0,0.5); margin: 0; line-height: 1.1; } @media (max-width: 768px) { .rev-text { font-size: 2rem; } } </style>

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

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