Give the page background a casino felt texture
Replace the flat radial green with a layered body background: a soft overhead light and an edge vignette over a fine grain tiled across the green gradient. The grain is a tiny seamless SVG tile (feTurbulence fractal noise mapped to semi-transparent black speckles, stitchTiles so it repeats without seams) committed under web/assets, so it rides the existing asset pipeline and works offline; the palette and panel/card colors are unchanged.
This commit is contained in:
@@ -0,0 +1,11 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
|
||||
<!-- Seamless felt grain: fractal noise mapped to semi-transparent black
|
||||
speckles, tiled as a CSS background over the green table gradient.
|
||||
stitchTiles + a filter region equal to the tile keep the seams
|
||||
invisible. -->
|
||||
<filter id="felt" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch" result="noise"/>
|
||||
<feColorMatrix in="noise" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0.3 0.3 0 -0.3"/>
|
||||
</filter>
|
||||
<rect width="240" height="240" filter="url(#felt)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 716 B |
+21
-5
@@ -40,11 +40,27 @@
|
||||
body {
|
||||
min-height: 100vh;
|
||||
background-color: var(--felt-dark);
|
||||
background-image: radial-gradient(
|
||||
ellipse at 50% -10%,
|
||||
var(--felt) 0%,
|
||||
var(--felt-dark) 65%
|
||||
);
|
||||
/* Casino-table felt: a fine grain texture tiled over the green
|
||||
* gradient, lit from above and darkened towards the edges. The first
|
||||
* layer is the topmost one. */
|
||||
background-image:
|
||||
radial-gradient(
|
||||
ellipse at 50% 45%,
|
||||
transparent 55%,
|
||||
rgba(0, 0, 0, 0.38) 100%
|
||||
),
|
||||
radial-gradient(
|
||||
ellipse at 50% -10%,
|
||||
rgba(255, 255, 255, 0.07),
|
||||
transparent 60%
|
||||
),
|
||||
url("/assets/felt.svg"),
|
||||
radial-gradient(
|
||||
ellipse at 50% -10%,
|
||||
var(--felt) 0%,
|
||||
var(--felt-dark) 65%
|
||||
);
|
||||
background-repeat: no-repeat, no-repeat, repeat, no-repeat;
|
||||
background-attachment: fixed;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user