Текстуры фона

Контейнер с CSS-текстурой на фоне. Паттерн строится на var(--color-border), поэтому автоматически адаптируется к светлой и тёмной теме. Используется как декоративный фон секций, боковых панелей и пустых областей.

Интерактивное демо

Пропсы

Вариант

<script lang="ts">
	import { cn } from '$lib/utils/cn';

	type Variant = 'dashed' | 'grid' | 'dots' | 'lines-h' | 'lines-v' | 'blank';

	type Props = {
		variant?: Variant;
		class?: string;
		children?: import('svelte').Snippet;
	};

	let { variant = 'dashed', class: className = '', children }: Props = $props();

	const variantClass: Record<Variant, string> = {
		dashed: 'texture-dashed',
		grid: 'texture-grid',
		dots: 'texture-dots',
		'lines-h': 'texture-lines-h',
		'lines-v': 'texture-lines-v',
		blank: ''
	};
</script>

<div class={cn('inset-shadow relative overflow-hidden rounded-xl bg-background-inset p-2', className)}>
	<div class={cn('h-full min-h-32 w-full rounded-lg', variantClass[variant])}>
		{@render children?.()}
	</div>
</div>

<style>
	.texture-dashed {
		background-image: linear-gradient(
			45deg,
			var(--color-border) 12.5%,
			transparent 12.5%,
			transparent 50%,
			var(--color-border) 50%,
			var(--color-border) 62.5%,
			transparent 62.5%,
			transparent 100%
		);
		background-size: 0.25rem 0.25rem;
	}

	.texture-grid {
		background-image:
			linear-gradient(var(--color-border) 1px, transparent 1px),
			linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
		background-size: 1.5rem 1.5rem;
	}

	.texture-dots {
		background-image: radial-gradient(
			circle,
			var(--color-border) 1px,
			transparent 1px
		);
		background-size: 1.25rem 1.25rem;
	}

	.texture-lines-h {
		background-image: repeating-linear-gradient(
			0deg,
			var(--color-border) 0px,
			var(--color-border) 1px,
			transparent 1px,
			transparent 1.25rem
		);
	}

	.texture-lines-v {
		background-image: repeating-linear-gradient(
			90deg,
			var(--color-border) 0px,
			var(--color-border) 1px,
			transparent 1px,
			transparent 1.25rem
		);
	}
</style>

<script lang="ts">
	import { cn } from '$lib/utils/cn';

	type Variant = 'dashed' | 'grid' | 'dots' | 'lines-h' | 'lines-v' | 'blank';

	type Props = {
		variant?: Variant;
		class?: string;
		children?: import('svelte').Snippet;
	};

	let { variant = 'dashed', class: className = '', children }: Props = $props();

	const variantClass: Record<Variant, string> = {
		dashed: 'texture-dashed',
		grid: 'texture-grid',
		dots: 'texture-dots',
		'lines-h': 'texture-lines-h',
		'lines-v': 'texture-lines-v',
		blank: ''
	};
</script>

<div class={cn('inset-shadow relative overflow-hidden rounded-xl bg-background-inset p-2', className)}>
	<div class={cn('h-full min-h-32 w-full rounded-lg', variantClass[variant])}>
		{@render children?.()}
	</div>
</div>

<style>
	.texture-dashed {
		background-image: linear-gradient(
			45deg,
			var(--color-border) 12.5%,
			transparent 12.5%,
			transparent 50%,
			var(--color-border) 50%,
			var(--color-border) 62.5%,
			transparent 62.5%,
			transparent 100%
		);
		background-size: 0.25rem 0.25rem;
	}

	.texture-grid {
		background-image:
			linear-gradient(var(--color-border) 1px, transparent 1px),
			linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
		background-size: 1.5rem 1.5rem;
	}

	.texture-dots {
		background-image: radial-gradient(
			circle,
			var(--color-border) 1px,
			transparent 1px
		);
		background-size: 1.25rem 1.25rem;
	}

	.texture-lines-h {
		background-image: repeating-linear-gradient(
			0deg,
			var(--color-border) 0px,
			var(--color-border) 1px,
			transparent 1px,
			transparent 1.25rem
		);
	}

	.texture-lines-v {
		background-image: repeating-linear-gradient(
			90deg,
			var(--color-border) 0px,
			var(--color-border) 1px,
			transparent 1px,
			transparent 1.25rem
		);
	}
</style>

Все варианты

dashed

grid

dots

lines-h

lines-v

blank

<script lang="ts">
	import { cn } from '$lib/utils/cn';

	type Variant = 'dashed' | 'grid' | 'dots' | 'lines-h' | 'lines-v' | 'blank';

	type Props = {
		variant?: Variant;
		class?: string;
		children?: import('svelte').Snippet;
	};

	let { variant = 'dashed', class: className = '', children }: Props = $props();

	const variantClass: Record<Variant, string> = {
		dashed: 'texture-dashed',
		grid: 'texture-grid',
		dots: 'texture-dots',
		'lines-h': 'texture-lines-h',
		'lines-v': 'texture-lines-v',
		blank: ''
	};
</script>

<div class={cn('inset-shadow relative overflow-hidden rounded-xl bg-background-inset p-2', className)}>
	<div class={cn('h-full min-h-32 w-full rounded-lg', variantClass[variant])}>
		{@render children?.()}
	</div>
