Advanced CSS Tricks for Web Developers

00:00 hey guys it's david from mdbootstrap.com 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