good day everybody welcome back to css3
in 30 days today's day number 25 and
we're going to be coding up some sliding
css3 panels let me show you what that
looks like here we go down in our final
result i basically just have an image
and when you hover over that image bam
an element slides
in to frame with some text so this one's
sliding from the top when you slide when
you hover back out it slides back out of
the frame sliding from the right
sliding from the bottom
and sliding from the left so maybe
already you have some ideas of how you
might want to use this
the fact is in css3 it's incredibly easy
to code this up typically you'd use a
plug-in or you'd write some javascript
or jquery to achieve this effect but in
css3 like i said it's incredibly easy
it's slim and lightweight and i want to
show you how to do that right now so up
here in the sandbox you'll see what
we're going to be working with is an
image with some text above that
and we're going to hide that text into
an element we're going to slide that in
from the top bottom left and right
over here in our code editor go ahead
and download 25 sliding panels and get
it queued up in your favorite code
editor
and here in our index.html let me just
show you the markup so you're familiar
here in the sandbox we have a section
with a level four heading that says
slide from top
that doesn't really matter that's just
telling you what each section will
include it's this element that matters
to you right here the div with the class
of slide
and then slide top right bottom and left
respectively within that div we have a
div with the class of slide content and
some text and then an image with the
source of a placeholder image that i
pulled from place img.com
and that's a free placeholder website
you can use that for your own
placeholders i'm using that in this
project
and again you can put any image you want
in there it doesn't really matter it
doesn't have to be an image it can be
content so let's get started over here
in our sandbox
let's start right from the top we're
going to say class of slide
we're going to go position relative
display inline block
and overflow hidden that's because we
want that element on the inside of slide
to be out of view when it's not within
that frame and now we're going to say
slide and then image
we're going to say display inline block
this one's going to be vertical align
middle
and that's going to align that
image within the middle of the element
if you're uncertain about how a style
works whether in this video
or any of the videos or just in your
projects
take it out reverse engineer the the
work that you create so if you don't
know what this specific
property does then remove it and see how
it affects the output and then add it
back in modify the values and see and
experiment that's how i learned as a web
developer as i started building more and
more projects so and that's how i
encourage you to also learn how to
understand css properties and values
okay vertical line middle
now we're going to jump in and maybe
let's just see what that looks like if
it does anything so over here in our
final result in the sandbox rather
you're going to see that it doesn't
actually do anything so far because
we're not telling it to do anything
specific we're not actually modifying it
too much so let's move on to the
class of slide
dash content
and we're going to say position
absolute because we're going to move
that content the content is that pink
box that's going to slide in and out
we're going to say top
0
left 0
right 0 and bottom zero
so it's stress so they're all anchored
so each side is anchored to every
respective side if that makes sense
width 100
height 100 we just want to make this
expand to the full size of its parent
element slide
and now what we want to do is give it a
z index of
one so it's just in front of
everything we're going to use flexbox
here display
flex
align items this is a flexbox property
flexbox based properties we're going to
align the items
center
justify the content center
and then text align center
just covering our basis here let's see
this looks like so far
look at this so this is what it's
starting to look like
it's dead center if i were to remove the
last few
properties here
maybe even if i took out display flex as
well so let me take all of this out so
there we go you can't really see any
change when i take out flex but watch if
i took flex out and tried align item
center it's not going to do that it's
not going to vertically align that but
if i go display
flex
those that align items is now going to
work
nice i like it typically in the past
you'd have to make it
display table and then have another
element within there that says display
table cell and then vertical align
middle
but this is way more lean
using flexbox and it's better it's
better to use flexbox rather than trying
to go back to old school css table
technology
all right especially because tables are
used for data whereas flexbox is
specifically for visual modification all
right
now let's keep going and i'm going to
say padding i want uh whoops i want to
stay in slide content
i want to give it a background color
actually i want to see
i want to see that uh
background pink color so 225 comma 35 69
and 0.9 a little bit see-through
and then we're going to give it a
padding of 20 pixels so that it doesn't
over
so it doesn't go out into the edge of
the
parent
the text color to be white
and i want to give it a box size box
sizing
of border box because that padding i
don't want to have it be 100 wide plus
20 pixels i just want it to be 100 and
the padding within it
i write
transition
transform
[Music]
s seconds and then ease
so that's going to transition the
transform property
that we
that we did we add transform property
yet no but we will
upon hover so
save that let's check it out so now
we've got that style it looks good
but now what i want to do is hide it
and then have it slide in when i hover
so let's make that happen so now i'm
going to say slide
hover
and then i want to say slide dash
content so now what i'm going to do is
say transform
translate and the translate
value
allows us
to
position where we want to see
this animation so zero
and zero now what that means is upon
hover i want it to go to zero and zero
that's x and y
but here
let's say
directions
now what i want to do is say
slide dash top and then slide dash
content so i'm specifically styling the
slide top element here and i'm going to
say
transform
translate
so this is by default this is not on
hover i'm specifically targeting
each uh
each element now
i want to say translate 0 and negative
100 percent
save that
that's going to move it up
100 of its size its height
so now there we go slide from top you
don't see the element you just see the
image of the cat hover
slides down just like that why do we use
translate because the animation is much
more smooth it goes by points of pixels
rather like fractions of pixels rather
than one pixel 2 pixel 3 pixel and it's
a lot smoother of an animation
especially when you have like a retina
screen and you have really high a really
nice video card and all that sort of
stuff
using translate is better for animations
versus using position for animation so
maybe we can have a look at that let me
make this animation go really really
slow 10 seconds let's see what that does
so
very very smooth
i don't even see any clunks at all now
if i were to use
let's say
instead of transforms let's hide this
and let's just use something like top
negative 100
and then if i go
top actually this would be negative 100
and this one will be zero and take
transition let's go all
so i can already see chunks you might
not see it in the recording i've got a
retina screen
um and it's a really large monitor so i
can actually see
i can see the the clunkiness if you made
this go slower like really really slow
something like 100 seconds we're not
going to wait that long and then checked
it out
you're literally going to see it go down
and
you can actually see that
see how it's going down
it's just that's what the animation is
actually doing if you're using uh top or
the position that position property so
we're actually going to change this to
let's go back to translate and see if
that actually makes a difference and i'm
going to uncomment these
remove this oh this is actually
transform okay now let's check it out
amazing difference
proof is in the pudding right here so
you can now see
how that is literally
sliding down like
liquid even if it's if it's a slow
animation maybe you're animating a scene
of elements like a background scene of
clouds and a mountain and mario running
across the screen or something you would
use transform and translate because
that's going to slowly smooth it's going
to be a smooth animation whereas when
you use the top or bottom or left or
right and use pixel values or percentage
value values that's going to be a clunky
animation this is just sliding down just
super smooth so that is proof right
there why you'd want to use transform
translate
for or any other proper translate 3d
translate y and all these sorts of
things these values
for animations because it's very clear
the difference in the animation so let's
put that back
to 0.3 seconds save that
bam it's just nice
really liking this okay so now all we
got to do is just
going to copy this
paste it a few more times change the
value from slide top to slide right and
then slide bottom and then slide left
and then you guessed it all we're doing
is changing these values so slide top is
fine
we want to change slide right to x value
negative 100 and the y value would be
zero
and then if you wanted slide bottom
we're gonna do
um and let's see here we're gonna go
zero and one hundred percent
and i was wrong here so side right is
actually 100
that way to the right
and then bottom is 100 down slide left
will be uh negative
let me see negative 100 on the x and
then zero on the y
save that let's see if all of these work
now we got slide from right beautiful
slide from bottom perfect slide from
left awesome now what if you wanted to
slide from the top left top right bottom
left or the bottom right you'd simply
let's just use one of these for example
um we're going to use just this one i'm
going to say 100 and negative 100 let's
see what that does that's the slide left
see how it's coming from the top left
that's what is happening there you just
have to change these translate values
the x and y i'm just going to switch
that back and there we go slide left
bottom right and top there we go there
are sliding content panels with css3
these are incredibly useful you can use
them for displaying your services
portfolio pieces let's say you're
showing a picture of your portfolio and
when you hover over it content panel
slides in
uh displays the title and a button to
click here maybe you're just playing a
product and you're selling something
the price comes in with the call to
action to purchase whatever it is that
you want to do using these sliding
content panels they're incredibly
versatile i highly recommend you use
these in your own projects and as you
can see the css is way way way easy you
don't need any plugins or any javascript
or jquery plain vanilla straight up css3
so thanks for joining me today in day
number 25. see you tomorrow we're
closing in on the home stretch here day
26 coming up see you there bye now