Responsive Typography
h1, p { font-size: clamp(var(--min), var(--val), var(--max)); }
h1 { --min: 2em; --val: 5vw; --max: 7em; }
p { --min: 1em; --val: 2vw; --max: 2em; }
A peep at some distant orb has power to raise and purify our thoughts like a strain of sacred music, or a noble picture, or a passage from the grander poets. It always does one good.
drop-shadow
1. filter
Using drop-shadow allows us to add a shadow to an element that doesn’t correspond to its bounding box, but instead uses the element’s alpha mask. We could add a drop shadow to a transparent PNG or SVG logo, for instance. Using box-shadow gives us a rectangular shadow, even though the element has no background, while drop-shadow creates a shadow of the non-transparent parts of the image.
Download
Nomeclature Horizontal-Length, Vertical-Length, Blur-Radius, Spread-Radius, Color
Box-shadow
Drop-shadow
box-shadow
2. brumm.af, tobiasahlin, generator
Nomeclature Horizontal-Length, Vertical-Length, Blur-Radius, Spread-Radius, Color
.shadow-4 { box-shadow:
0 1px 1px rgba(0,0,0,0.15),
0 2px 2px rgba(0,0,0,0.15),
0 4px 4px rgba(0,0,0,0.15),
0 8px 8px rgba(0,0,0,0.15);}
.shadow-long { box-shadow:
0 1px 1px rgba(0,0,0,0.12),
0 2px 2px rgba(0,0,0,0.12),
0 4px 4px rgba(0,0,0,0.12),
0 8px 8px rgba(0,0,0,0.12),
0 16px 16px rgba(0,0,0,0.12); }
.realistic-shadow-box {
box-shadow: 0 1px 1px rgba(16,27,30,0.15),
0 2px 2px rgba(16,27,30,0.15),
0 4px 4px rgba(16,27,30,0.15),
0 8px 8px rgba(16,27,30,0.15),
0 16px 16px rgba(16,27,30,0.15);}
.shadow-softer {
0 1px 2px rgba(0,0,0,0.07),
0 2px 4px rgba(0,0,0,0.07),
0 4px 8px rgba(0,0,0,0.07),
0 8px 16px rgba(0,0,0,0.07),
0 16px 32px rgba(0,0,0,0.07),
0 32px 64px rgba(0,0,0,0.07); }
.traditional-shadow-box {
box-shadow: 0 6px 6px rgba(16,27,30,0.4);}
.shadow-4 { box-shadow:
0 1px 1px rgba(0,0,0,0.15),
0 2px 2px rgba(0,0,0,0.15),
0 4px 4px rgba(0,0,0,0.15),
0 8px 8px rgba(0,0,0,0.15);}
.special { box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.02),
0 6.7px 5.3px rgba(0, 0, 0, 0.028),
0 12.5px 10px rgba(0, 0, 0, 0.035),
0 22.3px 17.9px rgba(0, 0, 0, 0.042),
0 41.8px 33.4px rgba(0, 0, 0, 0.05),
0 100px 80px rgba(0, 0, 0, 0.07);}
.blunt { box-shadow: 4px 4px 38px 15px rgb(0 0 0 / 40%) }