6 CSS tricks you didn't know

00:00 hey guys it's David from my bootstrap 00:02 dot-com and in this video I'm gonna show 00:04 you six CSS tricks which you probably 00:07 didn't know and if you happen to know 00:10 all of them let me know in the comments 00:12 so the first thing I'm going to show you 00:14 is how to add a stroke over text using 00:18 CSS if you don't know how stroke effect 00:21 looks like let me show you let's add 00:23 some star tour heading so first we're 00:27 gonna make our text transparent and you 00:32 can see that this property is crossed 00:35 out because it's experimental so well it 00:39 may behave differently depending on a 00:42 browser so you should be very careful 00:49 while using this one and now let's add 00:52 stroke to our to our text so organize 00:56 WebKit text stroke and let's add this 01:01 it's a violet color and let's define its 01:06 size to 1 pixel okay now what we have to 01:09 do is just add some heading and generate 01:12 some text to it and let's see how it 01:17 looks now 01:24 voila our text stroke is ready you 01:28 probably know that you can add or 01:30 generate growlings using CSS but you 01:33 know that you can apply this even to 01:35 text like headings let's have a look 01:40 let's set a background to linear 01:45 gradient 01:52 I'm prepared to call ours okay and now 02:03 let's at 02:18 okay and now we have to add our heading 02:27 and let's see what's the result 02:29 yes so as you can see we've got really 02:32 nice blue to purple gradient links 02:36 interesting property to know is clamps 02:38 this property allows us to hide in a 02:42 text after a certain number of lines so 02:45 let's have a look how it works let's 02:48 create a new class for paragraph I'm 02:53 gonna call it short end and we're gonna 02:55 use display WebKit box we're gonna set 03:04 WebKit blind clamp now we're gonna set 03:10 it to one for a second now we also have 03:16 to set WebKit box Orient property to 03:20 vertical and over flow to hidden and now 03:29 let's add some thief and set it with to 03:36 let's say 200 pixels so we can easily 03:40 overlap our text and let's add some some 03:45 content so we're gonna have and Eve and 03:50 paragraph inside it and let generate 03:53 some text let's say 15 lorem words and 03:56 let's have a look how it works as you 04:01 can see after the first line remaining 04:06 text just disappears and once we change 04:14 this line number two let's say three 04:18 we're gonna see more text you probably 04:22 know that you can adjust your underlines 04:25 as well as borders using properties like 04:28 dots 04:30 it's color like you can see here or 04:33 dashes but did you know that you can 04:36 also use for example wife let's have a 04:39 look at this let's add new class let's 04:43 go we're gonna call it waving and set 04:46 text decoration to underline wavy violet 04:55 and now let's add some content and let's 05:06 have a look so here is our wavy 05:09 underline sometimes especially when 05:13 you're writing a blog you might stumble 05:16 upon situation but you have to quote 05:19 inside the code so you know you are 05:22 quoting someone who is quoting someone 05:24 else who said something so using CSS you 05:27 can define a different style for nested 05:30 quotation let's have a look so in order 05:33 to define quotes in paragraph for 05:36 example we can do it like this 05:42 so say quote and we can define a 05:47 different pair of quotes so I'm gonna 05:50 use this sign for first level of quotes 05:57 let me add some spices here okay now 06:03 we're gonna add next level and the third 06:08 level so I'm just gonna copy paste that 06:11 one and now let's have a look at the 06:13 example so inside our paragraph we're 06:17 gonna add some quote let's say 06:25 and then another called inside it and 06:35 then some even more nested quotes so 06:44 let's have a look how it works 06:47 so as you can see this is our first 06:49 level quote this sign then we have 06:53 double quotes and is our third level of 06:57 quotation right so first second and a 07:00 third one and finally last CSS trick 07:04 which I have for you will help you or 07:06 your user to disclose a file format of 07:09 links or attachments so I have this icon 07:12 of PDF over here and what we can do what 07:18 we're going to do we can use attribute 07:20 selector and we're gonna look for each 07:27 link which ends with PDF extension and 07:32 what we want to do we want to add pseudo 07:35 class so what we will add after each 07:40 link it's going to be a new RL to our 07:46 icon let me fix typo 07:53 and now let's add some link over here 08:05 let's have a look how it works so as you 08:10 can see CSS automatically adds this icon 08:13 to each and every link which targets and 08:17 PDF file okay so that was the list of 08:22 CSS tricks which as probably you didn't 08:25 know and if you knew them let me know in 08:27 the comments and if you enjoyed this 08:29 video please leave a like down below and 08:32 if you wanna see more videos like this 08:35 don't forget to subscribe and turn on 08:37 notification thank you for watching and 08:40 see you in the next video