5 CSS tricks every Web Developer should know in 2020

Watch other courses

Learning new CSS tricks is one of the best ways to creatively surprise your website users & this video will give teach you on how to do so. We here share some tips to help you break the patterns in your website layouts

There is many CSS hacks you can do, so we've prepared another video with 6 CSS tricks you didn't know & they may surprise you, so check them out!

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