hello everybody welcome back to css3 in
30 days today is day number 20 and we
are gonna be making
some random animated pyramid let me show
you what's going on here so i needed an
idea for a project to make
and i was starting to run out of
inspiration and i thought
what can we make that's
interesting possibly practical and
exercises some css3 chops
and
the best i could come up with in this
particular moment was an animated
triangle
so
here it is
on your journey to css3 mastery spend at
least 20 minutes learning how to code a
triangle
okay so let me show you before before
you skip this video and go do something
better with your time
um
we have a little triangle here and when
you hover over the triangle watch what
happens it's a lot more interesting than
what you see on the screen so far here
we go
so check it out when you hover over this
triangle
it creates a bigger triangle with two
other layers and then text appears and
the colors change
so it's actually kind of interesting and
it's super easy to make and it is
practical so it did check off all the
boxes
uh and the way i might think of how you
might display this is
if you were
if you had a piece of text or maybe you
offered a service let's say you're a web
designer and you you're building a
portfolio website and you wanted to
display
the services you offer this could say
you know i'm hiding the text so this
could say services and then when you
hover over services it splits down and
shows the services that you create they
could be images as well
if you wanted to display maybe like um
you know different layers of a project
if you had like the final final project
in like the top part of the triangle and
then like the wireframes and then you
know then the sketch below i don't know
just coming up with random ideas here
but
maybe you have some thoughts on how you
might use this and it's simply three
elements that that when you hover over
them they just animate down and appear
the interesting thing that's happening
here is that they're actually these
elements are actually three rectangles
and i'm not using borders to create a
triangle like we did in a previous
lesson just a couple days ago
i'm actually
clipping the entire element so this
whole thing is wrapped in an element
called triangle and triangle is clipped
to a custom
shape that i created of the triangle now
let me show you in the code editor what
is going on so you know what i'm talking
about
so go ahead and download 20 animated
pyramid and
fire it up in your code editor and let's
get started here in index i'm going to
show you the markup looks simply like
this
dave with the class of triangle wrapping
three individual divs with the class of
top mid and bottom and then text within
each of the divs
that's it now what we're going to do in
our sandbox is simply style those up
clip it and
transition it it's really quite simple
so let's just get started here in the
sandbox
we're going to get started and we're
just going to
style up the triangle triangle is going
to have a position of relative
height of
320 pixels that is the total height of
of the triangle when it's done
and
uh and i'm going to leave the clip path
for now
we're going to start with just
rectangles and we'll do the shape after
so you know what's going on triangle
and then div so we're selecting the divs
within the triangle and those are the
three individual divs background red
width 100
height 100 pixels we'll start with the
bare bones here we're going to go margin
zero auto and color white for the text
uh just so you can see everything let's
give them a little space just so you can
see uh margin zero auto and then 10
pixels on the bottom just for now so you
can see there we go we have three
three red triangles now this shape is
not only a rectangle but can sometimes
be
a triangle
let's uh tighten up the text a little
bit we're gonna say
line height 100
line height 100 pixels so it's
vertically centered text align center
font size 0.8 m
if we save that refresh it so now we
have top mid and bottom so
we have the three rectangles let me show
you what happens when i mask
the entire element
with a clip path so now watch this is
where the magic comes in
so we're going to say up in triangle
clip
path
we're going to do polygon and here's how
it works we did have a lesson on
creating custom shapes so if you want to
unders if you forgot how this works go
back to that lesson
creating custom shapes using clip path
uh and then you'll understand how these
coordinates work but let's start here so
we're going to have three
comma separated
couples of values so let me let me show
you how this works so we have 50
and zero
so if i leave it at that let's see what
happens
you can't see anything because we need
other coordinates so comma
separate the next two values 20 percent
and 100 percent
save that and see what happens
still can't see anything okay and now
we're gonna do one more eighty percent
and one hundred percent
save that let's see what happens now
there's your triangle the end result
of the shape you see how it's masked so
you can only see what's within this
window now if i change these values you
can customize the shape so if i said
like fifty percent there
it looks like this
uh you know ten percent
it's actually got a longer left side so
if i were to say zero this might help
you understand
so that's the zero percent
mark
on the x axis
yes
and then if i move that over twenty
percent
it's actually going in 20 percent
and then 100 let me change that to like
80 percent
it's actually now it's on the y axis so
on the vertical axis the y axis if i'm
if i'm not mistaken
and so now it's 80 down from the top but
if i want it 100 down from the top it's
going to give me that perfect shape
you can have it any shape you really
want you can make it really wonky
looking
shape like that if you want it's kind of
neat
but i'm just going for a perfect
triangle which is 50
in from the top left
and zero so it's staying on the zero
uh up here that on the y axis
and then you got 20 in and then you got
100 down and then 80 in and 100 down
creates the triangle
beauty love it now
let's
hide those two the mid and bottom
uh shapes rectangles you can call them
polygons and hide them up at the top and
then show them on hover
so now what we're going to do
is we're going to position
absolute
the triangle div we're going to say top
0 we're also going to hide the text so
the color of the text is going to be red
and we're going to remove that margin
auto 10 it's just going to be margin 0
auto so there we go save that now you
can only see that triangle so now we're
in the right place but when we hover
nothing happens because we're not
telling it to do anything
so
what we're going to do now is we're
going to say down here
triangle
hover so on hover of the triangle not
the triange the word triangle is
versatile and can also be pronounced
triang
div
color white so all the colors of all the
divs are gonna be white and now
all the the mid and the bottom are gonna
be separate positions so so all we need
to do is move
the position of the of those elements
separately i don't wanna have them both
be like you know
top
100 pixels because what's going to
happen
is they're all just going to move down
to there it's it's really really weird
so
we only want the middle and the bottom
ones to move so now we're going to say
triangle
hover
and then
the class of mid so we're selecting mid
we're going to move it down see if i
move it 100 pixels let's see what
happens and let's change the background
while we're happening over here to green
so let's see what happens
so you see mid
and still the top but it's actually the
bottom one is hiding up there because
the zed index so
we're actually going to fix this really
quickly
so the reason why i'm what i'm going to
do now is bottom is is is here
we can see it within this clip path and
mid is actually working there's no gap
there we'll fix that but i want to fix
the z index of the top so
let's actually go here
uh
before the hovers so we're gonna say
just top
zindex one that should just put it in
the front of everything so top is the
one that you always see so that when it
animates
the top is always in the front when the
other ones slide out behind it rather
than the other one sliding out in front
of it which would look just a little off
okay and now let's see where was i let's
go
back to our triangle hover
mid and move it down 110 pixels because
i want that gap in between them
like that cool
okay
and now the uh the other thing we need
to do is i'm going to copy this and i'm
going to paste it change it to
bottom
now we need to move it down 220 pixels
because we're going down another 100
pixels change the color to blue
save that refresh
hover now your triangle appears but it
doesn't look very exciting because it's
just appearing and that's not actually
doesn't have any meaning to the
to the you know the functionality and
it's just weird it's quite off-putting
so all we have to do now
is actually
under the triangle div
style
say transition so it's not a true
animation it's actually just a
transition we're going to transition all
of the things that can be transitioned
so position color
background
you know
height anything that we change will
transition with an ease at 0.6 seconds
save that refresh now try
so
there we go
that looks looks good
and that's it now let me just show you
actually why i did this top z index
i'm gonna take that out and show you
when i hover now without that you see
how they're
the color these ones are coming from the
top they're coming from in front of the
element
if i did it really slow like six seconds
you'd see it
watch see how it's bottom and mid
they're coming out from in front of top
i don't actually want that i want it to
slide out from
see
i want it to slide out
from behind
so by having that z index
and let's do
the six seconds again it looks more like
this
they slide out from an under
like that
that's a bit more of what i want
and maybe what i want to do is actually
give mid as that index in front of
bottom so it doesn't so bottom doesn't
slide out in front of mid okay so let's
say mid
we'll just go like this
mid
it gets a z index of one and top gets a
zed index of two
save that
now watch
there we go
now bottom slides behind mid mid slides
behind top that's exactly what we're
looking for let's go back to our 0.6
second transition
now try it
that looks clean
there we go
and that's it that's uh that's it for
today's
animated pyramid project now
the way you might use this is totally up
to you
depending on your project on your
website maybe it's a portfolio thing and
you're displaying information there's
lots of interesting things you could do
you can use different shapes you don't
have to use a triangle you can use a
circle you can have more elements that
slide out
there's lots of different ideas that you
can do so
maybe that gave you some ideas maybe
that kind of
made you think of a few different things
either way you got to spend
10 or 15 minutes with me making an
animated triangle so hope you're having
a great day and i'll see you tomorrow in
day number 21.