when humans first opened their eyes in the
morning struggling to see something blurring was discovered but they didn't actually have any way
of saving that effect until cameras were invented and thanks to long exposure times weird old lenses
and manual focusing they managed to capture blurry images that sometimes showed motion and movement
and other times depth of field like how close or far objects were to the camera but nowadays thanks
to digital lenses and computers we have more types of
blurs like Zoom blur draws attention to a
certain part of an image directional blur shows motion and movement in graphic design. tilt-shift
blur emphasizes on a part of an image and creates a shallow depth of field. smart blur and surface
blur get rid of noise and Imperfections in your selfies. lens blur simulates depth of field and
creates a cool bokeh effect that everyone used for Sensational quotes in 2013. box blur creates
a soft blur over an image. and finally, gaussian blur creates a
smooth and natural blur which
is actually the most common type of blur you see on your favorite websites. but wait... box blur
and gaussian blur look kind of similar though. Yes except they don't when you look closer. no I mean
way closer like in the way they're coded. imagine you want to make this little blue square blurry.
your computer would imagine this square in the center of a checker board and start averaging out
the colors. so mix eight black cells and one blue cell and divide it by
nine and you'll get a darker
shade of blue all across these nine cells. this is a box blur which is not smooth enough so this
time the computer distributes to Blue a little bit more on the central cell and its neighboring
cells and a little bit less on the farther ones now this is a gaussian blur, but where does this
smooth beautiful blur come from? gaussian blur is one of the use cases of the gaussian distribution
or normal distribution created by Carl Friedrich Gauss to explain real worl
d phenomena where the
distribution of data shows a higher concentration in the center than the two far ends this formula
helped us so much and not just in math or data science but also in internet memes, getting rid of
noise in images, edge detection and of course, web design. for example you can apply a simple dimple
blur to any layer for any amount you want 5 pixels 20 pixels 100 pixels or even more. you can make
a little blob in figma, Export it to SVG, animate the colors in the code, an
d give it a cool little
blur and put it on the corner of your website. awww isn't that pretty? but don't get too excited cuz
this is just blurring level one and you get nine more to go. level two, background blur. background
or backdrop blurs are kind of similar to layer blurs but instead of blurring this block you put a
weird frosted glass in front of it. this works the same way as a layer blur. it receives a number and
makes whatever that comes behind it blurrier and blurrier. you can see
this everywhere nowadays
on your phone your computer. it's literally the age of glassmorphism. there are many ways to use
this effect like putting shiny objects behind it but I think where it really shines is using it as
a background instead of a solid color. level three gradient blurs. a header with a background blur
like this is cool and all but this cut right here is pretty uninspiring. a header with a background
blur that Fades away toward the content will fix that. this is basically a
linear gradient that goes
from blur to no blur but great gradients are for colors so we need a simple gradient that goes from
very low to zero opacity. but this transparent area is still blurry so to make sure it's actually
transparent, we'll turn this gradient into a mask that mixes with the background. but this is not
just for headers. you could also try making things fade behind newer content as you scroll down on
a website. level four Shadows think of a shadow as a blurry object right
behind the main object
sometimes this blurry object is the exact same as the main one sometimes bigger or smaller maybe
it's even a different color or maybe it's inside your object Shadows are used in web design mostly
as well Shadows but sometimes they glow in these cases you can bring in an actual blurry object
and position it absolutely on one side and make this cool glowy glassy effect or they might add
some depth and realism to your design for example two opposite inner Shadows can mak
e a button
feel 3D with shadows you either go realistic or chaotic level five clip path the most insane thing
about blurring is that it's it's like a phandom no one really sees it but it's there an effect like
this is either a border gradient or a background gradient that's clipped near the border right but
how about now we talked about how similar gausssum blur is to gradients so this could actually be a
super blurry rectangle and we could cut off the interior so let's grab a pizza cutter
and make a
path on the rectangle that starts at position 0 0 this means Zero from left and zero from Top then
we'll go to 100% from left Zero from Top then 100% left 100% top then 0% left and 100% from top and
finally we'll go back to 0 0 again so what did we just do well basically nothing except we made
a polygon that happens to look exactly like our rectangle and now we can continue to cut off the
interior from this polygon let's say we want to border this thick around our rectangle so we
grab
the pizza cutter again and we'll go to Five pixels from left and five from Top then we'll need to
go here which is five pixels from top and how far from the left 95% 95 pixels well we wouldn't know
unless this is a rectangle that has a specific width like 100 pixels but we want it to be dynamic
so we'll need to calculate 5 pixels less than 100% of this rectangle's width based on this logic
we can cut off five pixels inside the top right corner bottom right corner and just continue thi
s
until the central part is completely detached from the polygon now if you put any elements inside
this card the Border glows dynamically this is just one of the ways you can make cool visual
effects with clip path and blurring level six svgs CSS sure can get a lot done but if you
want a little more control over the effect to make crazier things you can make SPG filter with
good old HTML there are a lot of filter elements that can apply cool effects like graininess but
fian blur is the on
e we need for blurring just like before we need a number for the blur amount
remember this checker board when you increase the blur amount you're basically expanding the blur
radius AKA standard deviation good news is this is absolutely reusable thanks to this filter ID
so now we can apply to anything like this image and this makes us pretty powerful and you know
what comes with power you guess it creativity for example right now absolutely nothing stops
us from creating a cool revealing ef
fect for a hero section on a website like this you make
two images blur one of them and put a mask on the other one the mask is a simple circle with a
fixed radius that cuts out the rest of the image but those edges are way too sharp so let's ease
it down with the blur filter now you can use a little JavaScript and an animation Library called
Gap to constantly calculate where the mouse is horizontally and vertically from the left and top
edges of the browser window and you just move the cir
cle to that position and if you want it to be a
little more dramatic you can add a duration to it now you can get creative with this like ooh click
to reveal the next level level seven shaders deep down the rabbit hole of HTML tags there is a
canvas tag that opens the door to web Graphics Library the realm of treppy distorted art that
mixes with web design the Shader code goes right into your JavaScript where you tell the vertices
and fragments of your canvas how to behave if the canvas has
an image then the vertices are pretty
obvious but now imagine this image is fill f with these small checkerboards AKA kernels if you want
to blur the image you need to figure out which pixels on this kernel are more important than
the others which is basically what the gaussian formula does we can turn this formula into code
and write a bunch more code to calculate the blur but of course I don't expect you to write all that
because that would be a whole other video Plus in this day and age
we have the luxury of copying
and pasting well-written optimized code that's been working for years there are even tools and
libraries that do it for you besides doing all of this for a simple blur bit of an Overkill isn't it
well of course but only until level eight Shader effects the coolest thing about shaders is that
now you have control over every pixel of your canvas so the limit of what you can do is your
imagination remember the selective focus effect we made with SVG you can turn
that into a smoother
version thanks to shaders this effect is pretty common especially on award-winning websites but
this is not to tell you that you necessarily need shaders for a stunning blurry website let's go to
level 9 animation the real art is using blurs to convey meaning or create a lovely experience for
your visitors bluring has a few simple concepts for being playful with your website like hiding
and revealing content or focusing only on one part of the content or transitioning b
etween sections
for example if I have a bunch of text like this instead of putting it in front of your face and
knowing fool well you're not going to read it I'm going to blur out the words and as soon as the top
of the words container hits the top of the page they start unblurring one by one as you scroll
now you can read it better even though this is nowhere near the beginning level 10 is not about
some Quantum technology the real challenge here is mixing it all together in a harmonical w
ay
or adding other effects to it like adding noise to your blurry blob or using it alongside other
CSS properties like adding contrast to a blurry text to make it look gooey or using blurring as
an image loading animation like on this website the possibilities are infinite but be careful
even though blurring is simple not all browsers feel the same way about it especially not the
older ones so for CSS it wouldn't hurt adding a webkit perix for webkit browsers like Safari
plus if you're pla
nning to use shaders you're going to have to optimize the out of it because
it directly uses your visitor's GPU to render and you never know what GPU they have I mean not
everyone has a monster like mine well that's all for this video if you liked it make sure you
do your magic down there and see you on the next one
Comments