Just playing around and hanging out.
Kevin Geary
Webdesign educator & WordPress entrepreneur
Just playing around and hanging out.
Yo yo yo let’s go live let’s see who we were able to uh who we were able to cat hold on first
audio i always gotta check the audio okay sound levels it says we’re good it says we’re good
let’s see who we were able to capture in you know 15 minutes of prep time uh
i didn’t email out about this or uh anything else we got cool web design in the house peter heck
dove burr uh marius wolf antonio okay andrew andrew’s here welcome welcome welcome maybe the
algorithm will do its thing i don’t know i’m still recovering from this cold this yeah just a man
it’s an awful cold awful cold that i picked up from those those terrible swiss people okay no i don’t
know where i got it maybe on the airplane uh i’m also by the way i’m doing a little detox
i’m doing a little uh new intermittent fasting protocol i think my blood sugar is in the
negatives right now so you know you may lose me at some point physically uh during this stream i don’t
know we’re just we’re just having fun we’re just hanging out that’s all we’re doing uh we’re building
some card components in etch i just found some dribble components to you know like well not they’re not
components just some dribble designs that i was like let’s just play around let’s just have some fun
it’s a little relaxing monday afternoon so yeah robin’s in the house nate’s in the house uh we got
rune jamie lex david okay we’re looking good we’re looking good i’m just gonna go ahead and share
uh if i can find if i can find the share where where did my scenes go okay hang on hang on hang on
we’ll go to window uh we’ll go to camera effects switcher oh here they are default scenes all right
there we go we’re we’re in we’re in uh i’ll show you what we’re what we’re gonna be cooking up today
it’s it’s got a lot i wanted to play around with this because it’s got a lot of just interesting stuff
going on and i honestly don’t know how to approach it and that’s why we’re gonna play around we’re just
gonna and there’s dark there’s dark versions of this thing it’s got some blurs going on uh i mean
we’re just gonna have to work through this together together as we hang out and but my goal here is
like okay we want one component that handles all these variations i mean we’ve got one two three four
there’s four different possible variations among the fact of whether we like maybe show and hide
certain things and the idea is that you just can do all of this from one component called uh we’ll call
this like a a profile card because this is like a profile of a person you know profile card okay so
that’s essentially what we what we want to do today okay well let’s let’s just start doing it then let’s
just let’s get rid of the talking and let’s start doing okay so i’m gonna uh let’s let’s put a
let’s put a grid two and a grid m1 on this little container that i’ve got going on here
and let’s just add a couple flex divs here uh so that’ll be side by side and also put a width of like
l on here so we can i just want to see like a card sized thing you know uh and so we’ve got a
we’ll call this our card uh what would i say profile we’ll call it a profile card now if we
look at this i know i’m gonna need that the problem is going from this image to a full image i i i just
there’s many ways we could go about this and i just don’t know which ones we’re gonna choose
so we’re just gonna keep working our way there so i’m gonna immediately go what i’m seeing is oh can
i get my pro mouse on the screen let’s do that let’s go enable cursor pro i don’t think i can draw
with this one though but i see one box and i see another box that’s all i see right off the bat is a
box in a box okay uh so let’s hop back into etch and let’s go flex div flex div so we’ll just add two
boxes in there okay um this is going to be the media wrapper and i’m actually going to pull this out
because i have a lot of real estate to work with you know so i’m going to make this sidebar a little
bit bigger for right now and i’m going to call this the content wrapper so i’ve got a media wrapper and
i’ve got a content wrapper well inside the media wrapper obviously we’re going to put we’re going to
put some media and i believe i have downloaded an image for us to use i wanted to go along the same
lines very fashiony right very fashioning so we’ll stick with fashiony type uh media here and then what am i
seeing inside of the content wrapper i’m seeing a the person’s name maybe that’ll be a heading and i see
a paragraph okay so let’s go back in uh i’ll add a heading and i’ll add a paragraph okay this is the
person’s name this is their uh bio yeah okay and then what else do i see i see another box that’s what i see
i see another box so if we’re just working our way there i’m going to add another box this box what
are we going to call this box we’re going to call this box the uh meta wrapper i don’t know what all
this shit is if you don’t know what it is you just call it meta okay uh it’s a meta wrapper uh that’s
what it looks like to me so i’m going to go in here we’re going to call this a meta wrapper you could call
it technically maybe maybe you want to call it the footer you know we call it we should call it
the footer maybe we should call it the footer maybe that’s a little bit better descriptive okay let’s
call it a footer and then inside that footer i see another box and another box and a button so i need
two more boxes this is a grouping of an icon and a stat i don’t even know what this is why i mean
it’s all dummy data i don’t know what this is what 312 persons what is she what is she i don’t
what does this mean she got 48 check marks i don’t know i don’t know what that’s for okay and the
designer didn’t do a very good job right here of like they did a good job on the design not a good job
on like the what what are these things for um she’s got users how many user what is this her only
fans card what what is i don’t know what’s happening here with the numbers but we’re just going to
call these uh data data points maybe data data group data group i don’t know i don’t know i don’t
know what these things are um let’s put in another i’m just going to put in a now if you’re using
automatic css you’re going to get auto spacing in these things if if any point in time you don’t want
auto spacing you could just add a div you added just a div it’s not going to auto space it uh i’m going
to call this data group okay um now but you’re going to have to flex it and gap it yourself okay
so if i don’t want to gap it and flex it myself i can add a flex div a flex div is going to have the
auto spacing all right so i’ll call this uh data data point how about that data point and inside of my
data point i’m going to have an icon which is an svg and i’m going to have a label which is more text
okay so this is the uh data point label and this is the data point icon and that those are both inside
of the data point and there’s obviously going to be two of those i don’t need to duplicate it yet
also inside the footer is going to be a uh button now this says follow i don’t know if this is supposed to
be a link or supposed to be a button there’s a difference you know there’s a link takes you places
there’s a button performs an action um we’re going to assume this is going to be on a website it’s going
to take you to to some social media site maybe we’ll just make it a link it’ll look like a button but
we’re going to make it a link uh so i will add a link in here and we’ll say that this is the action
okay uh again we don’t know what action is supposed to happen we’re just going to call it action
all righty this is uh excellent let’s let’s see what people what’s the chat saying we’ll take some
time out to review the chat every now and then what’s going to be the price of etch uh probably
very similar to what it was last time but it’s not finalized yet wtf i was about to hang in the couch now
i have to watch this instead of netflix well this is way better than netflix uh i hope it’s anja i’m
gonna say anja hopefully that’s how you pronounce it it’s way better than netflix um listen let’s just
be honest hollywood has produced absolute trash cans of media for the past decade okay uh nothing you
don’t need to see anything on netflix you just watch everything right here those check marks are supposed
to be posts or something okay yeah that could be that could be all right um right now what we’re doing
if you’re not familiar is we’re just getting our content on the page our structure i would gather
that this is probably going to be an h3 okay um and then we’re going to start styling this stuff i think
i got everything that i need am i am i missing anything uh i got this group which we’re going to
duplicate i got my button i got this i got that i don’t know why she’s got a check mark next to it is
this supposed to be her like verified badge or something okay we can add a badge if we want now the
question is can we add an svg inside of a heading in etch um i don’t know that we can which means that
we’re going to need to group them okay so i’m just going to add another little flexed and this will be
our uh heading wrapper uh or how about our our name name wrapper okay so i’ll bring this up here in our
name wrapper goes our name and our svg so we’ve got a name wrapper with a name and an svg and that’s going
to allow us to have a little plus sign let’s go to huge icons not just huge huge icons.com and let’s go to
uh icons check and um surely there’s one of those little star looking check badges here we go here we
go okay let’s grab this um i don’t want to copy it i want to download it we’ll say check mark that’s going
to go into the downloads what else do we need we need a little uh avatar user and another checkbox
thing okay um let’s go avatar you how about user that’s got to be it right user there we go what does
that user look like it’s a little bubble it’s a little bubbly guy a little bit like this one like
this one oh no like this one this is the exact one right here i bet let’s download the little bubbly
guy okay we’ll say user and um check box check check box oh didn’t like that check okay uh check
check check check check check check check square here we go i don’t know if i have any like layered
ones in here i don’t want to look around too much yeah yeah it’s not worth it it’s not worth it
looking around that much uh let’s go with this one bang check mark check mark box there you go
okay let’s hop in here uh let’s add these svgs let’s go check mark box and user and uh check mark okay
there’s her little badge use this media now i got a check mark what’s this one supposed to be
let’s click it and let’s do the user okay there we go all right i’ve got like all the structure that i
think i’m going to need which means i can right click create bim classes and now we have all every
everything is literally everything even the paths are bimmed okay you got everything is bimmed let’s save
and let’s start looking at some of this basic basic basic styling uh by the way you can ask questions
um just hashtag cue them and i’ll i’ll i’ll take some breaks i gotta get my water and hydrate
again feeling a little fluttery today i think it’s reflecting in my attitude because of this uh
intermittent fasting i have no uh my body is starving it has no idea where the carbs went it has no idea
where the sugar went really it has no idea where the calories went in general um and it’s freaking
out a little bit if i’m being honest so what we’re going to do is here and we’re going to name wrapper
uh we’ll display flex this um and name wrapper display flex name yeah okay so when you when you use
these flex divs they default to uh column so when you do display flex if you’re expecting them to just
go into a row they’re not going to unless you say flex direction of row that’s going to change your
little uh direction we’ll align these items to the center that’ll vertically align them and i’ll just say
what what is this oh sophie bennett okay sophie bennett i’m not going to worry about fonts in this
okay i don’t i don’t ever worry about fonts in these demos um now there’s a default gap but you can
always just reset the gap right to whatever you want i’m just going to say let’s do 0.5 m as an
example okay so we’ve accomplished our first job of getting the badge next to the name tag the next
thing i’m going to do is put in some lorem well no we’ll say product designer who focuses on simplicity
and usability okay product product designer who focuses on simplicity and usability okay and then
in this content wrapper right here i obviously have a gap and this is going to be content gap divided by
two i could use the card framework and all this other stuff but you know we got to introduce people to
this stuff a little at a time it’s going to be very overwhelming if we go straight to just like
hyper pro mode oh people might get a little lost okay so in our data point we want to essentially do
the same thing we did before which is uh flex it uh we can do flex direction row and then we can do a
gap of 0.5 m and those things will get very close to each other now sometimes in flex you will lose
these items like svg could collapse to nothing uh like if this text if this gets really long let’s
see if the other if the if the icon starts collapse look at it look look at it start to just flex is just
it’s a monster actually um it it is it is a monster at times you have to be aware that these
things exist with flex so there’s two ways you can actually approach this what i often do is i use a
trick which is display of grid and when you display grid these things do not happen to your elements
because grid is not a monster unlike flex grid is not a monster grid is very logical uh flex is very
illogical okay there’s a couple other jokes i can make there i won’t make them um because we don’t want to
get canceled okay so uh the the uh grid template columns here another if you didn’t know a lot of
people think this has to be like one fr two fr you know this kind of game um it does not have to be
um it can be auto and then you could do one fr here or what’s always better than one one one fr
is min max zero one fr okay that’s always better uh this prevents overflow issues but if you’re elite
you just say var grid one okay um so you can auto var grid one and now those two things by the way
you’ll never lose your icon things will never flex shrink on you because we’re not using flex
flex and um it’ll never flex wrap on you like unexpectedly because we’re not using flex flex
is a monster and you have to be able to tame the monster grid not a monster it will just behave exactly
how you told it to behave and that’s till the end of time on every device size it’s great uh so this is
a little trick you know if you if you’re tired of flex misbehaving on you just go grid and go auto
grid and you know it’s do whatever you want to do here okay uh next thing we need footer the only time
it’s not good is like in this situation where you don’t know how many items there are going to be
if you don’t know how many items there are going to be in a line you either have to use some sort of
auto fit grid or display flex um and auto fit grid is a little bit more involved so uh you know this
might be the best bet for you right here and in this case you might have to so i will show you how
to prevent the things okay like this data point right here you can do flex shrink of zero and it will
not flex shrink now i wouldn’t do that while you’re doing grid okay because you know it’s other things
might happen um and as you see here with this button we’re gonna do a um i’m not you know button okay
yeah we’ll talk about this in a minute button primary i’ll put that on there i probably need
align items of center to drop those two vertically aligned to the center and we’re getting we’re
getting to where we want to be we’re getting to where we want to be okay um the first thing i’m
going to notice i’m going to essentially design or build the first variant of this card um and right
now i’m wondering yeah okay we’ll just we’ll just do this i think this is just a square so an aspect
ratio of one um i’ll take this media right here and if we want to wrap it in a figure tag we can
this will be a little bit easier uh in the future but i can just say that this is going to be the
figure and i can literally make it a figure tag and then drop the media in it okay so now i have a
figure which this needs profile card double underscore figure okay and then i have the media and then
actually i don’t need a media wrapper this is my days of bricks making that media wrapper i am going
to delete that and then we’ll just call this figure the media wrapper because in bricks you never had
access to the actual figure element in at you do there’s no reason to have a media wrapper if you’re
going to have a figure because the figure is the media wrapper you just i’m going to delete this too
you you you just couldn’t do this in bricks before so profile card double underscore media wrapper goes
on the figure itself fantastic okay now the media i’m going to say is aspect ratio of one
okay and uh object fit of fit of cover okay and object position now of 50 20 so that we can see more of her
face okay um and what we might need is a way to manipulate that in the future we’ll see because
we’re going to make this a component uh let me go over to yeah you would have been done in breakdance
that’s right that’s right uh uh ruben i’m sure i’m sure um but you won’t be able to do any of the
shit that i’m about to do so there’s that too uh no i know i know ruben is just uh having his fun
trolling striped goat in the house olaf in the house the hunzi in the house late to the party it’s all
right you haven’t missed much okay i thought i deleted that media wrapper that
we don’t need all right um let’s look here so i’m seeing we definitely need some some uh padding
inside of this uh this grouping right here so i’m gonna go padding of space m we’re gonna start with
m and see how m works we’re gonna not need a gap in this profile card so i’m gonna just say gap of zero
and but in the profile card what we do need is a sliver a sliver that’s a technical term a sliver of
padding okay uh that would be something like now you could try like space xs i think this is going to be
too big and it’s not so we’ll just go we’ll just go with excess um now we are going to do a uh what we need
here this is called uh a concentric radius dude brain is buzzing
it’s it’s like i don’t know how you’re going to continue to physically operate without calories or
sugar very soon um okay it’s it’s affecting the brain uh and but that’s okay that’s you know weird
this is how you practice you practice under varying conditions you know um you just take away the food
take away the water take away like this is how you really get to be a pro okay you just you got to be
able to perform in any condition maybe in a rainstorm and snow sleet hail you can’t need perfect conditions
in order to get your work done uh all right we we need a concentric radius
let’s look at the light version okay so let’s work on a light gray background
there’s our light gray background which means our card profile card needs to be a background of white
fantastic let’s go with a border radius on this card of radius which i think it already has but we need to
change
we need to change our default radius for our website so we’re going to bring up acss
borders dividers borders border radius 25 pixels i’m going to yes it’s more than that
45 it’s very aggressive
that’s about right maybe we’ll go 40
okay now i’m going to try to figure out off top of my head i’m going to remember concentric radius
formula how does it work uh so we’re going to go to profile card um we’re doing it based on the
radius value so that’s good so we’re going to do border radius is uh radius
plus
the padding divided by two i believe that’s the formula uh calc var radius plus okay it didn’t auto wrap this
correctly that’s supposed to go there that’s it that’s that’s concentric radius okay now this space
excess i don’t like we’re going to say card padding
is space excess and then for padding i’m going to do var
card padding and for this i’m going to do card padding and what this does for me
is it makes everything dynamic or essentially i can come to the card anytime i want and if i want
the card padding to increase it’s going to also affect the radius the radius is going to recalculate
itself based on this new card padding see see that okay so it’s it’s kind of a we’re trying to build
like an unbreakable situation and actually i might even want to sliver it up a little bit more and go
divided by two it’s even more of a sliver and that’s probably even more in line with what they did there
okay now i’m going to do a border of border
okay now you’re like border of border what what what’s at what’s even happening there well this is
all acss stuff right so i have borders and dividers here’s my default border width solid black trans 20
which i’m going to actually make 10. my dark color is the default so i can just i have the luxury
of going border var border and i get a border you see that let’s go look at this on the front end
so there’s my light little 10 black border and my nice little concentric border radius and i’ve got
this all working in here um i’m i’m thinking that maybe this needs to be dropped down to s instead of m
let’s go ahead and look there and that’s what i love about tokens like tokens you could just just
change a little token swap a little token you get a new a new effect nothing breaks okay it’s all nice
uh let’s see
are you building both of them next to each other or can we switch to the other variant later on
good question um this is this is just right now i just wanted a grid where i can see the card and its
proper size um this box right here will allow me to potentially duplicate this to see a variant
if i want to um we’re going to make this a component in just a second and figure out how to even manage
these variants but i don’t know if i want to make it a component first and then try to manage the
variants or figure out how the variants are going to work and then make it a component i probably want to
do that so that i don’t have to worry about the component functionality i can just worry about how this
is all going to come together and then i can create the component and bake it all in um okay so
the first thing the hardest part of this um like the button’s not difficult you know it’s like what what
do we want to spend the time on right now i want to spend the time on go how the hell we’re going to go
from this to this full height image and this blur situation now i think what we might want to do
profile card uh position if i was going to guess because i have not built this before so i don’t
exactly know uh how we’re going to get there but i have a guess and my first guess is if this goes from
essentially being
contained in this media wrapper there’s two ways we could do this what happens let’s just ask the question
what happens if i position
this absolute
that’s unfortunate yeah um
yeah yeah yeah yeah yeah yeah oh oh well hold on what happens if i
i don’t think i can display contents on here
that doesn’t do anything but if i display contents on here
that what did that do oh that makes them part of the grid yeah we don’t want to do that okay
so those two are shot down if see if we go position absolute we’re going to need to set a height on the
card a minimum height on the card
actually
actually
hmm
what if we change the aspect ratio after
going position absolute
bear with me here we’re experimenting what if we change this to one over two
okay but that’s that’s not going to actually affect the height
of the card
um
okay so the the card at that point is going to need a min height
of now we can’t
um
because we’re going to need to know
it’s essentially going to be based okay maybe instead of doing that
we’ve got this as position relative
now we can position this as absolute
okay
this position relative
is
let’s set a min height i’m playing around with different
uh approaches to this
okay
400
okay that’s not going to work either
that’s not going to work either
mm-hmm we’re not what i’m gathering is position absolute is a no-go
okay we’re not going to we’re not going to be able to cheat and just get away with that
so let’s take that away
okay and we’re back to here
um what are our other options then well i could add that image outside
okay let’s do this this is where we may want to duplicate
so let’s do this let’s take the let’s delete that we don’t need that
okay so here’s our duplicate we’re going to add an image outside of it which is i’ll just i’ll just
duplicate this image here okay
and media media tall aspect ratio okay this
okay
actually know that absolute position will work i think
now that i’m rethinking about it now that i’m rethinking about it
okay what if because if you do one thing i was forgetting position absolute if you you so when
it’s an image
it needs dimensions in order to really conform and fit
i’m not sure why it’s reaching to the edge there
um that’s odd to me if anybody has
i feel like it doesn’t normally do that
why it’s going into the padding area of the card
even though it’s being told to be with 100 height 100 that’s that’s a little bothersome but if we
we were z index of minus one and profile card was um
isolation of isolate
now we’re getting it to be behind which is nice okay
um
it should it should yeah yeah yeah that’s that’s probably right um it should care about the padding because let’s do this
what if it was position relative here that’s gonna get stuck up in there we don’t want that
okay
no you’re right it doesn’t care about the padding but why does it care about the padding up here and over there
that’s that’s the question why is it halfway caring about the padding is what i’m wondering
you see what i’m saying it’s it halfway it halfway cares
uh
uh
we’ll make sure this is positioned static
okay
that doesn’t even matter anymore at this point
oh i know why probably yeah okay that’s dumb i i always i always feel like the top zero left
zero should be just defaults and for some reason they’re not
um
okay
this is good
i’m just working through how we’re going to get this variation and essentially now if we take the name the content wrapper
what if we um
margin block start
of 300 pixels just as a example we we’re just going to decide how much
uh extra space we want above the content
because if you look at this that’s really all that’s happening here this is all blank space
above this content we just determine how much blank space we want
and this is all going to get baked into the logic of the component you’ll see this in a minute
now the question is
i think i’m seeing another issue
because i don’t think you can
background blur
is it background blur or background filter
isn’t there a back my brain’s getting confused right now with the background
background isn’t it background blur
no is it background filter blur background somebody uh
i mean i could just rock it you know what i’m saying
is there a background blur property
okay
backdrop filter that’s what it is
background filter back there see these things are there’s so many of them okay so let’s go to
i don’t think you could do that on transparent though
backdrop filter
blur blur is this how is this the syntax for it
you can do it okay but you you guys are seeing the problem that we’re running into and i actually
don’t know
okay no this is good this is good this is good oh this is perfect this is perfect ah sorry it’s not
a problem it’s not we’re not we don’t have a problem i thought we had a problem we don’t have a problem
we don’t have a problem because i’m seeing the so when you absolutely position this uh the top and
the left inset are actually going to be the card padding okay this is why you make tokens too you just
never really fully understand how valuable they’re going to be until you start using them um
and actually this can just be inset
i believe inset var card padding um
you would assume would work but once again it works on the
hmm
hmm
hmm
hmm
hmm
uh
uh
isn’t it better with a gradient
isn’t it better with a gradient isn’t what better with a gradient isn’t what better with a gradient
um
okay think of how this is
so top
left
see i was assuming that if you inset it by card padding it should inset on all sides yeah
inset of 10 pixels it’s moving it from the top and the left but it’s not bringing it in from the
right and the bottom uh maybe it’s because it’s ah hold on no it’s not the aspect ratio messing with me
um
let’s look
yeah i mean
you could doubt i don’t want to use the width calculations because i feel like you shouldn’t
have to i feel like the inset is literally supposed to do this i feel like if it wasn’t an image
it would be doing it it would be doing what i wanted to do
like like watch this
um
let’s hide this for for a second media wrapper media wrapper like watch watch watch this
okay
look at that it’s just because it’s an image the image is misbehaving if i was doing this with a
another object
it would be doing exactly what i’m wanting it to do you see that
it’s insetting on all sides
it’s only because
it’s only because it’s an image
so we have to figure out what is forcing what’s going to force this
i’m i’m i’m i’m keeping in inset card padding i am 100 confident that that’s what you should be
doing there is um something causing this image
example has no width height set to 100 percent um they’re right here bro 100 percent
um
um
okay okay okay okay okay let’s go to grok
let’s go to um
okay i have an uh i have an image
that i’m trying to inset by 20 pixels
but it only insets on the left and the right if i do
this with a any any other object it works but with an image the image breaks out of the sides
okay
yeah that didn’t fix anything
that didn’t fix anything okay let’s go back see what else it says default image sizing yeah yeah yeah
yeah i get it okay if the image container image has less
uh
play part of the image container might be causing a parent container constraint
so it’s a display block yeah i already tried that yeah
constraint image size max width 100 height auto
um okay let’s try height of auto i have zero confidence
um yep uh max width
i mean if i have to calculate the width i’m going to calculate the width but i just don’t feel like you
should have to um
just remove the width and height uh bet you that doesn’t work
doesn’t work see doesn’t work um
mm-hmm grok talks too much claude goes straight to the point you’re right you’re you’re correct the
best way is to wrap it in a container div um
okay let’s let’s let’s let’s try that let’s do
maybe what we want to do
think about this
we could
with 100 percent height 100 percent
there we go we’re just going to do it on the on the media wrapper okay uh so let’s go
inset of card padding there we go same effect different rules same rules different places
okay so you just say fuck the media and we’re going to put it all in the media wrapper media
wrapper is going to make it work okay um okay we can take this z index and put it on the media wrapper as
well okay that should get that done anything else stuck on here that doesn’t need to be here
everything else is everything else is fine
everything else is ah i’m a little worried that the border radius is still sitting there i want the border
radius here and i want overflow of clip just in case okay all right now oh okay so you see these corners
right here all right we’re back in business we’re back in business so in in this instance what i’m also
going to need is border radius of zero zero and then radius radius
overflow clip
yummy it’s pretty yummy okay uh now this is an accessibility nightmare
i think until we add probably a background
of white uh but it needs to be transparent
so we can do white trans 10 as an example or 20 or 30 but we’re not going to get the same effect
that they’re getting now again i’m gonna i’m gonna i’m gonna i’m gonna say something that okay this
i don’t know that this card’s ever been built okay it’s just people do these things in figma
figma is not dev okay you got to figure out if this kind of shit’s even possible
where we get we essentially see no line right now you take me into photoshop i mean this is easy right but
telling a browser to render this in a dev environment a little bit different a little bit different um
so i’m trying to think trying to think how we want how you might be able to get achieve a blur like this
and then yeah you have light images you got dark images as crack is saying you know
um what what i’m trying to figure out right now is
this hard edge situation no hard edge on this but you can’t tell then you have no blur up here
you could do a radial blur probably and determine where the radius blur is placed if you have
see what i’m thinking is every if you have a hard edge right here on this content box you’re always
going to have a hard edge on the blur um if you went up on the
uh no not that hold on we don’t we want to get rid of the margin block start that we had
and we would use padding block start this is going to preserve this is going to this is going to use
our box the entire box um but at that point everything’s going to be blurred you see but then
you’re so you’re gonna have to switch to a different kind of blur
to get that to work
that’s why i said we’re playing around and hanging out today um
a solid background won’t have a line when blurred a solid background won’t have a line when blurred
yeah but this is all based on images i mean it’s the designer says we need images you can’t be like well
if we just have a solid background this would work out just fine we gotta have the images we gotta have the images
okay
um other than backdrop
filter blur what are my other blur options in css
yeah you have a filter blur
box shadow soft edge blur that’s
bullshit that’s not a blur quit making shit up
svg provides a filter element with a gaussian blur effect that can be applied to any html element via css
filter blur gaussian blur blur blur content never done that before opacity with overlaid elements
don’t think so don’t think so jack mix blend mode don’t think so image based blur pre blurred asset no no
that’s not gonna work that’s not gonna work that’s not gonna get us to where we want to go
mmm backdrop filter background backdrop filter
is there any way
to position a blur
like you can position a
radial gradient
in a box
what kind of is this you
ah
i don’t think that’s gonna work
filter blur background image
that size cover no this is some bullshit
yeah you’re you’re lying
maybe what dennis said this mask image linear gradient to bottom
um
okay well i don’t i don’t know
mask image
progressive blur just quick search and you will find a few working examples
how do you create a pro progressive blur
yeah apply filter blur to the duplicate layer webkit mask
well
mm-hmm
well done great
uh
okay linear gradient to right transparent zero black mask linear gradient to right transparent okay how about to
top to top uh i had to do it a few years back by staggering separate divs with each having
a different blue blur level
20 zero percent 20 hold on i got to scroll up i use a gradient i mean a gradient doesn’t blur
things is the problem um filter it’s like if you look at the okay hold on oh wait wait wait wait
wait wait wait wait are we getting are we getting somewhere
i need to take the regular filter off
hold on hold on hold on hold on hold on we might be getting we might be getting somewhere
uh not really though i don’t see any there’s no difference in the blur it’s just
what’s blurring this shit hold on that hold on wait wait wait wait wait wait wait wait
okay my brain’s putting it together i don’t need this on the box
holy smokes what what what have we done here
how how is it still blurred
i don’t believe it oh okay there’s shit everywhere on here all right hold on
we tried too many things okay i don’t think it goes on here though
it’s gonna go on the image yeah
no no okay so what this is doing is content wrapper
it’s blurring the content in the wrapper
but if i do the image
it blurs out the image completely
that’s not going to get us the effect that we want
um but but that i feel like we’re on the right track
i feel like we’re on the right track
where this content wrapper
i definitely don’t want to blur the content
i feel like we’re on the right track but okay
um let me go let me scroll back down here
if you look on google gradient blur css then blur gradient with css
purple squirrels gradient blur css purple purple squirrels
um all right so
one two three four
one two three four
okay
simplify all right here’s your div style image
card thumb content all right let’s come down div has card before div has card relative
fuck off like that’s so over engineered it’s a fucking code pen like card thumb
thumb before thumb after what is the thumb
it’s not even a thing oh maybe it is
weird
you know naming things is hard it’s obviously very hard because that’s the dumbest name for whatever structure is disappearing right there
um
okay filter blur saturate webkit linear gradient to bottom
mask image and this is put on the
they’re using a pseudo after element with the background as the image of the pseudo element
got it
is that necessary okay
if we weren’t using a pseudo element we could i don’t think the pseudo element part is necessary
filter blur 10 pixel saturate
what i’m trying to gather though
that’s the image
it’s just it’s just it’s just it’s just blurred it’s not this isn’t
this is not really the same thing
kind of it is
did i delete part of it
this is hard to wrap your brain around
oh i love it okay
card content
dude he he absolutely positioned everything
unbelievable
i’m really i’m trying to figure out where the
okay
so you take that away
card thumb
thumb before
the before and the after both have the image
you have to use duplicate images
so you’re blurring one image to reveal itself behind it essentially
is what i’m gathering is is is going on here
wow that’s a lot
that’s a lot involved
it’s more than i signed up for champ
um
okay media
i’m almost tempted to just
have two media elements
uh that’s probably not good practice
that’s probably not good
okay
all right
uh so media wrapper
and before
content
content
is
if we go back here
and look
yeah
okay
boom boom
position absolute
n said zero
background image
image
okay
background
size
cover
profile card
profile card
profile card
um
okay
there’s one
media wrapper
after
after
after
so i should have two of them now
now we’re gonna go hijack
this shit
and
uh
where do i go
let’s go here
okay
was it on the after
assume
yeah
okay
so there’s our after
okay
okay
is it as good as the
uh
i mean
you know
yeah
it’s a little like
ghostly
looking
isn’t it
um
the problem is the more you blur it
the more it reveals the
thing behind it
you know what i’m saying
like
oh
be careful with that lever
uh
okay
yeah i mean the rest of it is just ratios
of what you’re revealing of the of the blur
i don’t i don’t this it’s not a it’s not it doesn’t really get you the same effect
as as the design i mean it’s better than nothing i guess
but
um
okay
at this point
we would
it’s i guess it’s gonna it’s gonna be good enough
you know
um
i think i’ve got enough
to go
so
we’re gonna make we’re gonna make this the
the main variant
and then we’re gonna
like undo that stuff
to get back to the
original variant that we had
i think is the way
because when you make this a component now
we’ve we’ve really complicated our life at this point
um
yeah
we’ve really really complicated things at this point
okay
but i’m ready to make it a component
i’m not gonna finish the button styling and all that stuff
because we we’ve
we’ve gotten ourselves into too deep of a situation
i gotta go eat soon
um
let’s let’s get the component part of this
done
and figured out
okay
so we’re gonna create a component here
and the first thing i’m gonna do is
um
hmm
we need to name the variants
right
what are the variations
so
if we look at it
now you could have more than one variant
right now we’re just gonna do two
because that’s all that
that’s all that there is
and then we could do another one
that’s is dark is light
perhaps
uh
but really i was
i wanted to explore the
let’s go from this
and this
to this full card
see if that’s even possible
the blur thing
the designer just
hates us
essentially
um
so they put that in
um
so that just over complicates things
but it’s really the
short and the tall
so
we’re gonna say
you know
is
uh
we can say is traditional
you know
we get a modern
this
we’ll call this modern
over here on the right
traditional
on the left
modern
traditional
or overlay
overlay
is overlay
how about is overlay
that’s good
yeah
is overlay
let’s go
yeah
yeah
we don’t
we don’t
we don’t
we don’t need to take a poll
i’ll just say is overlay
and the default
is that it is
is overlay
and
to signify this
what we’re gonna do
is we’re gonna add
probably a data attribute
data
uh
data
card
uh
data style
is overlay
overlay
okay
equals
and
we’re gonna say
props
dot
is overlay
which is gonna give us a true or false
essentially
so data style is overlay
is props dot is overlay
and
I’m just gonna add that data attribute
to this card
and
we’re just gonna stop there
and look at this on the front end
when I’m using that prop
okay
so let’s go to the front end
and let’s inspect
and we’re gonna see that this card
profile card
data style
is overlay
is true
now if I flip this
and save
and I refresh
we’re gonna see
data
style
is overlay
equals false
and now
with that data attribute
I can do some things
okay
and what is actually happening
with this
that it’s
I think I lost
an inset probably
on those somewhere
so let’s go to
media wrapper
when we try
yeah
let’s
I did inset zero
with 100%
hide 100%
let’s put that on both of them
okay
save
I don’t even know
that that’s gonna fix it
what’s
what’s giving me problems now
oh
yeah
yeah
yeah
yeah
yeah
yeah
where is that coming from
okay
there’s a margin
on figure elements
it’s not from etch
and it’s not from ACSS
I don’t know where it’s from
probably Gutenberg
if I had to guess
but this figure
we have to say
margin
of zero
I think
it’s
it’s
I guarantee you
it’s fucking Gutenberg
okay
now
essentially
what do we
what do we
what do we
what do we want to do
this is
a blank box
with pseudo elements
okay
so I’m gonna
I’m gonna say
we’re gonna call this
just fucking
media
I’m gonna
I’m actually gonna
rename this
we’ll call this
fake media
fake media
okay
I’m gonna rename this
fake media
so all of our styles
stay attached to
fake media
right here
and I’m gonna
and I’m gonna make
another
figure situation
with real media
okay
and so this is gonna be
let’s go with a
div
and we’ll call this
media wrapper
and this is gonna be
another figure element
and we’re gonna put that
above our other figure element
but this is gonna have
profile card
media wrapper on it
and then I’m gonna put
real media in here
and our real media
is gonna be the actual
image here
okay
and how do we
want to do our real media
that we
I’m not even worried
we don’t have to position
absolute
or none of that stuff
this will be
the profile card
media
okay
object
fit
cover
object position
50
100%
this one’s gonna get
the aspect ratio
of one
fantastic
okay
now
what I wanna do
I’ve got two figures here
I’m gonna drop in
an if condition
I’m gonna drag that up
here
and I’m gonna drag this in
okay
so
that’s in a condition
and
I’m essentially gonna duplicate that
and I’m gonna drag the fake media
into the other condition
and so now I’ve got two little conditions
right
so
the fake media
is gonna show up
if
is
props
dot
is overlay
and
if I want
yes
the fake media is gonna show up
if
props
is
overlay
and
the real one
is gonna show up
if this is
off
mm-hmm
mm-hmm
we’re getting somewhere
now I have two components here
I believe
let’s save
delete that profile card
duplicate
this one
oh
we’re getting somewhere
we’re getting somewhere
okay
what the
where did all this extra space come from
that’s question number one
what is going on here
okay
this
pat
margin block
start nonsense
needs to go
great
now what happens
when I talk
oh
okay
okay
we’re gonna leave that one on
by the way
save
okay
let’s edit this component
and
okay
this is obviously
the
I just gotta
in my mind here
because I’m dyslexic
this is even harder
when you’re dyslexic
okay
the one on the right
is
is overlay
okay good
um
so when that is
is overlay
which by the way
you can also preview
right here
so you can
you can just
this is how you
preview it
um
okay
well
since that
content wrapper
just needs
literally just needs
to go to the bottom
when we’re is overlay
so now I’m gonna come in
and say
we’re gonna style
this
and we’re gonna say
data style
is overlay
equals
true
we’re gonna find
the profile card
profile card
double underscore
uh
content wrapper
border
five pixel solid red
got it
um
align self
end
is that
is that gonna work
or justify
self
end
or
the old school
margin
block
start
auto
trusty
trusty
always works
okay
um
hmm
hmm
color
white
white
white
there you go
uh
huh
okay
uh
I would say
what is that
profile
profile card
name
also
color white
uh
uh
svg
also
color
white
okay
I think
that svg
probably
needs
um
a little
strip
color
attributes
looking good
um
this svg
actually I would say
content
let’s go to
content
let’s go back to
where we were
we were on the
profile card
let’s go down
there
I I would
let’s take this
I made a little
mistake there
of trying to put
too many things
in there
let’s put that
here
put that here
okay
svg
okay
svg
well that svg
now
should be
out
okay
okay
all it needs
to have in
there
is the
same
thing
so that
svg
also needs
to strip
color
attributes
oh this
is just
gorgeous
this is
just
gorgeous
okay
okay
save
refresh
holy smokes
we might
even have
time
to do
the button
styling
okay
all right
edit component
by the way
the very next
update
when you can
you’re going to be able to save components
without exiting the component editor
and that’s just going to make my heart so warm
and fuzzy
i want the light version
okay so it’s like a it’s like
i would do this to all primary buttons probably
so we’ll just do
we’ll start an acss with this
and probably have to do some custom bullshit
but if i go to buttons links and i go to primary and i go to background
i would start by neutral
neutral ultra light
because it’s like a light it’s like a light gray
and then text color would be neutral
dark
probably
let’s look
i would i would say that’s
they’ve used an ultra dark there
um border color
does it have a border
i don’t think it has a border
i don’t think it has a border
uh transparent
and focus color
doesn’t matter
okay
so that’s essentially what i can control
for the primary styles
and now we’re going to have to go
here
and you could do this either
either way
you know
you could target button primary
or
um
and by the way you don’t have to do this necessarily in
in acss
like i can
delete that
i can do that here
if i wanted to
you know
um
so button primary
and i could do
it definitely has like a box shadow
uh it probably has two of them
um
zero zero
zero
twenty
pixels
holy smokes
uh that’s the wrong zero
it seems
this zero
okay
uh neutral
dark
trans
ten
okay
twenty
ten
it’s very
it’s kind of subtle
actually you know what
well they have one over here
did they
did they really remove the box shadow
when there’s no image behind it
fuck off
for real
designers
just fuck yourself off
that’s terrible
what like
quit doing this to us
what are you doing
what do you
what do you have against
the box shadow
what
it can’t just
it can’t just stay there
all right
here we go
this was how i
designers need to know
that we say these things about them
you know
okay
um
and then i would say
i’m pretty sure
zero zero
ten
ten pixels
zero
i’m
i’m just gonna leave it red
i’m gonna play with like
minus
yeah
yeah
kind of
there
there
it’s getting there
five
eh
ten
uh
five
ten
five
no
not that one
okay
we’re probably
gonna do a negative
on this one
oh
oh
oh
okay
okay
far white
i
don’t know
if this is dark enough
buttons
links
oh
oh
oh
shit
this
this is the
uh
fuck
okay
what do we want to lose
what do we want to lose
do we want to lose the elements
or do we want to lose the styling
we’re gonna have to lose the styling
we don’t want to lose the elements
okay
there’s a
there’s a shortcut
conflicts between uh
this app and that app
uh
which is
which is uh
that’s that’s not a good situation
uh
it’s already on the list
it’s already a known thing
i just forgot it when i was doing that
okay
uh
let’s go back into buttons and links
just don’t backspace
um
really need something
neutral
semi
dark
oh
having three dashes
does not help the situation
neutral
semi
light
i’m trying my best not to reverse backspace
okay
um
i want to use the semi light
and then i’m gonna have to just
uh
change its value
85
95
90
okay
that’s better
now let’s try to do what i was just doing a second ago
so let’s go in here
and go to button primary
okay
or you could do it on action if you wanted to
but if you want to do all your primaries
you have to do it there
okay let’s just try this one more time
fox shadow
inset zero
uh
minus 10
pixels
minus 10 pixels
10 pixels
minus 5 pixels
okay
var
white
there you go
so you get this little glowy
glowy effect
um
um
i think they
they reversed that though
uh
which
lord help me
there we go
that’s all we need to do
okay
and then
i’m just eyeballing this
i don’t have a figma file to inspect
so i’m just eyeballing it
i think we need to kind of do the same thing on the bottom almost
like you have to add one that’s the reverse of that
so you do another inset and now you do your negatives
um
and you put a comma between these
so
can you
well the question is can you do
yeah you can do
you could definitely do two
okay
now this one
is
neutral
dark
trans
10
so you get that kind of
we’re just creating this like 3d effect
maybe this is minus 10
it’s a little more
subtle
and then because these colors are so subtle
you got to switch back and forth to see exactly what
what your coverage is
okay
it’s 20
something like that
it’s a little more aggressive than what they have
but
i honestly don’t care
okay
so there you go
you got to you got this kind of
obviously we don’t want
i don’t think we want blue
to be the hover cover
but i
you know
again
i don’t care
um
it is by
it’s a little too 3d for me
it’s kind of bothering me a little bit
um
and we also need more button padding
so we’ll go to
buttons and links
and
uh
we’ll go to global
and inline padding
uh
let’s see
that looks fine actually
we can bump this up to 0.75
yeah
yeah yeah yeah
whatever
and then of course
we’d put an icon in there
and such
but it is what it is
okay
um
i’ll let you guys decide
do you want to do the dark version
what we’ve got here
okay
let me delete these
oh that’s so scary
that’s so scary
it’s okay
they’re still there
uh
if i want to put them into a page now
you literally go
hey
there’s my
oh
you know what
we don’t
it looks like
we have to account for one more thing
which is
when it’s in overlay
we need to get our little
uh
padding margin
shit back
okay
so
let’s open that up
let’s view that
profile card
so
profile card content
ah
margin block start
of
auto
auto
on the content wrapper
we actually don’t need that anymore
300 pixels
save
okay
so now
look at this
we’ve got
two little versions
of the card
man
the blur is not great guys
let’s just be honest
the blurs
i don’t know what to tell you
i
they
this is a
a highly tailored thing
i’m not convinced
you can actually do it
without a hard edge
now if i’m allowed to have a hard edge
we could do more of
what that looks like
but
can’t
i don’t know
i think you’re gonna have a hard edge
no matter how you do it
um
use a neutral button in there
uh
yeah i mean you could use
you could use whatever you want
i was saying to do this
if all your buttons are gonna look like this
on the website
if they’re not all gonna look like that
then obviously yeah
you
you do a
a different one
um
how would we
okay
let’s do one more step
i think we have time for one more step
so now what we’ll do
is we’ll edit the component
and we’ll say
is dark
so
get another boolean
and we’ll call this
uh
is dark
okay
and
we’re gonna do essentially the same thing
which is
i’m gonna steal
this data attribute
data style
is dark
and i’ll say props
is
dark
and i’m gonna add that attribute
as well
okay
uh
the question is did it add it
because i had it
uh
selected
let me see
save
i don’t know if it added it or not
let’s go to the front end and check
inspect
okay
did profile card
okay
did not
uh
data
style
i are
i are
i are
literally
my short-term memory is so bad
i already forgot the syntax that we’re using
data style is
okay
data style
is
dark
equals
props dot is
dark
add
there’s your data attribute right there
okay
so now the question is
um
if it is dark
which we can
preview
toggle the
the preview
and we’ll come down here
i do
i’m just gonna do everything with nested css
and
data
style
is
dark
equals
true
border
five pixel
solid red
there we go
okay
we’re targeting
so
what do we want to do
when it’s
dark
we want to go
background
neutral
ultra
dark
color
white
great
we also need to target
the
uh
profile
profile card
name
and i’m also
i’m gonna
i’m gonna do this as an
uh
as an is
is
profile
profile
card
name
and
as
all
svgs
color
white
it’s almost like
it’s almost too easy
sometimes
uh
some things are too easy
and some things are too hard
the blur
too hard
is dark
a little too easy
okay
um
i mean
look at this
this by the way
is why we did not do
snapshot component
variations
because
literally now
i don’t need more
variants
i i only have two
props
and they just work
together
because
you can have
is overlay
overlay
and dark
but you can also have
neither
you can have just one
either
neither
all
of the above
and they just work together
now if you wanted to
do something else here
we wanted to keep
keep playing
right
um
you take that
content
wrapper
and
oh no
you look
no
we need to preview
the is overlay
and we need to look up here
at this fake media
shit that’s going on here
and say
linear gradient
two bottom
rgba
0001
at 65
percent
that’s essentially
black
right
but it
okay
but it
but the mask
is taking the mask
out
so i don’t
i don’t know
that you can darken
i don’t know
that you can darken
this blur
let’s do a test
oh you can
but you’re going to get
the hard edge problem
again
yeah
you’re going to get
the hard edge problem
again
that’s annoying
it’s annoying
no
that doesn’t do anything
yeah
background image
yeah
yeah
you could do
a
border image
border image
what is it
fill
one
one
fill
fill
one
fill
one
red
for border
image
fill
one
what is the
syntax
what is the
fucking syntax
for that
how do you
use
border image
fill
for
creating
an overlay
effect
yeah
shut up
grok
too wordy
crock is right
you’re too wordy
grok
fill
fill
with
outset
image
no
no
no
no
no
no
you know
what
you know
what
you know
what
you know
what
screw you
screw you
grok
I have
better resources
like my own
framework
why can’t I
switch
oh it’s two
windows
okay here we
go
that’s it
that’s I was
right
why is it
not doing
it
why
look at
grok
still
fucking
talking
he’s still
going
unbelievable
unbelievable
I guess
it’s just
not
you’re not
able to put
it on
there
what about
on
fake
media
can’t do
it on
there
either
huh
just to
show you
what I’m
trying to
do
I should
be able
to do
it on
on
here
for
example
it’s not
doing it
on here
either
I have to
go play
around with
that more
it’s a way
to create
an overlay
I don’t
know why
that’s not
working
image
fill one
typo city
okay
I don’t
I don’t
know
I don’t
know why
it’s not
working
I should
try doing
it to
a
image
I swear
this is how
we did
it before
has
anybody done
this before
it’s a
technique for
creating an
overlay
like a
cheap
little
quick
overlay
because I
have it
where did
my other
window go
I want
it’s
it’s
giving me
the etch
code base
instead of
ACSS
this and
I don’t
know
where
the
other
window
went
cursor
there it
is
I
say I’m
using it
right here
in our
textures
and
overlays
background
over
mix blend
mode
that’s
something else
it’s
something else
it’s
something else
it’s
literally
should just
be border
image
fill one
and a
color
it’s literally
what it
should be
on your
filter
on your
filter
can you use
the brightness
I think it’s
gonna get a
hard line
but that’s
okay
I mean
we did
most of
what we
came to
do
you know
I always
think it’s
pretty dope
when you have
a card
with the
background
behind it
too
it’s a
nice little
subtle
thing
but we’ll
delete that
so just
to recap
and then I’ll
answer questions
and then I gotta
go
so we
have
two variants
overlay
and not
overlay
pretty cool
pretty dope
pretty neat
oh sorry
we didn’t do
the obvious
things
okay
you gotta prop
all this
content out
so that you
can actually
make this
usable
it’s very
quick
one
two
three
four
five
you need
five pieces
of content
so one
two
three
four
five
this is
just a
name
this is
the
bio
this is
the
what
what is
this
number
down
here
stat
okay
button
label
button
URL
grab this
little target
pow
it’s like
it’s like
duck hunt
grab this
pow
grab that
you gotta
do
it’s
it’s
required
when you’re
making
components
to do
this
pow
okay
right here
pow
okay
it’s not
actually
required
but it’s
fun
so
for the
button
URL
we are
we can
just
literally
go
href
equals
and then
put that
in
and it
does need
to be
in little
bracketies
okay
and you
can even
go like
target
equals
blank
bang
pow
right
sound
effects
you need
sound
effects
when you
when you
dev
okay
and now
just like
that
I can
go
Kevin
Geary
okay
guy who
makes
pretty
lousy
cards
on the
internet
okay
and I
got
I got
one
follower
yeah
follow me
okay
oh we just
saw a little
problem there
we can try
to fix
that
button
URL
pound
sign
okay
oh
what we
can also
do
is
drop a
little
okay
maybe
drop a
little
clickable
parent
in there
maybe
that
shit’s
like
swiss cheese
bang
bang
pow
yeah
shout out
John
Belligan
okay
I think
to protect
that what
we need
to do
is a
little
bit
of
profile
card
action
text
wrap
no wrap
should
probably
get that
job done
yeah
yeah
maybe
maybe
so
maybe
so
oh no
but that’s
why
why isn’t
the button
growing
what kind
of structure
are we
working with
here
let’s go
to
refresh
why
what’s
stopping
the button
from
growing
flex
center
gap
is it
that thing
being
no
what
is
what’s
stopping
it
it can’t
it’s not
this grid
next to
it
right
it might
be
might
be
no
doesn’t
care
doesn’t
care
if that’s
flex
or grid
what is
acting
up here
how about
how about
this
how about
we take
you
and
data
point
inline
size
max
content
um
file
card
label
text
wrap
no
wrap
now
are you
are all
you fuckers
happy
okay
let’s go
edit
component
this now
is going
to be
footer
align
items
center
justify
space
space
between
save
refresh
okay
okay
okay
uh
now
let’s test
again
so
that’s
obviously
not
what we
want
you can
also say
um
if you
were in
a loop
or something
you could
put dynamic
data for
follow the
person’s
name
um
yeah
so now
if i
want it
to be
uh
not dark
i just
untick a
box
if i
want it
to be
overlay
version
bang
pow
rocket
ship
okay
there you
go
look at
all these
little
variants
look at
all this
this is
fun
this is
fun
the hard
point
or the
hard part
was the
uh
the whole
blur
situation
what a
nightmare
what a
nightmare
the
blurs
um
data point
is a
flex
div
100%
yeah
uh
yeah
so that’s
why i
went max
content
on that
and it
made it
start behaving
okay
oh i
you probably
also do
flex
shrink
zero
on the
button
too
um
if
is that
really not
a uh
an acss
default
by now
instead
of
text
wrap
no
wrap
flex
shrink
of
zero
see
there
there
it’s
still
trying
to
shrink
it’s
still
trying
to
shrink
that’s
what
it is
it’s
flex
shrink
of
zero
okay
all right
let me answer
some questions
thinking about
it more
try the
brightness
real fast
since it’s
inside the
same thing
that is
blurring
it
okay
all right
all right
okay
settle down
settle down
uh
we want to
preview
is overlay
and
then we want
to go to
our
what did you
want me to
do brightness
on
our content
wrapper
or
our fake
media
overlay
situation
oh this
brightness
right here
yeah
but it
it saturates
the colors
is the
problem
with
brightness
pain in
the ass
um
yeah i mean
you can go
two and
then
but yeah
you’re really
messing with the
image at this
point
so i
don’t i
don’t know
that blur
looks so
garbage like
maybe it’s just
because it’s
like her legs
it makes it
look weird
i don’t know
but it’s
yeah that
blur
technique
it’s like
more of like
a fairy tale
kind of
blur
it’s not
the blur
we were
really trying
to go
for
oh yeah
you you
want uh
sorry we’re
trying to
make it
darker
0.7
um so let’s
go down to
fake media
and brightness
0.7
yeah so you
could you
could darken
it there
so the
problem is
this filter
shorthand
i bet you
can do
this
brightness
1.1
okay so
i’m gonna
go var
brightness
1.1
and then
i’m gonna
go profile
card
is dark
true
brightness
0.7
holy smokes
look at
that
it gets
darker
okay
uh
it’s also
not blurring
the edges
um is
that
was that
in the
i don’t
know
if it
actually
blurs
the edges
or not
it’s hard
to say
this is an
extremely
detailed
card
um and
we have
no figma
file
so uh
we eyeballed
it and we
we did our
best in
the little
amount of
time that we
had for the
very little
amount of
money that
we’re currently
making on
this project
which is
zero because
we’re just
having fun
uh can you
include this
component with
uh within
etch no
no this is
uh garbage
this is garbage
we’re just
playing around
um i mean
the bad blur
is bad but
you’d agree
with what you
had yeah
i mean
yeah
um
size jump
when it
switches i
think the
original one
is pretty
spot on with
the image
size being
the exact
same uh
well you
don’t see
the jump
you don’t
see the jump
you’re never
you’re not
animating between
the two
you know
uh you’re
creating a
grid of
them like
this you
know like
you’d have a
bunch of
profiles let’s
go uh
grid three
right uh
that’s awful
take off with
l there you go
so you have
all these
cards in a
grid right
and you
save and
you refresh
and there
they are
right and
then when
you’re on a
different page
see we go
out here and
we go to a
different page
and we say
add page
another page
all right
and we
uh actually
what you can
also do
let’s go back
real quick
uh where
were we
sample page
okay let’s
just hijack all
that
let’s go back
okay and
another page
another page
let’s just see
if we can
do this
and we
hijack there
we go
and now we
just say um
is overlay
is overlay
is overlay
obviously you
would want to
loop these so
you didn’t have
to do them
one at a
time like a
chump but
it’s not that
bad okay
save and now
we have a page
where we’re using
these in overlay
so you’re not
it’s just it’s a
it’s a variation
for like when I’m
on a different
area of the site
and I want to
use a different
variation of the
card it’s very
very easy to do
that and maybe
on this page
I’m also like
you know what
these aren’t
supposed to be
dark either
they’re supposed
to be light
so I go ahead
and just make
them light by
ticking off a
little toggle
and and really
you’re in a loop
so you only have
one of these
cards to manage
inside of the
loop and then
you tick tick
you make it the
variant you want
and then it
loops and then
you’re you’re
good to go
but this just
shows how how
easy it is to
and I could just
add another
variant and
another variant
I could I
could make a
variant another
toggle that says
has bio
right let me
in fact let me
show you how
easy and let me
also show you
that this is
very important
I don’t have
to go find
the original
card to edit
it and add
more things
right so now
I’ve used this
card on two
different pages
I can edit
any of them
and I can build
in new logic
now like even
though it was
done I can
always come back
and add new
logic right so
I can say this
prop is gonna
say has
bio okay
has bio
like that
and I want
the default
to be true
okay now
I’m gonna open
this card up
and I’m gonna
come down here
and I’m gonna
find the
bio okay
so here’s the
bio right here
and I’m gonna
hold command
and I’m gonna
hit the if
condition which
is gonna put
the condition
right next to
it so I can
simply drag
the bio
into it okay
and then I’m
just gonna say
props dot
has bio
so if
bio is true
is on
it’s gonna
show the
bio
I’m gonna
hit save
and I come
out here
and I tick
this box
and now
it doesn’t
have to have
the bio
and I have
yet another
variant
that I can
use okay
grab this one
has bio
no
so now none
of these three
have bios
but these do
have bios
it doesn’t
mess up my
other cards
that I had
already created
and deployed
I’m just able
to flexibly
like build in
yet another
variant
and when I
do my
official
training
on components
and the way
that I do
them on the
sites that I’m
actually building
now is
you build the
card and you
make it a
component and
you put in
the props
and then you
move on with
your life
you don’t
think about
oh what other
variant might I
need
no no no
no you don’t
that’s over
complicated
you just do
the one you
need now
and that’s
like the
main one
and then when
you get to a
point where you’re
like ah I need
a new variant
cool just build
it when you
need it
and then when
you get to
another point
where you’re
like ah I
need another
variant
cool just
build it now
just whenever
you run into
the need for
another variant
that’s when you
program another
variant you don’t
try to think
ahead like oh
what are all the
variants I need
no you don’t
need to do
that you just
build them as
you go right
and it’s very
very efficient
that way
what if you
did aspect
ratio of
one on the
fake image
figure to
preserve the
space where
the real
image used
to be
you could
potentially do
that you could
potentially do
that I don’t
know if you
need to but
you could for
sure the
corners are not
concentric they
are concentric
they are
concentric we
did I don’t
know if you
came in late
but they but
they we did
make them
concentric now
concentric in
this case is a
slight variant
because the
padding between
the two
elements is
very small
but here’s
your concentric
radius formula
right here on
the border
radius but we
did do that
okay let’s
do questions
I got to get
out of here
questions questions
questions so
I’m going to
hashtag cue
this why
won’t it let
me search
let me search
sir hashtag
wait a minute
did I lose my
keyboard hold
on hold on
hold on hold
on let me
nope I did
not lose my
keyboard so
why can’t I
search in
ecamm ecamm
won’t let me
search that is
weird okay
let’s let’s
interview interview
chat no comments
and reactions
that did it
yeah okay
closing and
opening worked
okay
has the new
logo been
discussed would
love to hear the
motivation inspiration
yeah it was it’s
been thoroughly
discussed you
will see an
official unveiling
soon and a
lot of yeah
we’ll do a whole
work up on it
when do you
anticipate frames
working with
etch really good
question got to do
a separate video on
that there’s
some did I
break something I
literally broke
something trying to
show you the
concentric radius
unbelievable
unbelievable this
is why don’t say
it doesn’t have a
now it definitely
doesn’t have a
concentric radius
because of you
because of you
well done
all right let’s
see profile card
I did oh I
was it was putting
those hashtag cues
in there isn’t that
cute
order radius
order radius
wow
type bro
type
radius
plus
card padding
divided by
two
concentric radius
restored
okay
um
is there already
a way to use
dynamic image
svg data from
s
from a cpt
in the hsvg
module bro
um
yeah you can
use an svg
not you can’t
use an svg
element dynamically
you can use an
svg image
dynamically
yes
um
but not an
actual element
could you do a
tutorial on how to
build a menu
mobile menu
and etch
yes
uh
we will do
that separately
uh
are you building
both of them
next
okay we did
that
are you going
to sell
nick’s website
template in the
inner circle
uh
we’re
uh
probably gonna
rebuild it
in etch
and then sell
it
uh
so will you be
providing this
after you finish
it no
uh
is it possible
to export all
the css to
external files
in etch
and does it
is it treat
does it tree
shakeable
um
it is not
possible to
import or
export anything
currently at
the current
at the current
time
um
but this will
all eventually
be get a
bull
and so all
this work that
you’re doing
you can push
to get
um
can you build
vertical side
headers with
and export
import
uh
can you build
vertical side
headers with
etch
you can build
anything you
want with
etch
um
can you
include this
component
with uh
with etch
no
okay
uh
i think
that’s all
the questions
i think
that’s all
the questions
um
i think we
had a little
fun
it was
this
the
the whole
point on
here was
to get
i want
i personally
wanted to
just work
through the
scenario
of like
how do
we
with the
toggle
switch
go from
square
image
to full
image
with the
overlay
okay
we
accomplished
that
uh
and then
i just
wanted to
produce more
content for
people to
see the
component
architecture
at work
the way
props
work
the way
booleans
work
how to
map
the things
how you
can
how you
can
not manage
snapshots
of components
but just
have behaviors
that you’re
defining
do you want
it to be
dark
or not
dark
do you
want it
to be
overlay
or not
overlay
uh
etc
etc
etc
etc
how we
can use
data
attributes
this is all
by the way
getting more
and more
and more
robust
every day
we’re working
on an array
prop
right now
so if you
want a little
sneak of what
we’re working
on currently
we’re working
on an array
prop
which is going
to be very
very fun
um
we are working
on the
component
editor mode
you’re going
to be able
to save
without leaving
the component
editor
uh
you’re going
to be able
to refresh
the builder
when you’re
working on a
template
without leaving
the template
editing
mode
so that’s
coming
um
we’re working
on a
we’re going
to be working
on very soon
a repeater prop
it’s not going
to be called
a repeater prop
uh
but it’s a way
to essentially
have multiple
instances of a
group of props
um
yeah all
all of that
is being worked
on
uh
we have a
we have a
i need to
kind of do
an explainer
on how we’re
going to be
handling
prefab
components
like an
official
accordion
carousel
yada yada
yada
because we
actually
have a
very interesting
take on how
that should
happen prior
to september
or in other
words
not happen
prior to september
and even though
it’s not happening
why that’s not
a bad thing
why that’s
actually
perhaps a
good thing
um
oh
import
export
of components
is
being worked
on
uh
in asap
form
if
crack
is still
here
if
nick
is
still
here
if
any
third
party
developers
are
still
here
and you
want to
get into
the game
on
selling
third
party
components
without even
needing a
plugin
without even
just
straight up
buy the
component
import the
component
use the
component
that kind
of thing
like
that is
right around
the corner
you need
to be
thinking
about
like you
want to
now
if it’s
just some
simple
stuff
maybe
you
offer
it
for
free
but
if
you
want to
build
some
badass
component
with
all
these
props
and
all
this
stuff
all this
logic
and
javascript
attached
to it
and all
this
crazy
stuff
going
on
and
you
want
to
sell
that
you’re
going
to be
able
to
sell
it
and
people
are
going
to
pay
you
and
they
just
import
it
into
their
install
and use
it
bing
bam
boom
done
you need
to start
thinking
about
that
creators
out there
Reuben
you still
hear
Reuben
creators
out there
need
to be
thinking
okay
there is
a lot
of
affiliate
money
to be
made
when we
open
this
up
in
July
you
start
cranking
out
content
put
your
little
affiliate
link
for
etch
down
in
the
bottom
start
showing
people
how
this
stuff
works
start
persuading
them
on
hey
you
got
to
get
into
the
etch
the
affiliate
commissions
are
very
sweet
okay
the
percentages
that are
being
offered
at this
stage
of the
game
that you
probably
if you
were smart
already
got in
on when
you saw
it
earlier
there’s
going
to be
a lot
of
money
to be
made
in
this
game
okay
where
the
entire
ecosystem
is going
to
emerge
around
etch
and it
is going
to be
insanely
valuable
and
profitable
and rich
and
everybody
is going
to
benefit
the
users
the
creators
the
everybody
okay
you need
to be
thinking
about
getting
in
on
this
game
thanks
for the
refresh
not
leaving
the
template
yes
is the
bug
that
removes
the
default
spacing
between
images
and
sections
in
etch
and
acss
already
fixed
i’m
on
etch
0.24
and i’m
still seeing
the huge
placeholders
is the
bug
that
removes
the
default
spacing
between
images
and
sections
in
etch
between
images
and
sections
in
etch
what
does
that
mean
pablo
can you
expand
on
that
between
i can’t
imagine
what that
means
between
images
and
sections
between
are the
affiliate
commissions
recurring
commissions
um
um
well
there’s
no
subscriptions
yet
so
no
uh
because
there’s
no
subscriptions
now when
we have
subscriptions
we need
to be
we need
to think
about that
i haven’t
talked to
the i
can’t
answer
you
because
i
haven’t
talked
with the
team
about it
so it’s
something we
need to
talk with
the team
about
uh
you can’t
send me a
link
pablo
on
send it
in the
etch
community
dm me
in in
the etch
community
because you
can’t send
them on
youtube
it’ll
strip
your
link
um
i’ll go
over here
for a
second
and i’ll
i’ll
await
your
dm
okay
yeah
right here
and we’ll
see what
you have
to say
let’s
close some
of these
out
while
we’re
here
i
i am
of
i’m
currently
of the
belief
that that
blur
can only
be created
in figma
and not
in css
i don’t
think that
can be
replicated
in css
if you
can prove
me wrong
i would
love to
see it
i’m not
convinced
this blur
right here
that i’m
talking about
i think
that is a
figment
of our
figma
imaginations
um
i assume
unlike
a
plugin
something
you
import
from
the
edge
store
won’t
be able
to get
an
update
that’s
what’s
interesting
um
we haven’t
discussed
it 100%
yet
so like
when we
build our
native
prefab
components
obviously
those will
be able
to receive
updates
uh
but if
you’ve
deployed
it
i don’t
know
i don’t
know
not
sure
pablo
you better
hurry up
kevin
i kind of
succeeded
with that
blur
i can
send you
the code
i did
it just
now
yeah
send me
send me
the
send me
the code
better yet
send me an
example
i don’t want
the code
like do
it in
if you do
it in
an etch
install
or something
send me
the link
you know
go use
zipwp
or whatever
i don’t
think you
can do
a diagonal
blur
with
css
us
but i’m
willing to
learn
i don’t
do a ton
with blurs
but we
need to
because apple
is telling
us the
whole entire
world should
be glassy
blurred now
so we
better get
good at it
i guess
because you
know every
client every
bev that
has an
iphone
oh just
wait just
time’s
ticking my
friend that
update drops
every bev with
an iphone is
going to be in
your inbox
why don’t we
have the glass
blur on our
website
yeah they’re
gonna want
it
they’re gonna
want it
yeah the
diagonal would
be on the
mask not the
blur exactly
yeah which is
why i don’t
think don’t
think it’s
possible
because if
you’ve seen
that we’re
not even
see in
figma you
can just
blur that
part right
you just
create some
custom crazy
blur
but you
saw in
like css
land we
had to
duplicate
the image
and then
you just
kind of
blur the
top image
and then
the back
image kind
of pokes
through but
it’s not
perfect it’s
not great
yeah or
you have a
hard edge
and if you
want a hard
edge this is
easy this is
you know snap
your fingers it’s
bing bang boom
it’s done
you can’t
include a
link striped
goat it’s
gonna get
stripped
okay so
here is
Pablo
okay
insert your
heading here
Pablo I
don’t see the
image I
mean I
don’t see
the issue
what are we
what are we
what are we
looking at
here
where is the
issue
is the issue
in the room
with us
Pablo
it can be
done without
duplicating the
image the blur
and the mask
will okay
crack I’m
challenging you
to recreate
the card
and show us
I would
love to
learn
Pablo I
don’t see
an issue
here
where’s the
issue
where is the
issue
the issue
after updating
to 0.21
I think I’ve
lost the
auto spacing
between images
well I
mean if you
if you want
me to show
you
I mean I’ll
just use the
logo so it
can be
whatever
it’s hard
to see
with the
SVG
let’s do
an actual
image but
these are
going to be
tall so it’s
going to be
annoying
space between
images
before some
previous version
when adding
placeholders
you’d see
the gap
between them
yeah I
don’t
you might be
doing something
wrong I
don’t know
even with the
placeholders
placeholders have
gaps between
them
auto spacing
of course if
you don’t
want the
gap you
know you
can get
rid of
it
dot rand
dude what
is I think
my keyboard’s
like off to
the side
gap zero
now there’s
no gap
now there’s
an auto
gap
yeah so
might be
doing something
wrong I
don’t know
all right
that’s gonna
be it for
today we
were just
having fun
poking around
doing some
stuff I’ll
do I’ll do
you know a
bunch of
these from
time to
time when
I’m bored
and whatever
just want to
hang out I’m
still recovering
from this
cold so I’m
not like
100% into
just let’s
get some work
done I’m
just kind of
like let’s
just mess
around on
live stream
whatever so
yeah that’s
it I will see
you guys again
very very very
soon thanks for
tuning in peace
Thanks.
Thank you.
