%div.fake-tilt-shift-container.titled{title:"Not really tilt-shift: masked constant blur"} %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. %div.masked-blur %div.tilt-shift-container.titled{title:"Realistic tilt-shift: incremental blur"} %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. %div.blur-container - (1..350).each do %div.blur
// Variables used for both real and fake effects $steps-horizontal: 350; $blur-amount-per-step-horizontal: 0.0065px; $distance-per-step-horizontal: 2px; $padding: 3rem; @mixin gradual-blur( $steps-count, $blur-per-step, $distance-per-step ) { @for $i from 1 through $steps-count { .blur:nth-child(#{$i}) { $margin: #{$i * $distance-per-step}; backdrop-filter: blur(#{$i * $blur-per-step}); left: #{$margin}; width: calc(100% - #{$margin}); } } } // --- // Fake tilt-shift (constant blur amount, masked with a gradient) .fake-tilt-shift-container { padding: #{$padding}; position: relative; width: fit-content; } .masked-blur { position: absolute; top: 0; bottom: 0; left: #{$padding}; right: 0; backdrop-filter: blur( #{$steps-horizontal * $blur-amount-per-step-horizontal} ); mask-image: linear-gradient( 90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) calc(100% - #{$padding}) ); } // --- // Real tilt-shift (gradually increasing blur amount) .tilt-shift-container { padding: #{$padding}; position: relative; width: fit-content; .blur-container { @include gradual-blur( $steps-horizontal, $blur-amount-per-step-horizontal, $distance-per-step-horizontal ); position: absolute; top: 0; bottom: 0; left: #{$padding}; right: 0; .blur { width: 100%; height: 100%; position: absolute; } } } // --- // Decoration (not impacting the effect itself) body { font-family: sans-serif; font-size: 20pt; background: hsl(201deg, 71%, 68%); } p { width: fit-content; text-decoration: underline; } .titled::before { content: attr(title); position: absolute; top: calc(#{$padding} - 6pt); left: #{$padding}; font-size: 12pt; font-weight: bold; text-transform: uppercase; letter-spacing: 0.6px; color: rgba(0, 0, 0, 0.6); z-index: 1; }