1
00:00:05,840 --> 00:00:13,910
We have already seen during the introduction of the bay's properties of these CSX, the board of property.

2
00:00:14,840 --> 00:00:23,810
In talking about the advanced use of these property, let's introduce, first of all, web keep modes

3
00:00:24,020 --> 00:00:33,740
O and S, which are the functions that we would see during this lesson, useful to implement some excess

4
00:00:33,740 --> 00:00:43,430
properties and therefore to make them visible also in out of date browsers, which without these could

5
00:00:43,430 --> 00:00:45,200
not appear correctly.

6
00:00:45,470 --> 00:00:53,660
In particular, web, Kate is used by Chrome and Safari, therefore by the browsers of Google and Apple

7
00:00:53,660 --> 00:01:04,360
modes, by the Firefox browser AMS, for the browsers of the Microsoft and oh, for the browser.

8
00:01:04,370 --> 00:01:11,600
I'm saying this because the first function we're going to see talking about borders is the image that

9
00:01:11,600 --> 00:01:17,690
can be inserted within the borders less than from a simple border that we are going to attribute to

10
00:01:17,690 --> 00:01:18,710
each one.

11
00:01:18,740 --> 00:01:26,540
Therefore, let's insert H1 and insert border five pizzle as let's select solid black.

12
00:01:27,580 --> 00:01:34,300
Let's refresh and as you see, the border around title got inserted.

13
00:01:35,280 --> 00:01:41,910
Let's retrieve the white background to make all the functionalities visible at the fullest.

14
00:01:44,290 --> 00:01:46,600
Let's close, save and refresh.

15
00:01:47,710 --> 00:01:54,040
As I was saying, the first function we're going to see about the borders is border image.

16
00:01:55,370 --> 00:02:01,880
With border image, we can insert inside the border a specific image.

17
00:02:02,940 --> 00:02:11,910
That starts attributing a margin to age one so that the border may appear more detached and the image

18
00:02:11,910 --> 00:02:14,220
more visible in its inside.

19
00:02:14,400 --> 00:02:23,160
Therefore, let's insert a ten piece of padding, let's say refresh and see that the border got positioned

20
00:02:23,580 --> 00:02:26,610
and it is 10 pixels wider than before.

21
00:02:27,030 --> 00:02:35,130
Now, to be able to insert the image, we can first of all select a transparent coloring for the border

22
00:02:35,700 --> 00:02:41,130
because no color should be visible inside it, but only the image.

23
00:02:43,300 --> 00:02:52,210
Therefore, after penning let's insert the order image, which request is Syntex made up of, you are

24
00:02:52,210 --> 00:02:52,630
L..

25
00:02:52,630 --> 00:02:54,730
And the image to insert.

26
00:02:56,090 --> 00:03:04,670
And then in addition to a numeric data corresponding to the board, we want to add as far as the image.

27
00:03:05,800 --> 00:03:16,120
And last, in addition to the type that can be round or stray, once explained this first thing, let's

28
00:03:16,120 --> 00:03:27,640
modify the border from five to 20 pixels so that it adapts to the image we are going to insert at this

29
00:03:27,640 --> 00:03:28,140
point.

30
00:03:28,180 --> 00:03:37,150
You can retrieve the file attached to this video, which is the image we are going to use to insert

31
00:03:37,150 --> 00:03:38,490
within our border.

32
00:03:38,680 --> 00:03:45,580
And once downloaded the estancia underscore AECO image.

33
00:03:45,610 --> 00:03:55,090
You see, you end up with this series of E's belonging to the Estancia logo, which will appear in a

34
00:03:55,090 --> 00:04:03,020
different color and made up of the structure permitting to cover perfectly every part of our border.

35
00:04:03,050 --> 00:04:11,440
In fact, as you can see, the ease placed on the Four Corners have to be considered as the corners

36
00:04:11,440 --> 00:04:12,270
of the border.

37
00:04:14,170 --> 00:04:19,510
Therefore, they will appear at the Four Corners within our age HTML page.

38
00:04:21,260 --> 00:04:30,080
Whereas the most inner eyes, red, blue, orange and gray, will represent Will composed the leaner

