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

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

Image Masked Text

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

Image Masked Text

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

Скопируйте и вставьте этот код в ваш React-компонент:

tsx
import { BackgroundClipMask } from 'react-component-kit-ui/typography';

<BackgroundClipMask>Content</BackgroundClipMask>

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

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

BackgroundClipMask.tsx
'use client';

import type { ReactNode } from 'react';
import './BackgroundClipMask.css';

/** BackgroundClipMask — ported from astro-component-kit. */
export interface BackgroundClipMaskProps {
  children?: ReactNode;
}

export function BackgroundClipMask({ children }: BackgroundClipMaskProps) {
  return (
    <>
      <h1 className="mask-txt" data-rk-519212="">{children}</h1>
    </>
  );
}

export default BackgroundClipMask;
BackgroundClipMask.css
/* BackgroundClipMask — ported from astro-component-kit (typography/BackgroundClipMask.astro) */

.mask-txt:where([data-rk-519212]) { font-size: 8rem; font-weight: 900; background: url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1000&q=80'); background-size: cover; background-position: center; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 0; line-height: 1; text-align: center; }
@media (max-width: 768px) { .mask-txt:where([data-rk-519212]) { font-size: 4rem; } }

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

Категория
Типографика
Имя файла
BackgroundClipMask.tsx
Зависимости
Нет — чистый React + CSS
Теги
typographymaskheading