Transcript

00:09 So, let's dive in and see all the
00:10 awesome things the glass stack can do
00:12 for us. Obviously, it's a stack that
00:14 allows us to create glass layouts um on
00:17 our websites. And if we look at this,
00:19 this demo right here really shows us a
00:22 lot of the basics of what the glass
00:24 stack can do for us. This first demo has
00:27 very it's a transparent glass demo. So,
00:29 we can clearly see through it. We
00:31 clearly see that it's transparent. Um,
00:33 it has a little bit of distortion um for
00:36 the background that it's on top of. Um,
00:38 it has this lovely edge which is the
00:40 default actually look. Um, that kind of
00:43 fades to nothing. Super nice. Um, we'll
00:46 notice that there is a slight bevel like
00:48 an inset shadow that kind of makes it
00:50 look gives it a little bit of glare
00:52 which gives it defining that glassy
00:53 effect. Right. And lastly, you've
00:55 probably seen this nice shimmer effect
00:57 on hover as well.
01:00 Now, if you don't like the transparent,
01:02 you want more of a frosted effect. This
01:04 demo definitely shows that, right, where
01:07 um the glass is, you can see through it,
01:10 but it definitely has a frosted look to
01:12 it. Things are a little bit more blurry,
01:14 they're more distorted in the
01:15 background. Um and also, you notice that
01:17 we have a nice little spotlight effect
01:19 on hover um which can add a really nice
01:22 little effect, uh to your content.
01:25 Next, we'll drop down to this one down
01:27 here, and that is the gradient borders.
01:30 But not only that, notice here that
01:32 these first two demos were kind of like
01:34 very glassy, like clear kind of white
01:37 glass. This allows to show that we can
01:39 actually create colors. Um, we can still
01:41 make it look like glass. We have the
01:42 blurry background. Um, this demo also
01:45 uses the spotlight hover effect as well,
01:48 but the purpose of this is kind of show
01:49 you the nice gradient uh borders that we
01:53 have here. Notice that it goes from
01:55 green all the way to blue. And this
01:57 actually has a very subtle hover effect
01:59 as well. Uh, when we hover over it, that
02:01 gradient spins around one time.
02:05 Now, you might think, oh, I want that
02:07 multiple times. Well, we can now on this
02:09 demo here show that we have animated
02:11 borders. And this particular one just
02:13 infinitely the gradient keeps going
02:15 around and around on this demo. Now
02:17 obviously this demo uh uses colored
02:19 glass as well with a nice um you know
02:22 bokeh blurred effect in the background.
02:25 Um so yeah really great little stack.
02:27 Now with all these features that I just
02:28 talked about, you can mix and match
02:30 those to kind of create your own look
02:32 that you want. Right? These just give
02:34 you the basics of the things that you
02:36 can do with glass, but really your
02:38 imagination is the limit. And to show
02:40 you some other ideas on what you can do,
02:42 let's scroll down here and look at this
02:44 second demo. Now, here we have a menu.
02:48 And you'll notice that when I hover over
02:50 it, we we use that spotlight effect to
02:52 kind of follow your mouse to kind of
02:56 show you where you're hovering. So, it's
02:58 a very interesting way of doing hover
02:59 effects for menus.
03:01 Now, as I scroll down the page, you'll
03:04 notice um right here, you'll notice
03:06 really you'll start noticing with the
03:08 images that the content is bleeding
03:11 through that glass. We're getting a nice
03:13 frosted look through the menu. Okay. And
03:17 another thing in this demo, we'll notice
03:18 that these buttons here. Now, I have to
03:20 admit, this is kind of an accident by
03:22 me. Um I wanted to show off the glass
03:25 swatch. So, these are just your normal
03:27 run-of-the-mill buttons. no special
03:30 effects added to them at all. The only
03:32 thing added was the glass swatch. And we
03:35 used one glass swatch to apply the same
03:38 look and feel to every single one of
03:40 these buttons. And you might be
03:42 wondering, "But hey Joe, all these
03:43 buttons look different." Well, that's
03:45 because they're glass and they're
03:46 bringing in the colors from the
03:48 background into it. So, it really makes
03:51 it merge into uh the background and
03:55 makes it look really nice and fitting.
03:57 Also notice the nice little border hover
03:59 effect here. Um where we're hovering and
04:02 that gradient is switching from top to
04:04 bottom to kind of give us a really nice
04:06 little hover effect. Again, all of these
04:08 buttons were styled with one single
04:10 glass swatch. Now, before we go, I
04:12 should give you a tour of what the stack
04:14 looks like inside uh the stacks edit
04:17 mode. I'm not going to do a full
04:18 tutorial. We'll do a live stream. Make
04:21 sure you don't miss that. Um where I
04:23 will go over every single one of these
04:24 implementations. Right now, let's just
04:26 do a quick tour of the settings. So, you
04:28 can kind of see what uh what this stack
04:30 has in store for you. So, at the very
04:32 top, we have the background settings. Uh
04:33 we can have a solid color background,
04:35 which actually allows you to change the
04:37 color on hover as well, or we can do a
04:40 gradient background where you can
04:41 actually have uh multiple colors and
04:43 give yourself a kind of a glassy
04:46 gradient look, which is really nice. Um
04:49 obviously with a gradient, you can
04:50 change the direction of that gradient.
04:52 Okay, if we're looking at this demo
04:53 here, you can see we can change the
04:55 gradient. Um, and then obviously the
04:57 blur which uh increases the bokeh effect
05:00 or the distortion uh between the glass
05:03 and the background. Uh we have that
05:05 shimmer effect in all of its settings
05:08 and then the spotlight effect in all of
05:10 its settings. So as you turn those on
05:11 and off, those settings will uh will be
05:13 displayed. Then we go down to the border
05:15 settings and this is where we can define
05:18 our multiple colors for the gradient. If
05:20 you just want a solid color, just make
05:22 sure you just set both colors to be
05:23 exactly the same. And then you can use
05:25 the uh direction just as we did with the
05:27 background to change the positioning of
05:30 that gradient. And then we uh as you saw
05:33 earlier, we can change kind of colors on
05:35 hover. Um so you can actually define a
05:37 different border gradient on hover,
05:39 which is nice. Then we have standard
05:41 border width and border radius. And this
05:43 is where we can animate that border. So
05:45 we can animate it once or infinitely.
05:48 And last but not least, we have the
05:49 ability to have that inset shadow which
05:51 kind of gives us that curved uh you know
05:53 glare look and then a drop shadow which
05:56 is is a shadow between the glass and the
05:59 background right to kind of set things
06:01 apart. Uh now the glass container itself
06:04 we obviously we need some padding
06:06 settings and some custom classes if you
06:07 want to apply other swatches or CSS um
06:10 to glass itself. Now the swatch has all
06:13 the exact same settings here. So I'm not
06:16 going to dive into that right now. Just
06:17 be know that all these settings are
06:19 exactly the same no matter if you're
06:21 using the glass stack or the glass
06:23 swatch. So yeah, I hope you enjoy glass.
06:26 It's a really elegant, modern stack that
06:29 is really going to make a lot of your
06:30 layouts pop. So I hope you get it and
06:33 love it. Now go forth and make your
06:35 websites great.
06:42 [Music]