Chào mừng bạn đến với TUTUAPP

Box Shadow Secret

Internet we have a problem because

you’ve been keeping secrets from me I

mean I thought we had something going

Internet I felt that we understood each

other and and the other day I discovered

something I thought I thought how we do

everything about each other I guess it I

guess it should come as no surprise I

mean other people know you too what am I

saying I’m saying dear Internet I

discovered what you did and I like it ah

so a long time ago I made this video

called the box model box sizing and

box-shadow and I showed you that you can

kind of cheat the box model you can you

could fake borders I guess by using box

shadow it’s kind of a fun little trick

in fact I used it here on the killing it

with jQuery course website

I used it right here because you can see

that I have this this content width

right everything is 360 pixels wide and

then when I get to this content well I

wanted this gray box to be outside of

why I wanted it to be bigger than

everything else but the content well

that I had was constricting the width of

it and I didn’t I don’t know maybe it

was just too lazy to stick code it to

make it bigger and so what I did is I

actually used box shadow you see the how

it extends outside of the the actual div

how the gray feeling of it extends

outside of the div those are box shadows

right here I turn on this box shadow

that’s the actual divots and there’s no

padding it’s just box shadow that’s

extending the the the visual feel of

that box it’s kind of funny actually I

was laughing to myself when I did it

background pink just to show you what’s

up so what I want to do today is show

you another thing that I just discovered

about box shadow that just like blew my

mind I thought that you couldn’t do what

I’m about to show you with CSS I thought

there was no way to do it other than

like making like multiple elements and

hacking and nesting and things like that

let me show you what I just discovered

and you might have already known this

but I just it’s my channel and I want to

talk about it gosh

darn it and so here we are okay so there

are four lengths that you add to the

box-shadow property four lengths in the

value what I mean by a length is like

you know right here where it says 1 0

pixels right so the first length is if I

add 20 you can see that it’s offset X if

I add negative 20 you see it’s going to

be going this way right

so the first length or the first value

which we call them likes the first value

is offset X the second one is offset Y

it goes down 20 or net you can go up 20

you put negative 20 on it okay and the

second one is called blur obviously and

the third one is called spread now

spread is something that is kind of

calling it spread is really what limited

my thinking because we have a value for

spread in photoshop and what it does in

photoshop is let me show you here so we

have a 20 pixel blur and I want to put

like a 15 pixel spread on it what it

does is it it let me say idea you kind

of see that working it’s just it’s

taking you know where’s that blur start

right and if you have a 18 pixel spread

that means the blur does not start until

after 18 pixels so if I knock this a

blur down to 0 you can see that the

spread is still there it’s just out 18

pixels does that make sense so the blur

will start if I put the blur at 18

pixels you’ll see that the blur starts

right on that edge what I never what I

never knew about this spread property is

that it’s not you shouldn’t think of it

as spread you should think of it as size

right and I did that just when that when

that paradigm came to me that this is

actually not spread you can look at this

property on MDN Mozilla’s docks for HTML

and CSS and JavaScript and it’s called

spread the spread radius that’s what

they call it and that like totally

limited my thinking but now I’m thinking

of it as

ize interesting things can happen when

you think of it as sighs so let’s go

back here and let’s just set up let’s

call it zero and we’ll set up a regular

kind of like well actually let’s let’s

change this let’s change the color a

little bit so let’s just move it back to

this blue that I had and make the font

colored now I wanna make the blur ten

and what offset it by like seven pixels

okay now how do you in CSS make a button

stand off the page right if we look at

if you look at like material they do a

lot of buttons off the page

material design fab all right let’s look

at the buttons on materialize whatever

what is this framework you see like when

I hover over this button the the box

shadow grows now what’s happening here

let’s look at it I’m getting really

nerdy and into this because this is just

kind of really blew my mind this week

okay so let’s look at it we have this

button and it’s it’s got the class of

floating and let’s look at the hover

state of it so you see how it when I

hover it over I’m gonna click this

button it’s going to get the hover that

the Box shadow grows let’s see what’s

what’s actually happening so the

normally is it zu2 to pixels down five

pixels blur zero pixels spread and then

when you hover over it it goes five

