// 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;
}