5 CSS tricks every Web Developer should know in 2020

00:02 hey guys it's david from mdbootstrap.com 00:04 and in this video i'm gonna show you 00:06 five css tricks which every web 00:08 developer should know 00:10 let's get started number one is css 00:14 blend modes 00:15 you might see in page like this which 00:17 use this interesting color effects 00:19 mix with the image so i'm gonna show you 00:22 how you can easily achieve that 00:23 using css i'm gonna use this 00:27 photo which we're gonna use as a 00:29 background image to our page 00:31 so let's add some styles 00:35 i'm gonna add our styles to body so 00:38 we're gonna set 00:39 background image to 00:43 url photo 00:47 and now let's see how this looks like 00:51 so we have our background image now 00:54 let's 00:55 add some background color to it 01:07 i'm gonna use a green one 01:13 okay now if we check our page nothing 01:16 happens because 01:17 image overrides our color but 01:20 let's see what's gonna happen if we're 01:22 gonna add a blend mode 01:28 uh you can use different modes and you 01:30 are familiar with 01:32 programs like photoshop and layers you 01:35 might already know what this 01:37 means uh well if not i'm gonna quickly 01:39 show you 01:40 and obviously you can read more about 01:43 what different blending modes are 01:45 actually doing but let's have a look at 01:48 darken blend mode 01:51 now as you can see this blends 01:54 our background color with our image 01:58 and by using different 02:02 blend modes 02:06 we can achieve different effects so you 02:09 can use dark and lighter 02:11 you can use difference 02:14 which it's a little bit crazy but i of 02:17 i personally really like a screen one 02:21 and now by changing the color of 02:25 background our background color we can 02:28 achieve 02:29 different effects like the one we've 02:31 seen 02:32 on the previous example 02:35 number two is clipping if you ever 02:38 wonder 02:39 how this page like stripe creates this 02:42 diagonals here 02:44 let me show you how you can easily 02:46 achieve that using css 02:48 so what are we going to do we're going 02:51 to add 02:52 new div with id 02:56 background or actually bg 03:00 or we could actually use class that 03:02 doesn't really matter 03:03 and just for the sake of this tutorial 03:07 we don't need 03:07 this body anymore so let's do 03:11 let's add new selector here 03:15 and what we're gonna do we're gonna set 03:18 a 03:19 height and a width 03:23 height and a width 03:29 to 100 percent to fulfill the entire 03:32 space 03:34 now i'm gonna add some background color 03:41 to it let's say something like 03:44 two 2 4 8 something bluish 03:50 and now i'm gonna i'm going to use a 03:53 clip 03:54 buff now one of the 03:57 one of the easiest way to 04:01 use a clip buff to generate the clip of 04:03 css 04:04 is to use one of the generators so you 04:06 can use 04:08 you can search for like clip 04:12 css generators or just directly go to 04:14 one of those 04:16 and i'm gonna go uh you can you can use 04:18 different shapes like you can see here 04:20 right so there are a lot of them 04:22 available and i'm gonna 04:24 use let's say pentagon and i'm gonna set 04:27 it 04:28 to something like this 04:31 and let's give it a little bit 04:35 curve over here and this will generate a 04:38 css 04:39 for us so what i'm gonna do i'm gonna 04:41 copy this one and paste it 04:43 into our css what i also gonna do 04:46 is gonna set this position um 04:50 to absolute and set that 04:54 index to -1 04:57 so we want this to be our background and 05:00 let's see what the result is and this is 05:03 how the result 05:04 looks like so obviously you can use 05:08 you can use more complex 05:11 shapes like you've seen here so we could 05:14 do something 05:15 like that 05:18 easily something like this 05:23 or whatever let's create some crazy 05:25 shape 05:26 and let's just copy this one and replace 05:30 and voila another must-have 05:34 for web developer is animation 05:38 css allows us to create and animate 05:42 almost any property which we 05:45 use in css so let's have a look at this 05:48 example i'm going to create a div 05:50 and we're going to create some colorful 05:54 animations so what i'm going to do i'm 05:56 going to define a keyframes 05:58 um keyframes allows us to 06:03 define different steps for our animation 06:06 so let's define a few few steps here 06:10 uh for our color change so i'm gonna 06:13 start with zero 06:15 and let's do it like background 06:21 um let's start with violet 06:24 okay now let me just copy paste this one 06:29 um like that 06:35 and change some values here let's say 06:37 this gonna have 06:38 14 percent well let's do it like 15. 06:52 now let's change colors 07:04 okay and now let's copy paste this one 07:09 for the sake of 07:14 compatibility with different browsers 07:16 with all browsers so we're gonna 07:18 say add webkit 07:24 key frames okay so 07:27 now we just define keyframes so 07:30 let's add some style to our div 07:35 so let's let let's give it some height 07:39 let's say 400 pixels with 07:44 400 pixels 07:47 border one solid 07:51 black and animation 07:58 blink because that's how we called it 08:01 time animation time and we're gonna 08:05 define to play it infinitely 08:09 now again webkit animation 08:14 blink 10 seconds infinite 08:17 and let's check the result 08:20 oops 08:24 so that's how it is 08:28 as you can see we can easily animate 08:31 almost any property 08:32 so starting with color shape we can move 08:36 um we can move objects from one place to 08:39 another 08:40 so this is a very very 08:43 important knowledge is currently 08:47 we used to use javascript for that but 08:50 now most of the 08:51 animation actually happens in pure css 08:53 which is just 08:54 a more convenient way to do it 08:59 the next one isn't actually a trick but 09:02 knowledge that you can 09:03 use different fonts on your website and 09:07 if you navigate 09:08 to fonz.google.com you're going to find 09:11 almost 09:11 1 000 different fonts available for you 09:15 to use 09:16 for free so if you navigate there you 09:19 can browse 09:21 different different phones um 09:24 and if you choose one you're gonna see a 09:27 preview 09:28 preview of the phone how does it look 09:31 like using 09:32 a different weight and different style 09:35 like italic 09:36 uh for example here we have like a light 09:38 300 ito league 09:39 and while here we have a bolt so 09:43 just pick font you like let's say 09:46 i'm gonna use this one 09:50 i'm going to choose style i like you can 09:52 actually 09:53 use one style or you can select multiple 09:56 styles 09:57 and add them and then you can use this 10:00 embed option 10:02 which will give you the code you have to 10:04 use on your page so i'm gonna 10:05 use this link so let's go to our 10:09 document i'm gonna paste it and let's 10:12 add 10:13 some paragraph 10:18 and generate some text now the second 10:21 step 10:22 is to copy a font family so let's go to 10:25 our style 10:26 and let's paste it to our body and let's 10:29 check 10:29 how it looks like voila our font 10:33 has changed 10:36 another very interesting option to use 10:39 in css 10:40 are gradients so you can generate 10:42 different kind of gradients 10:43 using just a css so let's have a look at 10:46 the example 10:48 you already know that you can set a 10:51 background color 10:52 to to your 10:56 elements like this rgb 11:01 and then some color let's say 11:04 something between green and blue 11:10 so like this one but 11:14 we can also add a gradient 11:18 so we can use different kind of 11:20 gradients i'm gonna use 11:22 a radial one 11:25 and we're to define this we want to 11:29 circle shape and then we will provide 11:31 two colors so one is going to be 11:33 the same as we used here 11:37 and then 11:41 color shift and then second color 11:46 uh actually we should let's add some 11:49 opacity 11:50 here to zero 11:54 or actually let's leave it for one for a 11:56 moment 11:57 and then something more bluish 12:02 and then this one 100 12:05 and let's see how does it work 12:09 actually 12:13 and this is our gradient so 12:17 there are many properties which you can 12:18 change here but don't worry you don't 12:20 have to remember 12:21 all of them what you can do you can just 12:23 use one of the 12:24 css gradient generators like that one 12:28 and simply by 12:31 using these color pickers you can 12:34 generate whatever gradient 12:37 you like you can also 12:41 change this color shift so 12:46 using this range selector 12:51 you can also generate linear gradient 12:54 like this one let me 12:57 oh i thought it's going to reset to 12:59 default 13:00 but here you can define the angle angle 13:04 so if we're gonna use something like 13:06 this 13:08 or that we can remove number of colors 13:11 so we can have more 13:12 you can use pre-defined shapes so 13:16 yeah just play with it and see 13:19 how creative you can be 13:23 with just a few 13:26 clicks so let's check this 13:32 yeah i think it looks cool 13:36 so these were five css tricks which 13:38 every web developer should 13:40 know let me know in the comments whether 13:42 you knew already all of them 13:44 or not and what else would you put on 13:46 this list 13:47 and if you enjoyed this video don't 13:48 forget to like it and 13:50 if you don't want to miss more videos in 13:52 the future like this 13:54 don't forget to subscribe and turn on 13:56 notification 13:57 thanks you and see you in the next video