Advanced CSS Tricks for Web Developers

Watch other courses

As time goes by, CSS is becoming more and more powerful and nowadays it offers lots of possibilities to create visually stunning websites. This video is a compilation of fresh, advanced CSS tips and techniques to master your web design and front-end web development skills.

If you're interested further improve your CSS skills, check our two more videos about this topic CSS tricks you didn't know & CSS tricks every Web Developer should know in 2020

00:00 hey guys it's david from 00:03 in this video i'm gonna show you five 00:05 advanced css tricks 00:07 let's get started so let's start with 00:10 masks 00:12 i have an image here and 00:15 i want to apply this mask which i 00:17 created in photoshop 00:19 uh to it so you can basically easily do 00:22 it in into like photoshop just take some 00:24 brush 00:25 and you know brush this shape 00:28 you want to use and now let's see how we 00:30 can 00:31 apply this using css so what we're going 00:34 to do i'm going to 00:35 apply this to our image 00:38 i'm going to edit some width 00:42 and now i'm gonna use mask image 00:48 and i'm gonna provide this mask url 00:52 here and let's do the same for webkit 00:57 mask 01:00 image for sake 01:03 of compatibility with all browsers 01:12 and now let's display our image 01:18 so we have photo and let's see how it 01:22 looks like 01:23 so as you can see our image has now this 01:27 mask what we can do let's change the 01:31 background color 01:35 body 01:38 background black 01:44 so now you can see how this mask 01:47 is getting applied let's get rid of it 01:51 for a second 01:54 so this is the original original image 01:57 and this 01:58 is the one with mask what we can also do 02:00 we can add 02:03 we can use image for uh for a mask 02:06 or we can do something else 02:09 so let's try do something like this mask 02:12 image 02:14 linear gradient 02:18 let's say to bottom and we're going 02:20 gonna have 02:21 transpar rent 25 percent and black 75 02:28 percent 02:31 okay and then the same for the webkit 02:38 mask image 02:41 and let's just copy paste this one save 02:44 it 02:45 and let's have a look so you can see 02:47 that we applied mask 02:48 using linear gradient just using 02:52 css next one are counters 02:56 counters are variables maintained by css 02:59 whose value can be 03:00 incremented by css rules don't worry i'm 03:03 gonna show you what does it exactly mean 03:05 so in order to start using 03:08 counter we have to initialize it first 03:11 in order to initialize it we gonna use 03:16 counter reset 03:19 function and we're gonna give it a name 03:21 so we will define counter 03:23 called section now 03:26 let's create counter for let's say h3 03:30 handing and we're gonna do something 03:33 like that 03:36 now we're gonna define 03:37 [Music] 03:41 increment step and 03:44 so every time this element 03:47 appears we're gonna increment our 03:49 counter 03:50 and let's add some content so we're 03:54 gonna prefix it with section 03:57 uh counter section so this is how you 04:00 call it 04:01 and something like that 04:04 let's say okay and now let's add some 04:07 html 04:09 let's fix typo first let's add some 04:12 headings 04:16 one heading 04:19 to handing three 04:22 and let's see how it looks like so as 04:25 you can see all our headings are 04:27 prefixed 04:28 with the section and the counter which 04:30 automatically 04:32 increases and obviously we can get rid 04:34 of this section 04:35 and leave just a counter 04:39 now let's have a look at another example 04:40 where we're going to define counters and 04:42 sub counters 04:45 so i'm going to define new counter 04:52 i'm going to call heading 04:56 and now i'm gonna use 04:59 h1 and h2 for for that 05:09 oops and now something like 05:12 this 05:19 okay so we have first counter 05:26 now let's define new counter 05:34 and now let's define h2 05:49 okay counter 05:55 sub heading so we're gonna concatenate 05:59 both 06:05 let's and space here let's 06:10 oh it should be content obviously 06:14 and counter 06:21 heading 06:26 and let's add some html now 06:46 you and this is number two 06:54 so as you can see our sub headings can 06:56 also 06:57 use contours and 07:00 sub counters and let me show you last 07:03 example 07:04 uh i prepared for you 07:08 let me just copy paste it for to speed 07:11 up the process so we have 07:14 another counter for 07:17 each order list and list item 07:20 and this allows us to quickly 07:28 define 07:32 following list so each item has 07:36 its own counter and as you can see it's 07:39 also 07:40 can go deeper down to 07:43 even level three and more obviously if 07:45 you would use so each 07:47 uh new order list below that nested 07:50 would get 07:50 a new counter now 07:54 let's learn how to create this like a 07:56 storybook 07:57 effect so what i have here 08:03 uh is a first few paragraphs from 08:08 ali's adventures in wonderland and 08:11 currently it looks like that so nothing 08:14 sexy so let's see how we can quickly 08:17 add this nice 08:22 storybook-like effect so 08:25 i'm gonna define this class for 08:28 paragraph 08:29 intro but i'm gonna 08:32 define this one for first letter 08:35 only so i'm gonna use this 08:39 selector and let's set font size to 100 08:43 pixels 08:44 display block now float 08:48 to the left 08:52 line height let's increase it to 08:56 0.5 and let's add some margins 09:04 15 pixels 15 pixels 10 pixels and 09:08 zero and let's add some styles to our 09:11 body 09:13 let's narrow down 09:16 let's set it font size to one room first 09:19 and now let's 09:21 [Music] 09:25 narrow down this to let's say 09:29 40 percent let's add some margin auto to 09:33 center the text and finally let's add 09:37 let's change the font formula to 09:41 cormoran infant and this 09:45 is a font which i got from 09:49 google fonts which i described in one of 09:51 the previous 09:52 videos so now let's have a look at the 09:55 final result 09:57 wow it looks like a really nice book now 10:02 mandatory fields as you probably know 10:06 html5 allows us to define 10:08 which fields are mandatory which are 10:11 required 10:13 for user to to fill them out 10:16 as otherwise they will get an error when 10:19 they try to submit 10:21 this field as an empty one but did you 10:24 know that you can also 10:25 use these attributes as a selectors in 10:28 css 10:29 let's have a look at this example 10:32 required 10:37 and let's add some border to it let's 10:39 say one pixel 10:41 solid pink and on the other hand 10:46 let's also choose optional 10:49 and let's add one pixel 10:52 solid sky blue color to it 10:56 and now our fields are 11:00 marked as required and 11:04 optional using different css rules 11:07 and the last one for today is how to 11:10 change 11:10 text selection color so by default 11:14 if i'm going to add some text here in a 11:17 paragraph let's say 30 words 11:19 i'm going to save it our selection has 11:23 this blue 11:24 color but using css we can easily 11:28 change it simply by typing selection 11:32 and providing background color 11:36 let's say something like something 11:39 [Music] 11:41 like that oops 11:44 that should be hash and now from now on 11:48 our selection color has changed and 11:50 obviously we can change also 11:51 other um properties like 11:55 text color and so on okay guys thank you 11:57 for watching 11:59 and let me know in the comments whether 12:01 you knew this 12:02 css tricks or not and let me also know 12:06 what else 12:06 would you put on this um list as an 12:09 advanced 12:10 css trick and if you enjoyed this video 12:12 don't forget to leave a like 12:14 and subscribe to our channel also don't 12:16 forget to turn on notification 12:18 so you'll get notification every time we 12:21 release new video like that thank you 12:24 for watching 12:25 and see you in the next video