Hey, what’s up, everybody?
Welcome back to the channel.
I have a super practical training for you today.
This is one of those unicorn trainings.
Like, everybody is gonna get something out of it.
Beginners, intermediate, advanced,
there’s something for everybody.
And it’s insanely practical.
Like, you can use this on such a wide range of projects.
Let me show you an example.
Now, on the surface, this looks very simple.
These are process cards or step cards.
They count like step one, step two, step three.
But there are two key requirements,
especially with this design in particular,
which again is fairly common.
And I will say that 95% of developers
build these the wrong way.
And I’m gonna show you the right way.
And there are two requirements
for building this the right way.
First requirement, the cards have to count themselves.
You can’t just statically number these things
because then you can’t use them in a loop.
And if you need to shuffle them around,
it just causes chaos.
It’s really annoying.
It’s not maintainable.
It’s not scalable.
We need these cards to count themselves automatically.
That’s not actually the hard part.
That’s fairly easy.
You can do that with CSS.
You don’t need any JavaScript or trickery.
But I will teach you how to do that.
The second part,
and this is gonna get us into the advanced territory,
is this cutout.
You notice that the numbers are,
they appear to be cutting out the border of the card.
That is not so easy to do.
Now, what most people will do
is they’ll create a box with a number in it,
and they’ll give the box the same background color
as the section that the cards happen to be in.
The problem with that is,
once again,
it’s not very scalable,
maintainable,
because you’ve got to manually control that.
There are ways to maybe automatically control that.
But if you use a gradient background on the section
or a pattern background of some kind,
these cards will not be compatible with that design.
What we need to do
is we need to build this in such a way
that the background doesn’t matter.
It can be gradients.
It can be patterns.
It can be whatever.
It doesn’t matter to us.
And we never have to touch it.
We never have to change it.
There’s a specific technique that we can use
to build this card.
But again,
we got to talk through it.
We got to walk through it.
I promise when I get to this advanced part,
I will go very, very slow.
But we are going to build this step by step.
So buckle up,
grab a coffee,
grab whatever you need.
We are going to learn something today.
Okay?
All right.
Let’s go ahead and jump into Etch.
Okay.
So I’m going to create a section.
I’m going to duplicate the container that is inside.
This one right here is going to be my intro.
This one down here is going to be our process grid.
This is going to be our process section.
Okay?
This is going to be my intro,
which is going to have a heading,
and it’s going to have text in it.
And we will just call that intro.
I’m actually just going to create BEM classes.
Actually,
I’m going to make this a lead.
And then I’m going to right click,
create BEM classes.
We have a heading,
and we have a lead in our intro.
Next is my process grid,
which I am going to put a flex div in.
This is going to be my process card.
In that,
I’m also going to have a heading and text.
Now,
the difference is,
this is going to be an H3 heading.
So I’m going to change that to H3.
I’m going to change this to description.
Now,
we are going to be using some pseudo elements
for the numbering and all of that.
So we don’t actually have to put those things
into the card.
I’m actually fine with just these two elements in the card.
So I’m going to go,
actually,
I don’t want to create the component there.
I want to create a,
I want to create BEM classes.
We can make this a component for sure if we want to,
but we don’t need to worry about that right now.
I just want to get my styling classes added.
And then this is going to be process grid.
This is going to be process section.
I’m just hitting command enter
to pull up that add attributes bar.
And I can go really fast with that.
Okay.
On our process grid,
let’s just say display this as a grid.
And let’s say that this is going to be a grid three
with grid template rows of one FR.
And so now if I duplicate that,
you’ll see that we have three cards
showing up in that grid.
I’m just going to say our process with this heading.
And for here,
I just want some Ipsum text.
So we’re going to say Ipsum short.
And then I’m going to grab,
I don’t need all of that.
I’m just going to grab that little bit right there.
And then with my intro,
I’m going to say align items to the center.
Typography is going to be text aligned
to the center as well.
On this lead right here,
we can say,
what do we,
what do we want to do here?
Maybe we’ll go to dimension
and we’ll go to inline size,
maybe 50 characters,
something like that.
I actually want to put this
on the max inline size.
So that’s working pretty well for our intro.
Now we’re going to say,
this is step one.
This is step two.
These are going to be the static headlines,
right?
And then I need some Ipsum.
Actually,
I’ll just copy this Ipsum right here
and I’ll paste it in there.
Awesome.
And for our description,
I think I want this typography to be text S.
So that’s going to be a small text size.
In our process card itself,
under layout,
we’re going to go with a card gap.
Now you can put whatever values you want.
You could 20 pixels,
30 pixels,
one M,
half an M,
one REM,
whatever you want to do.
I use a variable first approach.
This comes from automatic CSS.
And so everything is tokenized
and it’s already tokenized for me.
So all I got to do is plug in tokens
where they’re supposed to go.
And I don’t have to think about any numbers
and I don’t have to think about
any relationships with other numbers.
And I just,
it’s just very efficient.
It’s very fast.
Okay.
I want to align the items to the center.
I also want to text,
align these to the center as well.
And we are getting very,
very,
very close.
Now I am going to take off
just a little bit of copy
out of these cards.
Okay.
Perfect.
And I’m just going to start
styling the card up
just a little bit
by adding some padding.
So we’ll go down here.
We’ll say card padding.
See,
I don’t have to think about,
again,
I don’t think about numbers
or values
or anything else.
Now,
I will tell you,
we’re going to flip back
to our example here.
Okay.
This border,
because of the technique
that we are going to have to use
for the cutout,
we can’t just put this border
on the card.
I would show you,
let me show you
how I would do that.
Okay.
I can go even to border
right here
and under this border property,
I can do something
like one pixel dashed
and then like my border color dark.
Okay.
And if we go
and we look at this
on the front end,
which I’ll open in a new tab,
there you go.
There’s the border.
Okay.
Now,
the border on this website
is actually not one pixel.
I actually have something
called border width
and it’s something
that’s like 1.5 pixels
or something like that.
So that’s like the real border,
but I’m just going to tell you,
okay,
a little warning.
Due to the techniques
that we have to use,
we’re not going to be able
to put a border
on the card itself.
We are going to have
to use pseudo elements.
Okay.
So I’m going to put in
our first pseudo element.
We’re actually going to need
a second pseudo element
for the number,
for counting.
Okay.
And so I might as well
just do the first one,
which is going to be our border.
And I want to go slow
and explain this
because everything I’ve done
so far is extremely fundamental
and very beginner.
And now we’re going to take
our first step
into intermediate territory.
This is not to the
advanced territory yet.
This is into intermediate territory.
So I will slow it down a notch.
Okay.
So here’s what we’re going to do.
We’re going to take
that border out.
We are going to go down
and this is where custom CSS
really comes in
very, very, very handy.
Doing this kind of thing
with a UI
is extremely annoying.
So we are using
what’s called nesting in CSS.
This is vanilla CSS.
There’s no trickeries
or anything like this.
You can do this
in any CSS now.
And we are going to add
a pseudo element
using an ampersand.
An ampersand
is a reference
in when you’re nesting.
An ampersand
is a reference
of the class
that you are doing.
It’s like me writing
process card again.
Okay.
But what I can do
is I can attach
my pseudo element
to the ampersand
and this is going
to create a pseudo element.
If you don’t know
what a pseudo element is,
I’m going to write
hi.
It literally produced
an element on the page
called hi.
It’s not a real element.
I can’t click it.
I can’t select it.
I can’t.
But it is there
in the DOM
and it actually shows up
as a child
of the element
that you add it to.
Okay.
And so there’s
my pseudo element.
You can see already
that if that had a number,
it would look like a step.
Ha ha.
Look at that.
But we’re not doing
content right now.
Okay.
We’re doing design.
And so I am,
I want actually
to create a border
using a pseudo element.
So that border effect
that we were just looking at,
I want to create
with a pseudo element.
Okay.
So what we’re going to do
is we are going
to make blank content.
If you make blank content,
no content shows up.
However,
you can still make shapes.
Okay.
So what I can do
is I can give this
a position of absolute
and I’m going to show you
a little bit of a trick here.
Well,
I’ll walk through this step by step
just by making this easy
with 50 pixels,
height,
50 pixels,
backgrounds of red.
I make a box.
I just made a red box.
Look at that.
Okay.
Now,
when we do position absolute,
if I gave this coordinates,
which we use
the inset property
to give absolutely
position things,
their coordinates,
and this accepts
four values
going in order
and clockwise,
top,
right,
bottom,
left.
Okay.
So the top value
I would say is zero.
Don’t mind the fact
that it flew out of our box.
Don’t mind that.
Okay.
Zero.
The right side value
would be auto.
I don’t care
how far it is
from the right.
I don’t care
how far it is
from the bottom.
So that’s auto.
And then from the left,
I actually want it
to be 50%.
There’s a little caveat
where absolute position elements
don’t actually go halfway
when you put them 50%,
which is why you have
to translate them back.
Don’t worry.
I’m going to do this
all over again.
I’m going to translate
it backwards 50%,
which is just going to
actually kind of nudge it.
And then this other zero
is from the top or bottom.
I don’t want to do anything
to the top or bottom position.
So I’m putting that at zero.
And then the reason
it’s way outside of our box
is because there’s nothing,
there’s no attachment context, right?
So in order for this pseudo element
to attach itself to our card,
our card needs a position
of either absolute or relative.
In this case,
we want it to be relative.
And now you see that
that red box is attached
to each specific card.
Okay.
Now I’m going to do that over again
and show you,
well, what should have happened.
Okay.
Is we want the card.
If we know we’re going to
absolutely position something
in the card,
start by positioning
the card to relative.
That way,
when you’re doing your coordinates,
right?
I’m about to do my coordinates.
Now you’ll see that
the coordinates actually
render properly
and make sense.
You can see what you’re doing.
So position relative
on the parent
should actually be
your first step in this.
All right.
So the next thing I’m going to do
is I’m going to give
the coordinates again.
So remember,
top is zero
and I could just say zero,
right?
And here’s an actual trick
because I want,
remember,
I’m trying to create a border
around the entire card.
I actually don’t want
a 50 by 50 red box.
I want a box
that is the exact dimensions
of my card.
And a trick to doing that
with absolute positioning
is just do an inset of zero
and then take away
any height or width.
And you’re going to see
that what it’s trying to do,
it’s trying to attach itself
to all four corners.
And if you try to attach
something to all four corners,
what do you have to do?
Like a bed sheet,
you have to stretch it
across the mattress.
It’s going to,
it’s going to cover
the whole entire thing.
Okay.
So that’s what my pseudo element
is doing right now.
Okay.
Now the next thing I want to do
is I want to Z index
this of minus one.
And whenever you Z index
of minus one,
it’s going to go
in the back layers wise.
It’s going to go
on the very bottom most layer,
but that can actually
go behind things
in your section
if you’re not careful.
And so what we want to do,
this is borderline
intermediate advanced.
Okay.
This is why I’m,
I’m walking through,
I’m like talking
through every part of this.
When you go Z index minus one,
you need to determine
where it should stop.
Okay.
And I want this
to start going backwards,
but I want it to stop
when it gets
to the actual card boundaries.
Don’t go behind anything
that the card
is on top of.
Okay.
Stick with the card.
And so the way you do that
is you set isolation
to isolate
on the element
where you want
the bottom layer
to end,
to be like,
it can’t go,
this is the basement.
It can’t go below this.
The card
has a basement.
We’re going to put it
in the basement
of the card,
but it can’t go underground.
It can’t go any further down
beyond that.
Okay.
So isolation,
isolate,
Z index minus one.
These work really,
really,
really well together.
Notice that one is on the child.
One is on the parent.
Okay.
Great.
Now we can keep going.
Do I want a red box?
No,
I don’t want it to have any color.
What I want
is to give it a border.
What border?
The border I was trying
to give the card
originally.
Okay.
So I’m going to say border
and I’m going to say
border width,
and then I’m going to say
dash border color dark.
And then if I hit tab,
etch is going to wrap the bars
and it’s going to
make all of that stuff work.
Okay.
Then I’m going to say border radius.
And this is going to be
my card radius.
Once again,
etch will wrap the bar for me.
Okay.
So now I can just save.
I can look at this.
Okay.
We have exactly the same thing,
but we’re not going to run
into any problems
as we approach
our final destination.
You’re going to see very important.
I will explain why
we had to do that
with a pseudo element
in just a minute.
Okay.
All right.
The next thing that we want to do
is we want to get
our counting going.
Okay.
And so I’m going to come down here
and we’re going to add
another pseudo element.
You get two pseudo elements
on any element.
You get a before
and you get an after.
I already used the before.
I’m now going to use the after.
So I’m going to say
ampersand after content.
Now I’m just going to put
in a static number.
We’re going to position that number.
We’re going to change
the number size
and all of this.
We’re going to get it
in the right spot.
and then we’re going to have,
we’re going to figure out,
we’re not going to have to,
because I’m going to teach you.
We’re going to figure out,
we’re going to learn
how to make that auto count.
Okay.
So we’re going to say content.
Guess what?
I can position it.
Absolute.
Since I already did that,
I’ve already got it relative.
The parent is already relative.
So I can just put this
in its proper position.
How do I do that?
In set.
And then top, zero.
Right, auto.
Don’t care.
Bottom, auto.
Don’t care.
Essentially auto means
go away from that side.
Just stay away from that side.
Right?
And then left,
I want 50%.
And what did we learn
about positioning something
50% from the left?
If you want it really in the center,
you’ve got to translate it backwards 50%.
So now that is dead center right here.
I want the font size to be a value,
but I want it to be a referenceable value,
which means I need to create a token for it
because I’m going to need,
there’s, you’ll see.
Well, should I just do it static?
And then I’ll do it static.
Then I’ll build in the dynamicness of it
so that you can see how we go
from a situation where,
okay, things might break
to, oh, we created an unbreakable situation.
That’s what we’re trying to do.
We talk about doing things right in web design.
We need to be thinking about creating
unbreakable situations
where if something changes,
the whole thing’s not going to catch on fire
and fall apart.
Okay?
We’ll see exactly what that means
in just a second.
So font size,
I’m just going to say is H1 for right now.
I want the line height to be just one on this.
And I want to give it some dimension.
Okay?
I’m going to give it an inline size.
That’s a width of,
and let’s say this is going to be H1 times 1.5.
And if I hit tab,
it’s just going to auto var that,
auto calc that.
That’s really good.
Okay?
And I can actually take this
and say that the block size
is the same thing.
I didn’t copy the C in the calc.
Okay?
So I’ve got inline size and block size.
I’m essentially creating a square
out of this calculation.
Take whatever the size of H1 computes to,
make it 1.5 times that.
And then what you can do
is make it that on both dimensions.
Okay?
So it’s just,
it is a perfect square.
Now I want to move,
instead of positioning this at the top,
I want to move it
so that the number is halfway,
like the border is cutting
halfway through the number.
Well,
I need to move it up.
How much?
Half of its size.
Well,
guess what?
I know what its size is.
Okay?
I just need half of that size.
Now doing half of this,
again,
is going to create a situation
where this is very messy,
right?
You don’t really want to do it like this.
So times 1.5 divided by negative two.
Well,
essentially,
let’s put a background color on it
so you can see.
Background of red.
And okay.
So the box,
this is why putting backgrounds on things
actually does help.
You can identify where your boxes are.
Putting,
putting,
like this box is perfect.
It’s in the perfect position.
The number is not in the right position
in the box.
We need the number
to be in the center of the box.
Turns out this is,
quite difficult in CSS
for a lot of people.
Centering things in CSS,
not the easiest for many people.
I’m going to show you
the easiest possible way to do it.
When you have one item,
display grid,
and then what we’re going to do
is place the items.
So place items,
center.
It’s going to put that
right in the middle of the box.
So little display grid trick for you.
Display grid,
place items,
center.
I’m just reviewing,
making sure my head’s not
in the way of anything.
It’s not.
I need to make sure
it stays that way.
Okay?
I think we’re good.
I think we’re good.
Actually,
what I’m going to do
is move myself real quick.
I’m going to put myself
right here for a minute.
Hopefully,
I don’t think that’ll get
in the way of anything.
We can even move that down.
Good.
Because we’re going to get
into some
little crazy CSS here
in just a minute.
Okay?
I really hope
I’m going slow enough.
Listen,
if I’m going too fast,
feel free to pause,
rewind,
go in slow motion,
whatever you need to do,
but I can’t go
hyper slow
because then I’ll lose
the advanced people.
They’ll be like,
whatever.
I don’t care anymore.
Okay?
All right.
So,
let’s keep going.
I’m going to take away
the background of red.
We don’t need that.
My number,
guys,
is now in the exact
right position.
and now what I have to do
is I need them
to just auto count.
I don’t want them
to be static anymore.
Okay?
So,
I’m going to go to my section
up here.
And again,
I’m going to come down
into custom CSS
and I’m going to say
process.
Okay.
I’m sorry.
I got a counter increment.
Counter,
no,
counter reset.
There’s counter increment.
There’s counter reset.
There’s the counter function.
These are very powerful
in CSS for auto counting things.
What we need to do
is tell the browser
where to start counting.
And I have to think
about this multiple times
because it’s not
the most intuitive syntax.
Okay?
We have to do a counter reset
and then we name the counter.
Okay?
So,
I’m going to call this process.
So,
counter reset process.
That’s not very intuitive
because I,
shouldn’t I be setting
the counter?
Like,
I want to counter set.
I want to set a counter.
Okay?
But it’s actually counter reset
is how you name the counter.
It’s,
my nose is very itchy.
We have
literally 90 layers
of pollen
outside this window
and
it is,
I’m not on,
I’m not doing blow.
Okay?
I’m not a Coke guy.
I’m not,
that’s not me.
I know I have high energy
and I’m rubbing my nose a lot.
Doesn’t look good.
Okay?
This would be very hard
to explain
in certain situations.
It’s allergies.
Okay?
I’ve got,
I’ve got the pollen.
So,
counter reset process.
We’re essentially naming
this counter.
Now,
what I can do
is I can go to my process card.
Okay?
I can come down
to my content
where I’m putting my number
and I can actually put
a counter function
and I can say process
and now,
it’s going to put in
some zeros.
And now,
what I can do,
which is also not intuitive,
is counter increment
of process
and suddenly,
it’s counting itself.
Okay?
So,
if you want to auto count things,
that’s the process,
no pun intended,
that you can follow.
And what’s great about this
is,
look,
I can take step three,
which is right here,
and move it
and look,
step two becomes three
and step three becomes two.
the auto counting
kind of makes this order
of these things
kind of unbreakable
as long as you’re not
referencing them statically
in the card,
obviously.
But if I created more of them,
like,
well,
look what it’s going to,
it’s just going to keep going.
I mean,
this is fantastic,
right?
Okay,
let’s,
we don’t need all of those.
We do not need
all of those.
I don’t even know what my,
there we go.
There we go.
Okay.
I was trying to,
like,
what is my keyboard shortcut
for deleting things again?
It’s a new environment.
Okay?
It’s a new interface,
but we’re still,
we’re still making good headway.
Okay.
So I’ve got auto counting
process cards.
I’ve got a fake border.
I’ve got,
I’ve got numbers
in the right position.
And now we arrive
at probably
the most advanced
part of this tutorial,
at which point now
I will slow down
tremendously.
Okay?
So what I’m going to do
is I am going to create
a mask.
I’m going to create
actually three masks.
I need to,
retain
almost everything
going on
except for a little
chunk
right here.
And that’s going to require
some advanced masking.
And this,
but this is going to be
a great lesson for you.
It’s such a good lesson.
And I’m going to give you
so many good tips
for how to approach this
when you’re doing this
on the fly
and you’re trying to do it
from scratch
and you’re not,
you’re not able to use
a generator for this.
Okay?
So what we’re going to do,
it’d be very hard
to use AI for this
as well.
All right.
So what I’m going to do
is I am going to first
create a background
and I recommend
when you’re masking,
you use background gradients
because you can actually
see what you’re doing.
Okay?
And so I’ll just show you
and I’m just going to do
this on the card.
This is not where
we are going to use
the mask,
but it’s where
we can do our work.
All right.
So I’m going to say
linear gradient.
Anytime you do
a linear gradient,
you’re using a linear
gradient function
and we’re just going to
put in two colors,
red, red.
If they’re the same color,
it’s going to be a solid color.
It’s not going to be
a gradient.
Okay?
This is going to be
red, red.
Now we’re going to use
a special shorthand
for these linear gradients
where we’re going to put
a lot of information
in the same function.
Okay?
Or the same line.
All right?
So the next thing
we’re going to say
is no repeat.
We don’t want this back.
It’s actually,
this is not part of
the linear gradient function.
This is part of
the background property.
It’s shorthand aspects
of the background property.
And it’s actually a syntax
that you do not see
very often
because you don’t need
to do crazy shit
like this very often.
But when you do,
it does come in
very, very, very handy.
Okay?
So what we have
is no repeat.
We’re going to do position.
Now I’m going to replace,
I’m just putting keywords
so you can learn.
We’re going to replace
these keywords
with actual values.
So I’m going to say
position,
forward slash,
and then we have
inline size
and block size,
which are effectively
the width
and the height
of the gradient.
Okay?
Or the background,
which is a gradient
in this case.
So I’ve got my gradient,
which is red, red.
I’m saying,
don’t repeat this background.
Position it somehow
and then make it
this inline size
and make it this block size.
So make it this width
and make it this height.
Now,
for this first one,
I want to cover
the vast majority
of the card.
Okay?
So what we’re going to do
is we are going to say
position,
I’m going to attach this
to the bottom.
And remember,
where’s my cutout area
going to be?
Right in here somewhere.
So I can start at the bottom.
I can come all the way up here
until just below the border.
Just below the border.
Okay?
So I’m going to say
position is going to be
the bottom.
All right?
So let me grab this
and say bottom.
And then for the inline size,
it can be 100%.
The block size,
what if the block size,
guys,
is 100%?
It’s going to be exactly
what we just had
a minute ago.
But I actually want
calc.
100%
minus
the border
width.
Okay?
And then I can finish
off that calc.
And the red,
it’s hard to see.
Okay?
But the red
is going to stop
right below
the border.
Okay?
So I’m essentially
going to be preserving
everything
except right now
I’m chopping out
the border
on top.
Okay?
If I made this
a mask right now,
you would see
everything
except for the top
border.
And obviously
that’s not what we want,
but that’s a good start.
to getting us
to where we want to go.
Okay?
Now, again,
you don’t know why
I’m using a
background
with a linear gray.
You’re going to see
in a minute.
We’re just,
all we have to do
is switch the property
from background to mask
because masks
use linear,
they use the exact
same properties,
they use the exact
same functions,
they use everything.
But with backgrounds,
you can see what
you’re doing.
With mask,
very difficult
to see what’s going on.
Okay?
All right.
So we’re just using
simple colors
to make this work.
Now,
the next part
of background
is that you can
have layers.
You can have
additional layers
that do anything
you want them to do.
They’re like their own
independent boxes,
essentially.
Okay?
And so what I’m going
to do for this
is I’m going to put
a comma
and I’m going to
come down here
and say linear gradient,
blue, blue.
And you see right there,
I can see the blue
behind my red box, right?
And I’m going to say
no repeat.
Now, where do I want
to position this one?
I want to position
this one at the top left.
Okay?
So we’re going to say
top left
and then I’m going to
do a forward slash
which separates the position
from the size
and there cannot be spaces
when you do this.
Okay?
So you have to have
no spaces
just like I’m doing it here.
Top left
and then what is
the inline size?
Well, let’s start
with 50%
and then what is the height?
The height, guys,
is the border width.
Okay?
Now, 50% gets me
all the way halfway.
You can see that blue line,
hopefully you can see it,
going all the way
up to the number.
But that’s not where
I want my cutout to be.
My cutout needs to be
essentially the size
of that box.
Okay?
The size of that box.
So what we’re going to do,
we need to now tokenize
the size of that box.
If I go down here,
remember where I did
this inline size,
this block size thing,
it’s just raw values.
Can’t do that anymore.
I need a way
to easily reference
the size
of that step
or that counter.
Okay?
So I’m going to say
counter font size
is going to be H1
and then I’m going to say
counter size
is what?
The calc
and I can actually do
H1
times 1.5
and let Etch
do the calc
and the var for me.
Okay?
So now I have something
called a counter size.
If I come down here
and I go to my inline size
and I can hit command D
and select both of those
and I can just write
both of them
at the same time.
This is multi-cursor editing.
It will be var counter size
for both the inline size
and the block size.
Okay?
So they’re all referencing
the same thing.
But what that gives me
is it gives me a way
to go in here
and reference it
in a calc.
I can say 50%
minus
the counter size
and then
I will finish off
that calc
with another bracket
and you’re going to see
that it’s stopping here.
But guys,
that’s too much.
I don’t want it to go
the entire counter size
amount away.
I want it to go
half
because I’m
on one side
of the counter.
Okay?
So instead of
50%
minus
counter size
I do
minus
counter size
divided by two
and now it’s going to stop
right at the edge
of the box.
Let me go back here
and show you something.
If I go background
blue
look at the box
it’s stopping right
at the edge
of that box.
Okay?
So now what I’m going to do
is add one
more layer.
Now keep in mind
what is this blue line
going to do?
It’s going to show
it’s going to allow
that part of
the border
to show.
Okay?
So now if I turn this
into a mask
the only thing
showing would be
this strip
right here.
Okay?
And now what we’re going to do
is hide the right side
the top right side.
Okay?
Which I can do
by grabbing this linear gradient
pasting it down here
and I’m going to say
green
and I’m going to say
green
and then I have no repeat
top what?
top right
and then calc
50%
plus
okay?
I think
let me see
plus countersize
divided by two
let me put a 50%
in here
and just see
if we can identify
our green
so I have no repeat
top right
oh
I got to put a comma
there
okay?
Not a semicolon
a comma
and there’s green
green’s not a good color
for this.
let’s go with
we got blue
we got red
we got
how about black?
Can I see black better?
There we go
black
so now we can see
the black line
right?
And then I can take
this calc again
I think if I’m doing
my math right
we’re just going to
have to change this
to a plus maybe
calc
divided by two
finish up
nope
it’s actually
the exact same calc
yeah that makes sense
that makes sense
because it’s coming
from the other edge
okay
so now
the only thing
that will be hidden
is the dotted lines
everything is protected
from showing
in terms of how masks work
like whatever is
a black color
we’re going to change
all these to black
is going to show up
and then whatever
doesn’t have
a color on it
that’s going to
be deleted
it’s going to go away
okay?
So what we’re going to do
is we’re going to take
this entire
actually we’re not done
okay?
I’m going to show you
just turn background
into mask
okay?
And then if I change
these red red
all right
to black
and blue blue
to black
okay?
We’re going to be
masking this out
it’s on the wrong
element right now
so I’m going to
copy the entire mask
I’m going to come down
to my
before
where my
this is where
the border actually lives
and I’m going to
paste
the mask on here
okay?
Let’s go ahead
and hit save
let’s go view this
on the front end
we are cutting
out
the number
from
the border
guys
okay?
Now I’m not done yet
I’m not done yet
I got to clean up now
you got to clean up
a little bit
okay?
I’m going to take
this entire mask
and I bet you didn’t
know you could do this
and I’m going to make
a locally scoped
variable
called mask
and I’m going to
come up here
and I’m going to say
mask
and I’m going to
paste that entire
linear gradient function
and now what I can do
because what you have
to do for
max browser compatibility
is you have to do
webkit mask
and reference it
again
okay?
so I’ve got my
webkit mask
as a mask
I’ve got my mask
as a mask
and save
and now go to
the front end
and we are looking
really good
so this auto counts
let’s duplicate this
a couple times
look at this
four, five, six
I mean that is just
absolutely fantastic
right?
alright now what did I mean
when I said we have to
create unbreakable situations
well what if I wanted
that two
to be the H2 size
I can change this
counter font size
oh look
it’s not doing anything
we didn’t link it up
so I need to go down here
and link that up
so the font size
line height’s one
font size
is counter
font size
okay?
so that is linked up now
and this var H1
doesn’t do us any good
that actually needs to be
counter font size
and now watch this
I go H2
H3
oh what’s not changing guys?
the height
the position
of the number
okay?
you need to look at
everything that can
potentially break
when these things change
so if we go to our
inset
and we
oh look
we just statically
referenced that
not good
not good
so what we want
is a calc
of our
counter
size
divided by
negative
two
and that’s gonna put it
back in the same spot
but watch this now
if I go up and change
counter font size
two
three
look it doesn’t leave
its position
and the mask
is responding
the size of the mask
is responding
to the number
so we have an
unbreakable situation
in terms of
if I need to change
the size of these numbers
I can change the size
of them
their position doesn’t break
the mask size
doesn’t break
and if I change
the background
of this
so let’s say
I do something like
BG
ultra light
okay?
look at that
I don’t have to worry
about the color
of the cutout
it just handles it
for me
what if
let’s take that class
off of there
let’s go to process
section
okay?
let’s go to
background
and do a
linear gradient
and let’s do
a
let’s do
var
BG
ultra light
okay?
and
we want
another
color
which is
going to be
var
BG
light
okay?
BG
ultra light
BG
light
that’s
it’s hard to tell
that’s a gradient
but it is
let’s make it a little
bit more obvious
let’s
let’s do
base
ultra light
and let’s do
base
semi light
or something
semi
semi light
there’s a gradient
okay?
this would not be
possible
if you didn’t use
the technique
I know this doesn’t
look good
if you didn’t use
the technique that
we use
if you use the
background color
on this number
like this is what
a lot of people do
a lot of people say
okay the background
is
I’m gonna say
base ultra light
okay
base ultra light
just like that
and then
they’re gonna go in
and on that number
they’re gonna say
that the background
is
base ultra light
and it matches
right?
but if I change
the background
on this section
okay
so let’s say
it goes
it could be a gradient
let me go back here
alright
so it could be
base
light
there’s our gradient
oh my gosh
look how ugly
that is now
so
you
like
you can fake it
by making a solid
colored background
on your number
but you can’t use
gradients now
you can’t use
patterns in the
background now
see I
the way that we
approached it
in this training
I didn’t need
any background
I’m using masks
so I don’t need
a background
on these numbers
if I go take
the background
off of my number
you’re gonna see
that it works
perfectly
and it doesn’t
matter what
the background
is
so it’s an
unbreakable
situation
in terms of
the size
of the numbers
it’s an
unbreakable
situation
in the fact
that they
automatically
count themselves
it’s an
unbreakable
situation
in the sense
that I can
use a background
pattern
or a background
gradient
on the section
I never
have to worry
I’ve got all
this flexibility
in what I
built
and I never
have to worry
about it all
falling apart
because somebody
decided to change
one little thing
and now we gotta
start recalculating
things
or oh we can’t
do that background
gradient because
xyz blah blah blah
right
nope
no we don’t need
any of those
limitations
you build something
the right way
and it’s gonna be
unbreakable
this is an example
of an unbreakable
situation
let me go back
to camera
okay
drop your comments
below
let me know
what you thought
of this tutorial
do you want
more of these
tutorials
like it is
hard to find
I’ll just be honest
it’s hard to find
tutorials where
it appeals to
beginners
and intermediate
and advanced
and it happens
to be super
practical
it’s something
everybody
like there’s
not a ton
of those
like I don’t
know
maybe I just
need to think
harder
but I feel
like there was
so much
that you were
able to pick
up in this
training
and it’s one
of those
that you’re
probably
going to want
to bookmark
you’re probably
going to want
to go back
through it
at least go
back and reference
certain parts
of it
okay
there’s so much
that you can
learn
in this one
training
but I need you
to drop a comment
below
let me know
what you thought
drop a like
on the video
and share it
as well
if you would like
I’ll be back
very very soon
thank you for
stopping by
thank you for
spending some
time with me
and that’s it
peace
Thanks.