pixels down right from two to five 11

pixels blur zero pixels spread and the

opacity changes a little bit I guess

okay so what we’re doing is let’s go

back to this is all crazy let’s go back

to the but the Buckshot okay so let me

write a box shadow for the hover here

and I’ll just basically copy it and do

what they did which is which is to move

it further away and to increase the blur

so let’s say 17 and 20 so now this box

shadow here should should grow and this

is this is how we get the illusion

that this button is coming up toward you

on the z-axis coming toward you but

there there there’s this thing that I

discovered about the box-shadow property

this week and I’m saying I discovered

I’m sure a lot of people knew about this

but like this is making me go crazy that

you can do this this spread here if you

think about it as sighs you can think

that okay that can actually have a

negative value on it so right here we’re

all right here let’s just make this box

shadow look better

let’s put negative 10 on it and then

move it down 17 okay now you see how it

comes in from the edges right there oh

my life that’s just the gorgeous and so

let’s make the hover a little bit more

exaggerated version of that let’s say

negative 20 and then we have to add

another 10 pixels on to this I think 27

and don’t change the blur oh wow did you

see what happened the box shadow is now

getting smaller and it should get

lighter too we should change this to

like two or something that’s more

realistic right and would it be even

better is if we started we started

translating this so I’m going to

transform translate

let’s do up like 10 pixels so that you

can get that feeling of coming towards

us oh yeah but that see we want to keep

this shadow right here the whole time

say oh it’s moving up I moved it up

another 10 pixels so I need to put it

down I need to translate it down the box

shadow another 10 pixels so this should

be better

oh yeah Wow look at that oh look at that

that’s a classy button see how the it’s

so realistic in the way that the box

shadow behind it moves away get smaller

it gets lighter and

the button itself is moving up now you

can have a few things where the buttons

kind of getting like this herky-jerky

moment right here when when the target

of your you know is moving it can be a

problem there’s way around there’s ways

around that for example we can put a

wrapper around this button target the

wrapper make the wrapper be the one

that’s making all this happen I’m not

going to show you that you guys can use

your imagination but I don’t want to

share this crazy like box shadow thing

that I’ve been using box shadow for

years I never knew this and so that’s

got me going this week thanks for

watching and we’ll see you next week and

keep on hacking of course thank you for

watching this awesome episode of dev

tips and guess what we have if you and

you know are doing website stuff you

probably want to talk to people who are

also doing website stuff who are cool

and fun and we are awesome together so

what I’m talking about is the dev tips

community if you go to

this show by offering a few dollars

whatever you choose for every episode

that comes out so for example this

episode was sponsored by was supported

by it was enabled by the the patreon

community now there are certain levels

of you know donation so people who do

donate get a lot of benefits like a

monthly hangout we have a dev tips chat

I do a dip tips podcast that’s exclusive

nobody else in the whole world knows you

guys also get to get these videos early

so people who are in the community are

watching this video on Friday where

everybody else Monday anyway so check it

out dev tips dot nope not dev tips con

what is this ah patreon calm down tips

come join us

because it’s worth it

what’s up dude hey what’s up website

Internet hey what’s up Internet we got

we got something to talk about today

uh-uh what do we want to talk about

talking about about Tygra okay

um something about how okay Internet we

have a problem because you’ve been

keeping secrets I guess it I guess it

should come as no surprise I discovered

what you did and I like it that was

weird right that’s kind of a ramble like

Internet is a good interrelationship of

the Internet it’s kind of weird

I look so blotchy you’re gonna see some

cool Hortis this is how I comb my beard

in the morning just like this ah now now

we’re ready to make videos oh how does

that turn you on

oh yeah do this you guys know my beard

goes one way my beard this is the

direction of my beard so like these

hairs are much longer than these ones

because they they comb under I have a

beard comb over it’s weird

anyway welcome to dev tips this episode

is this is frustrating and exciting at

the same time it’s frustrating because

I’m I didn’t know something that is

awesome for the very long time and I

recently discovered it I’m gonna share

that with you

in today’s episode it’s about box

shadows let’s just do it let’s just get

into it


Leave a Reply

Your email address will not be published.