39
00:04:30,080 --> 00:04:37,040
part of our borders, when you have to insert an image into a border to make sure that the structure

40
00:04:37,040 --> 00:04:44,540
is exactly like the one you are watching right now, because not all the images obviously are fake to

41
00:04:44,540 --> 00:04:46,640
be inserted in the border.

42
00:04:46,820 --> 00:04:53,260
In this case, the image is 60 pixel wide and 60 pixel high.

43
00:04:53,300 --> 00:04:54,710
It's a perfect square.

44
00:04:54,740 --> 00:04:58,250
Now we can close it and let's insert your.

45
00:04:59,760 --> 00:05:08,730
The stars, you underscore eco PMG without the advocacies, because in this case, there's no need and

46
00:05:08,730 --> 00:05:14,420
at this point, let's define the numeric value that coincides with the border.

47
00:05:14,430 --> 00:05:19,770
And so plenty and as a basis, let's live round.

48
00:05:19,890 --> 00:05:28,110
That is the option of permitting us to insert the image exactly as it was when we reported it.

49
00:05:28,560 --> 00:05:38,670
In fact, the to any figure just inserted, we make the images both internally and at the corners,

50
00:05:39,060 --> 00:05:41,880
repeat every 20 pizzas.

51
00:05:42,030 --> 00:05:49,920
Therefore the corners being of 20 exactly like the width of the border will appear just once.

52
00:05:49,920 --> 00:05:55,470
Instead, internally, the image will be repeated along the whole border.

53
00:05:58,180 --> 00:06:00,220
Let's save and refresh.

54
00:06:03,520 --> 00:06:11,290
As you see, the image inserted inside the border appears exactly as just described.

55
00:06:12,680 --> 00:06:19,340
With a single E on the corners and along the line, some repeated ese.

56
00:06:20,900 --> 00:06:23,600
If we inserted instead around.

57
00:06:25,720 --> 00:06:27,310
The STREAT function.

58
00:06:28,700 --> 00:06:35,050
With saving and refreshing, as you can see, the image would not repeat part of its content.

59
00:06:37,520 --> 00:06:42,450
Therefore, would not repeat every single square among those we have seen before.

60
00:06:42,470 --> 00:06:50,390
Instead, it would stretch them according to the real dimensions of the page and therefore both according

61
00:06:50,390 --> 00:06:53,570
to the insert the text and height and weight.

62
00:06:56,700 --> 00:07:04,470
This brief presentation of Border Image leads us to understand that whenever we want to insert a border

63
00:07:04,470 --> 00:07:05,760
done this way.

64
00:07:08,500 --> 00:07:16,870
We better use the round function whenever instead, for example, we had framed it by stretching does

65
00:07:16,870 --> 00:07:21,880
not spoil the visualization, we might use the STREAT function.

66
00:07:23,410 --> 00:07:30,550
Therefore, let's set our round save and let's add the various border images.

67
00:07:32,070 --> 00:07:40,580
With the preface says, We mentioned at the beginning of this lesson they for starting from webcast

68
00:07:40,580 --> 00:07:40,870
to.

69
00:07:42,470 --> 00:07:48,230
I just see we insert Dash Webjet dash board image.

70
00:07:50,470 --> 00:07:57,400
Karlan and let's hope what inserted before, let's do the same for Mode's.

71
00:08:04,000 --> 00:08:04,990
Four oh.

72
00:08:09,490 --> 00:08:18,580
And let's stop here, because as therefore with the tag of this type dash as and therefore everything

73
00:08:18,580 --> 00:08:27,730
released by Microsoft does not want a different functionality for Border Nesh image, and it's compatible

74
00:08:27,730 --> 00:08:31,390
with Internet Explorer even in all versions.

75
00:08:34,460 --> 00:08:44,360
Now we can say refresh, we can see that there was no modification because obviously we have an updated

76
00:08:44,360 --> 00:08:45,440
version of Chrome.

77
00:08:45,440 --> 00:08:47,090
We are using this preview.

78
00:08:47,130 --> 00:08:53,990
And let's move on to the following lesson where we are detailing additional aspects around the borders.