Transcript

00:00 in this video get ready to learn about
00:01 all the amazing new gradient tools that
00:04 we have access to in the new wallpaper
00:06 stack so I don't know if you've ever
00:15 tried to create a gradient right where
00:19 you take multiple colors and try to
00:21 create something that looks nice I have
00:24 to say a lot of times it's tough right
00:26 it's tough getting that really perfect
00:28 gradient so what I wanted to do in
00:31 wallpaper is to make it easy for you
00:35 right so I want to make it easy for you
00:37 to have access to beautiful gradients
00:39 that are pre-made for you out of the box
00:42 and I think I've done exactly that I'm
00:44 really excited to show you let's jump in
00:46 and look at all the amazing things that
00:48 we could do with gradients inside
00:50 wallpaper so here I have just a vanilla
00:52 wallpaper stack I've added in a bit of
00:54 content so it looks pretty right um and
00:57 one thing I did is I've just nicked the
00:59 variable settings so it's 60% height so
01:02 that when we preview this page it looks
01:04 nice and big and we can kind of see the
01:05 background in all of its glory right um
01:09 before I get started I just want to let
01:11 you know in this video we're only going
01:12 to be covering covering the gradients
01:14 and I have two other videos on patterns
01:17 and all of the layout settings so make
01:20 sure that you check those out
01:21 in this video we're only going to be
01:22 reviewing the gradient settings so
01:26 without further ado we're gonna go to
01:27 wallpaper and you'll notice that there
01:28 is a gradient feature let's go ahead and
01:30 turn that on oh right blow us up look at
01:34 this amazing gradient very colorful
01:36 probably not something I use all the
01:37 time but it is very fun um and it can be
01:41 very nice to use so but if we go to this
01:44 gradient setting we'll notice that there
01:46 are tons over a hundred and eighty
01:48 almost 200 gradients that you have
01:50 access to and you have to admit that
01:53 it's kind of hard to know like what is
01:56 plum plate oh look plum plates quite
01:59 nice how would I have known that well if
02:02 you when you purchase wallpaper you will
02:05 notice that there are multiple stacks
02:07 that ship with wallpaper we have the the
02:09 wallpaper stack the main stack then we
02:11 have two other stacks that allow you to
02:13 browse
02:13 patterns and the gradients so since
02:16 we're talking about gradients let's go
02:17 ahead and add the gradients browser to
02:19 the edit mode and here you'll notice
02:22 that we have access to view all of the
02:24 gradients that we have within wallpaper
02:25 right very cool so this gives us a
02:29 really quick easy way of perusing all
02:32 the gradients that are available within
02:34 wallpaper we can find the name of it and
02:36 then go to the wallpaper stack and
02:38 select the exact gradient that we want
02:40 now you don't need to worry this
02:43 gradient browser does not preview it
02:46 doesn't get published at all so when you
02:48 preview the page you'll notice that it's
02:50 not there right um it only exists and
02:53 lives inside the edit mode now if you
02:55 want you can turn off scroll samples and
02:58 it will just turn into one big old list
02:59 if you like it if you prefer that
03:03 so you see there's a lot of really great
03:05 depending on your color scheme of your
03:07 site there's some really great you know
03:10 gradients here now one thing to point
03:12 out if you wanna if you're worried about
03:14 old browser compatibility um that don't
03:17 support gradients because there are some
03:18 really ancient browsers that obviously
03:20 don't support gradients
03:21 um the background color is used right
03:24 now you're not gonna notice this
03:25 background color until you know you know
03:28 if you turn off the gradient right but
03:30 if you turn on the gradient and your
03:32 browser supports it you're gonna see the
03:33 gradient but this background color is
03:36 definitely still used to fallback for
03:39 browsers that don't support gradients
03:41 now the next thing that we have control
03:43 over is something called a vignette and
03:45 if you use this you'll notice that it
03:47 brings you a nice you know vignette look
03:50 kind of an inner shadow um sometimes the
03:53 default color you know black can be very
03:55 jarring right it kind of looks like it
03:58 makes it look like it's inset on the
03:59 page that's not really what we want
04:01 right so what we can do is we you know
04:03 we can customize the color of that
04:05 vignette as well so you know we can go
04:07 ahead and make that kind of a darker
04:09 purple maybe give it you know some
04:12 opacity so that it's not quite as as
04:15 strong but that gives us a very nice
04:17 effect where it kind of zones in on the
04:21 middle of the the wallpaper you know the
04:24 content by having this vignette in there
04:26 it definitely draws the eyes to the
04:29 center because our eyes are drawn to the
04:32 lighter components of the page so by
04:34 adding a vignette it's gonna definitely
04:36 draw our attention to this middle part
04:38 of the page let's preview it to get it
04:39 get more of an effect so as you see here
04:42 on the page we have this vignette that
04:44 really draws our eyes to the center
04:47 content to the content right in the
04:49 middle of the stack right so even though
04:51 we have a gradient we kind of add some
04:52 more variation to this gradient with
04:55 this vignette it's very great effect now
04:57 while I'm not gonna review patterns in
04:59 this video I just want to stress that
05:01 you can mix and match gradients and
05:03 patterns together right so if you turn
05:06 on both of those features right you have
05:09 access to actually have a pattern on top
05:11 of your gradient so the last setting
05:14 that we have available to us is position
05:16 okay and this is their static and fixed
05:20 I might be wondering you know normally
05:22 we think of fixed position as something
05:24 that's used for images right where you
05:26 know the image is fixed on the
05:27 background how does that work with
05:29 gradients well let's have a look so here
05:32 I've changed things up a little bit I've
05:33 added some content to the pages so that
05:35 we can kind of scroll up and down the
05:37 page a little bit and I've set both of
05:39 them just to use this wide matrix
05:40 gradient purely so that we can really
05:43 see how it differs between static
05:46 position and fixed position now the
05:49 settings for these are identical the
05:52 only thing that's different is I've
05:53 changed the background position from
05:54 static to fixed so if we go down to this
05:57 one down here we'll notice that it's
05:58 position fixed okay let's go ahead and
06:01 preview the page so if you notice up
06:03 here at the top I have my nice banner up
06:05 at the top and you know with this kind
06:07 of crazy gradient and if I scroll you'll
06:10 notice that it's just static right it
06:12 just this the background fills that
06:14 container the gradient fills that
06:16 container and that's it
06:18 right but if we scroll down the page
06:20 you'll notice that the wallpaper now
06:24 because the gradient is fixed the
06:27 grading is applied to the background of
06:29 the browser okay and as we scroll down
06:33 or up the page okay well notice that the
06:37 we get this really really cool effect
06:39 that the gradient is changing as we're
06:42 scrolling now this is a very drastic
06:44 effect right because you know we're
06:46 going from an orange all the way to a
06:48 blue but we can get some really great
06:50 subtle effects as well with some of the
06:52 other gradients now here I've switched
06:55 to the black see gradient and I've said
06:57 actually both wallpapers to be fixed so
06:59 you can kind of see what the scrolling
07:00 effect looks like I say scroll down
07:03 you'll notice that it's not extreme it's
07:05 subtle right but we have a very nice
07:08 transition of the color of the gradient
07:10 right so it's not as drastic as before
07:13 but it's a very nice visual effect it
07:16 kind of almost looks like an animation
07:17 right on the page so as you see we can
07:19 really leverage these gradients to give
07:21 us a very nice very stylistic page now
07:24 there's one last feature I almost forgot
07:26 to mention and that is well what if you
07:29 don't like any of the gradients
07:30 wallpaper has like it is possible yeah
07:33 there are 200 gradients but there might
07:35 be something that doesn't really fit
07:37 with your design and you're like Joe
07:39 like I want to tweak it I want to use my
07:41 own colors how can I do that well we're
07:43 lucky because wallpaper supports custom
07:46 CSS gradients as well and let's see how
07:49 we can do those so if we head back into
07:51 rap revert you'll notice that on the
07:54 gradient setting we can go all the way
07:55 up to the top and look at there's custom
07:57 CSS now if you look at this setting
08:00 there for custom CSS you might think
08:02 that's Greek Joe to me I don't
08:04 understand CSS at all why are you
08:06 expecting me to do this I'm not okay um
08:10 so if you look at the tooltip for the
08:12 custom CSS you'll notice that I
08:14 reference a URL here a site called
08:16 grabby and com
08:18 now there are a ton of CSS gradient
08:22 generators out there that you can use I
08:24 happen to enjoy this website they have a
08:27 bunch of pre-built ones as well you can
08:29 also customize the ones that you see
08:31 there so if you go ahead and click on
08:34 this you can change the angles right you
08:37 can go ahead and click on this and
08:38 modify the colors so you can really it's
08:41 kind of a live gradient editor directly
08:43 inside the browser it's pretty cool now
08:47 if you hover over you'll notice that the
08:49 top left corner there is a copy CSS
08:52 button I'm going to go ahead and copy
08:54 that and what that does is it takes the
08:57 CSS code that you need and puts it on
08:59 your clipboard now if we go back into
09:02 rapidweaver I simply need to paste that
09:04 code into the custom CSS setting and
09:08 we're good to go I now have my custom
09:11 gradient that I got from grabbing accom
09:13 directly and I can see it right now in
09:15 its head edit mode so that does it for
09:18 the gradient part of wallpaper I hope
09:21 you enjoyed it make sure they again make
09:23 sure that you check out the other videos
09:25 that we have on the patterns and the
09:27 layout settings for wallpaper it's a
09:30 very powerful stack it's gonna really
09:32 allow you to make your website shine
09:34 right with those subtle gradients if you
09:36 overlay patterns on top of them it's
09:39 just beautiful you can make some really
09:40 stunning things with this and make sure
09:42 these share
09:43 sites that you build with wallpaper
09:44 because I'd love to see some of the
09:46 beautiful things that you do with it so
09:47 until then we will talk to you later
09:49 thanks bye
09:59 "}]