WEBVTT FILE





1
00:00:06.440 --> 00:00:13.080
in this video we're going to learn how to create gradients gradients mean that

2
00:00:13.080 --> 00:00:19.320
we are creating some kind of smooth transitions between different colors and

3
00:00:19.320 --> 00:00:28.740
I will give our websites a nice and professional look so at the moment we're

4
00:00:28.740 --> 00:00:35.370
using the same source code as div and span file again and we're gonna be

5
00:00:35.370 --> 00:00:40.890
starting with the we're gonna be looking at the Facebook diff mainly first of all

6
00:00:40.890 --> 00:00:50.850
gonna get rid of the background color okay and let's go for a sand color okay

7
00:00:50.850 --> 00:00:57.000
because if it's white we can't see it for now alright so now if we want to

8
00:00:57.000 --> 00:01:01.710
define some gradients there are the different types of greetings we can go

9
00:01:01.710 --> 00:01:08.340
for a linear gradient and we can also go for a radial gradients so it starts with

10
00:01:08.340 --> 00:01:17.670
the linear one the syntax is background and then if we want to go for the

11
00:01:17.670 --> 00:01:27.229
standard syntax is going to be linear gradient okay

12
00:01:28.030 --> 00:01:36.590
so what we need to specify here is at least two colors so for instance if we

13
00:01:36.590 --> 00:01:43.820
go for blue and white basically all we seen here is that we

14
00:01:43.820 --> 00:01:48.500
have in a gradient from blue to white and by default it goes from top to

15
00:01:48.500 --> 00:01:57.979
bottom okay let's go back to the white color for text okay so we just say that

16
00:01:57.979 --> 00:02:05.649
this is the standard syntax which will work for Google Chrome for instance but

17
00:02:05.649 --> 00:02:16.180
some browsers they will need a specific syntax and usually you would need to

18
00:02:16.180 --> 00:02:22.610
duplicate the same property with the other browsers syntax so for instance if

19
00:02:22.610 --> 00:02:28.069
you want this to work for Safari for instance then we need to duplicate the

20
00:02:28.069 --> 00:02:40.840
line so ctrl D and we need to add minus sign WebKit's minus sign before linear

21
00:02:40.840 --> 00:02:47.359
okay if if we are developing let's duplicate again developing for opera

22
00:02:47.359 --> 00:02:56.530
then we need to add minus sign Oh minus sign and if we are developing for

23
00:02:56.530 --> 00:03:05.150
Firefox then it's gonna be Mose all right so just bear that in mind for

24
00:03:05.150 --> 00:03:11.720
now we're gonna stick to the standard sounded way so I'm just gonna comment

25
00:03:11.720 --> 00:03:22.090
these ones for now okay so let's go back to

26
00:03:24.370 --> 00:03:33.260
our property our solid property and now we're gonna try something else if I

27
00:03:33.260 --> 00:03:38.870
comment this one first we're gonna try three colors rather than

28
00:03:38.870 --> 00:03:44.750
two colors and just see what happens so you can see there that we're going

29
00:03:44.750 --> 00:03:54.500
from the blue to the white to the orange okay so if you don't don't don't don't

30
00:03:54.500 --> 00:04:01.960
like the standard way of going from top to bottom you can change that so

31
00:04:01.960 --> 00:04:12.950
basically we can try so just before the first color if we say to left so what

32
00:04:12.950 --> 00:04:18.500
happens here is that we're gonna be going from the right to the left so the

33
00:04:18.500 --> 00:04:23.210
first color is gonna appear on the right and then the last color is gonna appear

34
00:04:23.210 --> 00:04:30.050
on the left okay there are other choices you can have so

35
00:04:30.050 --> 00:04:46.700
if you want you can make the gradients go from the or to bottom left okay so

36
00:04:46.700 --> 00:04:51.220
the last color is going to be other bottom left okay

37
00:04:51.220 --> 00:05:06.169
also you can make the default top to bottom rotate by a certain angle so if

38
00:05:06.169 --> 00:05:13.850
we say 90 degrees so that that means that we are going from the standard

39
00:05:13.850 --> 00:05:19.610
which is top to bottom and we are rotating anti-clockwise so let's see how

40
00:05:19.610 --> 00:05:26.960
the Sun that looks like the Sun goes blue white orange if we rotate this

41
00:05:26.960 --> 00:05:33.260
anti-clockwise by 90 degrees then we're expecting the blue to appear on the left

42
00:05:33.260 --> 00:05:42.470
then the white then the orange that's what we get alright okay now

43
00:05:42.470 --> 00:05:51.280
we're gonna try something else we're gonna try to use colors with opacity and

44
00:05:51.280 --> 00:05:58.970
for that we're gonna be sitting the colors using the RGB a value so so if we

45
00:05:58.970 --> 00:06:07.760
choose here to left okay and choose only two colors so we want to go from the

46
00:06:07.760 --> 00:06:19.580
blue blue transparent on the right to blue clear on the left so we're gonna

47
00:06:19.580 --> 00:06:33.740
use the RGB a value okay and for the blue it's gonna be zero zero two five

48
00:06:33.740 --> 00:06:39.110
five and we want to go from a transparency of zero so this is for the

49
00:06:39.110 --> 00:06:47.510
opacity okay and we go into the same color 245 but this is this time we want

50
00:06:47.510 --> 00:06:52.520
to go to no positive one okay so what's happening here is that

51
00:06:52.520 --> 00:06:59.000
we're going from the blue to the blue but from the blue with zero opacity to

52
00:06:59.000 --> 00:07:04.750
the blue with one opposite so and if we change that to points five for instance

53
00:07:04.750 --> 00:07:15.460
you can see that we are going from half transparent blue to two full blue okay

54
00:07:15.669 --> 00:07:24.470
now we're going to move to the original gradient so the syntax is similar to

55
00:07:24.470 --> 00:07:31.160
linear gradient but we're just gonna change linear gradient to radial

56
00:07:31.160 --> 00:07:35.020
gradients so background radial gradients and we are then we can

57
00:07:47.149 --> 00:07:56.239
just set the color so let's go from blue to white so you can see that the first

58
00:07:56.239 --> 00:08:00.499
color is going to be the one appearing at the center and then the lot the

59
00:08:00.499 --> 00:08:05.659
second color is gonna be on the edges and you can choose three colors if you

60
00:08:05.659 --> 00:08:16.639
want to okay also you can choose how much space each

61
00:08:16.639 --> 00:08:26.599
of these colors is going to take using a percentage if i duplicate that it's

62
00:08:26.599 --> 00:08:33.979
common the first one basically we can say for instance we want the blue to

63
00:08:33.979 --> 00:08:49.459
take 5% and we want the white to take 15% and we want the orange to take for

64
00:08:49.459 --> 00:08:55.600
instance 80% okay also if we want the center or the shape

65
00:09:05.010 --> 00:09:11.600
of the radians greeting to take shape circle we can do that as well just by

66
00:09:11.600 --> 00:09:21.149
starting here with circle and then telling what colors we want to go for so

67
00:09:21.149 --> 00:09:30.029
let's help gradients work it's there are quite powerful in terms of making your

68
00:09:30.029 --> 00:09:37.470
websites have a nice and could look in design but bear in mind that's the cross

69
00:09:37.470 --> 00:09:41.820
browser compatibility is really important you need to take into account

70
00:09:41.820 --> 00:09:47.699
the different syntaxes you can have for other browsers you're developing for all

71
00:09:47.699 --> 00:09:56.779
right in the next video we're going to be looking at 2d transforms