</div>

<style>
	.texture-dashed {
		background-image: linear-gradient(
			45deg,
			var(--color-border) 12.5%,
			transparent 12.5%,
			transparent 50%,
			var(--color-border) 50%,
			var(--color-border) 62.5%,
			transparent 62.5%,
			transparent 100%
		);
		background-size: 0.25rem 0.25rem;
	}

	.texture-grid {
		background-image:
			linear-gradient(var(--color-border) 1px, transparent 1px),
			linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
		background-size: 1.5rem 1.5rem;
	}

	.texture-dots {
		background-image: radial-gradient(
			circle,
			var(--color-border) 1px,
			transparent 1px
		);
		background-size: 1.25rem 1.25rem;
	}

	.texture-lines-h {
		background-image: repeating-linear-gradient(
			0deg,
			var(--color-border) 0px,
			var(--color-border) 1px,
			transparent 1px,
			transparent 1.25rem
		);
	}

	.texture-lines-v {
		background-image: repeating-linear-gradient(
			90deg,
			var(--color-border) 0px,
			var(--color-border) 1px,
			transparent 1px,
			transparent 1.25rem
		);
	}
</style>

<script lang="ts">
	import { cn } from '$lib/utils/cn';

	type Variant = 'dashed' | 'grid' | 'dots' | 'lines-h' | 'lines-v' | 'blank';

	type Props = {
		variant?: Variant;
		class?: string;
		children?: import('svelte').Snippet;
	};

	let { variant = 'dashed', class: className = '', children }: Props = $props();

	const variantClass: Record<Variant, string> = {
		dashed: 'texture-dashed',
		grid: 'texture-grid',
		dots: 'texture-dots',
		'lines-h': 'texture-lines-h',
		'lines-v': 'texture-lines-v',
		blank: ''
	};
</script>

<div class={cn('inset-shadow relative overflow-hidden rounded-xl bg-background-inset p-2', className)}>
	<div class={cn('h-full min-h-32 w-full rounded-lg', variantClass[variant])}>
		{@render children?.()}
	</div>
</div>

<style>
	.texture-dashed {
		background-image: linear-gradient(
			45deg,
			var(--color-border) 12.5%,
			transparent 12.5%,
			transparent 50%,
			var(--color-border) 50%,
			var(--color-border) 62.5%,
			transparent 62.5%,
			transparent 100%
		);
		background-size: 0.25rem 0.25rem;
	}

	.texture-grid {
		background-image:
			linear-gradient(var(--color-border) 1px, transparent 1px),
			linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
		background-size: 1.5rem 1.5rem;
	}

	.texture-dots {
		background-image: radial-gradient(
			circle,
			var(--color-border) 1px,
			transparent 1px
		);
		background-size: 1.25rem 1.25rem;
	}

	.texture-lines-h {
		background-image: repeating-linear-gradient(
			0deg,
			var(--color-border) 0px,
			var(--color-border) 1px,
			transparent 1px,
			transparent 1.25rem
		);
	}

	.texture-lines-v {
		background-image: repeating-linear-gradient(
			90deg,
			var(--color-border) 0px,
			var(--color-border) 1px,
			transparent 1px,
			transparent 1.25rem
		);
	}
</style>

Особенности

6 вариантов: dashed, grid, dots, lines-h, lines-v, blank
Паттерн использует var(--color-border) — работает в светлой и тёмной теме
Принимает любой children — удобно для позиционирования контента поверх текстуры
Обёртка с inset-shadow и bg-background-inset в стиле проекта

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

<script>
	import TexturePanel from '$lib/components/ui-registry/TexturePanel.svelte';
</script>

<!-- Диагональная штриховка -->
<TexturePanel variant="dashed" />

<!-- Сетка с контентом -->
<TexturePanel variant="grid">
	<div class="p-6">
		<h2>Контент поверх сетки</h2>
	</div>
</TexturePanel>

<script>
	import TexturePanel from '$lib/components/ui-registry/TexturePanel.svelte';
</script>

<!-- Диагональная штриховка -->
<TexturePanel variant="dashed" />

<!-- Сетка с контентом -->
<TexturePanel variant="grid">
	<div class="p-6">
		<h2>Контент поверх сетки</h2>
	</div>
</TexturePanel>

Боковые панели секции (паттерн из дизайна)

Типичное использование — боковые декоративные области в секциях страницы:

<div class="grid grid-cols-[1fr_minmax(0,64rem)_1fr]">
	<TexturePanel variant="dashed" class="rounded-none" />
	<div class="px-8 py-16">Контент секции</div>
	<TexturePanel variant="dashed" class="rounded-none" />
</div>

<div class="grid grid-cols-[1fr_minmax(0,64rem)_1fr]">
	<TexturePanel variant="dashed" class="rounded-none" />
	<div class="px-8 py-16">Контент секции</div>
	<TexturePanel variant="dashed" class="rounded-none" />
</div>

Пропсы

Пропс	Тип	По умолчанию	Описание
`variant`	`'dashed'` `'grid'` `'dots'` `'lines-h'` `'lines-v'` `'blank'`	`'dashed'`	Тип текстуры
`class`	`string`	`''`	Дополнительные CSS-классы
`children`	`Snippet`	—	Контент поверх текстуры