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

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

Outlined Heading

Контурный полый заголовок без заливки с четкой векторной обводкой букв.

Outlined Heading

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

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

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

<StrokeHeadingOutline>Content</StrokeHeadingOutline>
--- import { OutlinedHeading } from 'astro-component-kit'; --- <StrokeHeadingOutline>Content</StrokeHeadingOutline>

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

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

astro 
---
---
<h2 class="stroke-h"><slot /></h2>
<style>
  .stroke-h { font-size: 4rem; font-weight: 900; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.2); text-transform: uppercase; letter-spacing: 0.05em; transition: 0.3s; margin: 0; }
  .stroke-h:hover { -webkit-text-stroke-color: #6366f1; }
  @media (max-width: 768px) { .stroke-h { font-size: 2.5rem; } }
</style>
--- --- <h2 class="stroke-h"><slot /></h2> <style> .stroke-h { font-size: 4rem; font-weight: 900; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.2); text-transform: uppercase; letter-spacing: 0.05em; transition: 0.3s; margin: 0; } .stroke-h:hover { -webkit-text-stroke-color: #6366f1; } @media (max-width: 768px) { .stroke-h { font-size: 2.5rem; } } </style>

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

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