Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/trueberryless/the-thinking-hub. The central knowledge hub for 8 key Computer Science thinking modes. the-thinking-hub.felixs.dev
Something went wrong. Try again.
4.1 kB · 152 lines
Astro
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153<div class="variable-blur-mask"> <div class="blur-bottom"> <!-- Layer 1 --> <div class="blur-layer layer-1" style={{ maskImage: 'linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(255,255,255,1) 12.5%, rgba(255,255,255,1) 25%, rgba(0,0,0,0) 37.5%)', WebkitMaskImage: 'linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(255,255,255,1) 12.5%, rgba(255,255,255,1) 25%, rgba(0,0,0,0) 37.5%)' }} ></div> <!-- Layer 2 --> <div class="blur-layer layer-2" style={{ maskImage: 'linear-gradient(to top, rgba(0,0,0,0) 12.5%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 37.5%, rgba(0,0,0,0) 50%)', WebkitMaskImage: 'linear-gradient(to top, rgba(0,0,0,0) 12.5%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 37.5%, rgba(0,0,0,0) 50%)' }} ></div> <!-- Layer 3 --> <div class="blur-layer layer-3" style={{ maskImage: 'linear-gradient(to top, rgba(0,0,0,0) 25%, rgba(255,255,255,1) 37.5%, rgba(255,255,255,1) 50%, rgba(0,0,0,0) 62.5%)', WebkitMaskImage: 'linear-gradient(to top, rgba(0,0,0,0) 25%, rgba(255,255,255,1) 37.5%, rgba(255,255,255,1) 50%, rgba(0,0,0,0) 62.5%)' }} ></div> <!-- Layer 4 --> <div class="blur-layer layer-4" style={{ maskImage: 'linear-gradient(to top, rgba(0,0,0,0) 37.5%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 62.5%, rgba(0,0,0,0) 75%)', WebkitMaskImage: 'linear-gradient(to top, rgba(0,0,0,0) 37.5%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 62.5%, rgba(0,0,0,0) 75%)' }} ></div> <!-- Layer 5 --> <div class="blur-layer layer-5" style={{ maskImage: 'linear-gradient(to top, rgba(0,0,0,0) 50%, rgba(255,255,255,1) 62.5%, rgba(255,255,255,1) 75%, rgba(0,0,0,0) 87.5%)', WebkitMaskImage: 'linear-gradient(to top, rgba(0,0,0,0) 50%, rgba(255,255,255,1) 62.5%, rgba(255,255,255,1) 75%, rgba(0,0,0,0) 87.5%)' }} ></div> <!-- Layer 6 --> <div class="blur-layer layer-6" style={{ maskImage: 'linear-gradient(to top, rgba(0,0,0,0) 62.5%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 87.5%, rgba(0,0,0,0) 100%)', WebkitMaskImage: 'linear-gradient(to top, rgba(0,0,0,0) 62.5%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 87.5%, rgba(0,0,0,0) 100%)' }} ></div> <!-- Layer 7 --> <div class="blur-layer layer-7" style={{ maskImage: 'linear-gradient(to top, rgba(0,0,0,0) 75%, rgba(255,255,255,1) 87.5%, rgba(255,255,255,1) 100%)', WebkitMaskImage: 'linear-gradient(to top, rgba(0,0,0,0) 75%, rgba(255,255,255,1) 87.5%, rgba(255,255,255,1) 100%)' }} ></div> <!-- Layer 8 --> <div class="blur-layer layer-8" style={{ maskImage: 'linear-gradient(to top, rgba(0,0,0,0) 87.5%, rgba(255,255,255,1) 100%)', WebkitMaskImage: 'linear-gradient(to top, rgba(0,0,0,0) 87.5%, rgba(255,255,255,1) 100%)' }} ></div> </div> <slot /></div>
<style> .variable-blur-mask { position: fixed; top: 0; left: 0; width: 100%; height: 4rem; z-index: 99; pointer-events: none; }
.blur-bottom { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.blur-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.layer-1 { z-index: 1; backdrop-filter: blur(0.5px); }
.layer-2 { z-index: 2; backdrop-filter: blur(1px); }
.layer-3 { z-index: 3; backdrop-filter: blur(2px); }
.layer-4 { z-index: 4; backdrop-filter: blur(4px); }
.layer-5 { z-index: 5; backdrop-filter: blur(8px); }
.layer-6 { z-index: 6; backdrop-filter: blur(16px); }
.layer-7 { z-index: 7; backdrop-filter: blur(32px); }
.layer-8 { z-index: 8; backdrop-filter: blur(64px); }</style>