1
00:00:00,210 --> 00:00:03,460
우리가 해결할 다음 일은 몸에 대한 배경입니다.

2
00:00:03,660 --> 00:00:09,270
그리고 이것은 사실상 배경 이미지가 아닙니다. 우리가 이것을 잘 보았을 때 잘 작동한다는 것을 알았 더라면 말이죠.

3
00:00:09,420 --> 00:00:13,590
그러나 실제로 그것은 CSX가 나를 위해 추가하는 그라데이션입니다.

4
00:00:13,650 --> 00:00:27,470
따라서 본질적으로 선형 그래디언트를 작성할 수 있습니다. 처음부터 직접 작성하는 것보다 먼저 할 일을 할 수있는 좋은 미리 작성된 색상 그라디언트가있는 멋진 리소스를 보여 드리겠습니다. 개인적인.

5
00:00:27,750 --> 00:00:29,850
따라서 그라디언트라고 불립니다.

6
00:00:30,030 --> 00:00:35,580
그런 다음 화살표 키를 사용하여 일부를 볼 수있는 다양한 그라데이션이 있습니다.

7
00:00:36,180 --> 00:00:39,860
그래서 나는 내가 좋아하는 것을 찾을 때까지 그냥 갔다.

8
00:00:40,050 --> 00:00:52,120
그래서 우리가해야 할 일은 CSSA 코드를 클릭하거나 Enter 키를 누른 다음이 코드를 클립 보드에 복사 한 다음 본문을 선택하는 것입니다.

9
00:00:52,360 --> 00:00:56,960
그래서 시체와 붙여 넣습니다.

10
00:00:57,540 --> 00:01:02,610
따라서 실제로는 한 줄이지만 모든 다른 브라우저 접두사가 있습니다.

11
00:01:02,880 --> 00:01:09,130
Opera 용 Chrome 용 Internet Explorer의 경우이 모든 다른 접두사.

12
00:01:09,240 --> 00:01:09,990
그러나 그것이하는 것.

13
00:01:10,020 --> 00:01:18,740
우리는 배경을 선형 그래디언트로 설정하고 두 색상과 그 색상의 다른 비율과 각도를 선택합니다.

14
00:01:18,750 --> 00:01:24,390
그래서 우리가 우리를 새롭게한다면 지금 어떻게 생겼는지 보여 드리겠습니다.

15
00:01:24,390 --> 00:01:26,190
이 멋진 그라디언트가 있습니다.

16
00:01:26,580 --> 00:01:28,420
그래서 우리는 계속 놀 수 있습니다.

17
00:01:28,620 --> 00:01:31,890
몇 가지를 더 살펴보고 자유롭게 사용할 수 있습니다.

18
00:01:31,980 --> 00:01:35,860
내가 결정한 것은 바로 여기 보라 보라 라 불린다.

19
00:01:36,210 --> 00:01:42,840
그래서 우리는 그 복사본을 클립 보드에 복사하고이 코드를 대체 할 것입니다.

20
00:01:42,840 --> 00:01:52,870
이 모든 것은 새로운 그라디언트로 여기에서 또 다른 선형 그래디언트이며 다른 사람이 두 가지 색으로 각각 다른 백분율을 썼습니다.

21
00:01:53,150 --> 00:01:54,450
그리고 우리는 구할 것이다.

22
00:01:54,780 --> 00:01:56,250
그리고 지금 그것을 확인하십시오.

23
00:01:56,520 --> 00:01:57,830
그리고 거기에 우리가 간다.

24
00:01:57,840 --> 00:01:59,190
그래서 우리는 점점 가까워지고 있습니다.

25
00:01:59,430 --> 00:02:02,860
우리가 작업해야 할 다음 큰 일은 아이콘입니다.

26
00:02:03,060 --> 00:02:05,530
그래서 우리는 더하기 아이콘이 나타납니다.

27
00:02:05,640 --> 00:02:10,130
그리고 이것이하는 일은 양식을 보여 주거나 숨기고 쓰레기통을 가지고있는 것입니다.

28
00:02:10,130 --> 00:02:16,100
그 아이콘을 포함해야 할 필요가 있다는 것을 알 수 있습니다.이 아이콘은 font라는 라이브러리의 일부입니다.

29
00:02:16,110 --> 00:02:16,780
굉장해.

30
00:02:17,050 --> 00:02:22,650
그래서 멋진 글꼴로 이동하고 웹 사이트를위한 구글은 Fonte awesome입니다.

31
00:02:22,660 --> 00:02:24,030
나는 그녀를 얻는다.

32
00:02:24,930 --> 00:02:29,660
그리고 그 모든 것은 일련의 아이콘 모음입니다.

33
00:02:29,970 --> 00:02:39,720
그래서 우리가 아이콘 아래를 보게되면 거기에서 볼 수 있도록 사용할 수있는 모든 아이콘의 거대한 목록이 있습니다.

34
00:02:40,380 --> 00:02:52,740
따라서 우리는이 라이브러리를 우리 애플리케이션에 포함 시켜서 바로 다운로드하고 다운로드를 클릭하거나 글꼴을 사용할 수도 있습니다.

35
00:02:52,740 --> 00:02:57,370
신난다 CDN뿐만 아니라 이러한 CDN 중 하나를 사용하십시오.

36
00:02:57,450 --> 00:02:58,710
둘 중 하나가 작동합니다.

37
00:02:59,100 --> 00:03:06,800
따라서 Jay 쿼리를 이미 다운로드 한 이후로는 CD를 사용하고 여기에 해당 링크를 복사하기 때문에 다양성을 염두에 두어야합니다.

38
00:03:07,470 --> 00:03:30,940
그런 다음 색인 페이지 Timo로 이동합니다. CSSA 파일이므로 링크 태그를 추가해야합니다. 실제로 자바 스크립트 파일이나 글꼴이 아니지만 Cs 파일이므로 저장하게됩니다. 사실 미리 만들어지고 미리 만들어진 클래스를 제공하여 요소에 추가 할 수 있도록 몇 가지 예를 보여 드리겠습니다.

39
00:03:31,230 --> 00:03:51,350
사용하고자하는 배터리가 비어 있거나 배터리가 3 쿼터라고 말하면 클래스를 호출해야한다는 것입니다. 대시 배터리 대시 3 대시 (cash) 대시 (cash) 대시 (cash) 대시 (dash)

40
00:03:51,510 --> 00:03:53,400
H-1에 넣자.

41
00:03:53,400 --> 00:03:59,060
그것은 아이콘을 나타내는 눈 태그이고 우리는 수업을하고 여기에 아무것도 넣지 않아도됩니다.

42
00:03:59,070 --> 00:04:02,560
우리는 그 것을 공란으로 남겨두고 이것은 Rifan을 두려워합니다.

43
00:04:02,700 --> 00:04:13,500
그리고 이것은 아이콘의 이름이며 새로 고침을 저장하고 3 쿼터 배터리 아이콘 대신 배터리 아이콘을 갖습니다.

44
00:04:13,500 --> 00:04:28,070
우리는 더하기 기호와 쓰레기통을 원해서 H-1 안에 아이콘을 보관하고 클래스를 유지하지만 F.A. 대시 플러스를 원하고 자유롭게 자신의 아이콘을 사용할 수 있습니다.

45
00:04:28,110 --> 00:04:49,990
당신이 굉장한 것을 찾기 위해 계속 나아가고 당신이 좋아하는 다른 것을 찾으면 연필 모양의 펜이나 연필과 종이 중 하나를 사용할 수 있기 때문에 내가 좋아하는 스타일을 찾을 수 있습니다. 오른쪽으로 넘어 가서 우리가해야 할 일은 먼저 선택하여 개를 선택하는 것입니다.

46
00:04:50,280 --> 00:05:00,950
F는 대시 플러스이고 바로 그 것처럼 떠 다니게되고 새로 고침이 끝나고 이제는 올바른 사이트에서 끝납니다.

47
00:05:00,960 --> 00:05:06,250
이제 쓰레기통을 다루겠습니다. 우리는 아직 애니메이션을 다루지 않을 것입니다.

48
00:05:06,300 --> 00:05:09,810
우리는 X 대신에 쓰레기통을 보여 주려고합니다.

49
00:05:10,260 --> 00:05:44,520
다시 돌아가서 우리가 실제로 X의 내용을 없애고 다른 전자 태그를 추가하기 위해 e-TAG에 FAA 클래스와 이름을 추가하려고합니다. 쓰레기 캔 아이콘은 FAA입니다. 쓰레기 쓰레기를 다른 스팬의 것으로 복사하겠습니다.이 페이지는 페이지가로드 될 때만 사용되지만 기존 쓰레기통에는 3 개의 쓰레기통이 있습니다.

50
00:05:44,730 --> 00:05:46,280
우리는 여전히 전직을 다루고 있습니다.

51
00:05:46,530 --> 00:05:50,310
그래서 우리는 여기에 우리의 자바 스크립트로 가고 싶습니다.

52
00:05:50,310 --> 00:05:54,990
그리고 우리가 새로운 것을 쓸 때 X로 스팬을 추가하고 싶지는 않습니다.

53
00:05:55,290 --> 00:06:00,930
아이콘을 추가하고자 할 때 따옴표가 영향을 미치지 않도록해야합니다.

54
00:06:00,930 --> 00:06:08,690
따라서 작은 따옴표를 사용하여 저장하면 이제 스팬 내부에 휴지통 아이콘이 있어야합니다.

55
00:06:08,870 --> 00:06:10,830
그래서 몇 가지 새로운 것을 추가합시다.

56
00:06:10,830 --> 00:06:11,650
우리는 거기에 갈.

57
00:06:12,030 --> 00:06:15,320
그리고 여전히 스팬의 내부에 있기 때문에 클릭 할 수 있습니다.

58
00:06:15,450 --> 00:06:18,680
따라서 스팬 대신 아이콘 요소입니다.

59
00:06:19,530 --> 00:06:22,440
그래서 나는 여전히 이벤트를 클릭한다.

60
00:06:22,470 --> 00:06:30,210
이제이 간단한 애니메이션을 작업 해 보겠습니다.이 모든 작업은 페이지가로드 될 때 실제로 숨겨진 C 범위를 평가합니다.

61
00:06:30,210 --> 00:06:31,630
그들은 제로의 부를 가지고 있습니다.

62
00:06:31,860 --> 00:06:40,950
마우스를 가져 가면 실제로 폭을 40 픽셀로 늘린 다음 전환 속성을 사용하여 애니메이션으로 만듭니다.

63
00:06:41,430 --> 00:06:44,070
그럼 그 중 일부를 시도해 봅시다.

64
00:06:44,400 --> 00:07:06,270
우리의 CSSA 파일을 열면 가장 먼저 할 일은 스타일 스팬이므로 스팬과 우리는 그들에게 배경색으로 붉은 색 즉, 7 4 C 3 C를주고 새로 고침을 할 것입니다.

65
00:07:06,460 --> 00:07:10,820
그리고 이제 우리는 그 주위에 빨간색 배경을 가지고 있습니다.

66
00:07:10,830 --> 00:07:22,680
다음으로해야 할 일은 40 픽셀의 높이를주는 것입니다. 아직 많이하지 않는 것 같습니다.하지만 몇 가지 속성을 추가하면 차이가 있음을 알 수 있습니다.

67
00:07:23,250 --> 00:07:29,140
20 픽셀 오른쪽에 여백을 추가하고 돌아 가자.

68
00:07:29,200 --> 00:07:34,420
이제 우리가 우리가 원하는 공간을 얻을 수 있습니다.

69
00:07:35,550 --> 00:07:45,700
다음으로 텍스트 정렬 센터를 지정하겠습니다. 여기서는 중간 범위에 약간의 차이가 있습니다.

70
00:07:45,990 --> 00:07:55,110
중요한 아이콘 안에있는 아이콘은 아이콘을 너무 희게 만들어서 흰색으로 표시하는 것입니다.

71
00:07:55,110 --> 00:07:55,970
괜찮아.

72
00:07:56,220 --> 00:08:02,640
그래서 애니메이션을 사용하지 않고 처음처럼 보이게하는 방법을 보여주기 위해 항상 애니메이션을 사용합니다.

73
00:08:02,930 --> 00:08:06,830
그리고 나서 우리는 그들이 움직일 때까지 그들이 숨겨 지도록 애니메이트하도록 할 것입니다.

74
00:08:06,870 --> 00:08:12,190
따라서 우리는 점점 가까워지고 있지만, 우리는 수직과 수평으로 더 많은 공간을 차지할 필요가 있습니다.

75
00:08:12,390 --> 00:08:21,990
그래서 저는 40 픽셀을 더해서 결국 0으로 설정하고 라인 2에서 디스플레이 2를 설정하려고합니다.

76
00:08:22,440 --> 00:08:23,950
그리고 나는 지금 새롭게 해.

77
00:08:24,870 --> 00:08:26,790
그리고 그것은 바로 보인다.

78
00:08:26,790 --> 00:08:29,460
그래서 다음은 애니메이션을하는 것입니다.

79
00:08:29,760 --> 00:08:33,630
그리고 그것이 작동하는 방식으로 실제로 너비가 0으로 설정됩니다.

80
00:08:33,780 --> 00:08:42,420
그래서이 모든 범위는 제가 동맹국에 머무를 때까지 0으로되어 있습니다. 그리고 나서 우리는 그 범위에서 40이되도록 증가시킵니다.

81
00:08:42,870 --> 00:08:44,580
자 이제하자.

82
00:08:45,020 --> 00:09:02,480
나는 0으로 설정하고, 그 다음에 우리가 동맹국을 맴돌 았을 때, 그리고 우리가 동맹국을 맴돌 았을 때, 위에 맴돌 았던 동맹국 안에있는 스팬을 선택하기를 원합니다.

83
00:09:02,790 --> 00:09:08,020
그런 다음 40 픽셀로 설정하려고합니다.

84
00:09:08,070 --> 00:09:11,310
그리고 우리 자신의 버전으로 돌아가서 새로 고침하겠습니다.

85
00:09:11,670 --> 00:09:13,920
범위가 사라 졌다는 것을 알 수 있습니다.

86
00:09:14,310 --> 00:09:19,330
그리고 내가 마우스를 가져 가면, 스팬이 나타나고 버튼이 작동합니다.

87
00:09:19,800 --> 00:09:27,860
그래서 다음 기능은 애니메이션을 적용하여 순간적으로 나타나지 않고 전환 속성을 사용합니다.

88
00:09:28,170 --> 00:09:43,680
그래서 스팬에서 우리는 2 초의 트랜지션 제로 포인트를 추가 할 것입니다. 그리고 우리는 일정한 속도로 움직이는 것을 의미하는 이완을 단지 선형으로 만들 것입니다.

89
00:09:43,680 --> 00:09:44,520
그리고 거기에 우리가 간다.

90
00:09:44,520 --> 00:09:46,680
멋진 애니메이션이 있습니다.

91
00:09:47,250 --> 00:09:56,110
아이콘이 너비가 0 픽셀 인 경우에도 아이콘이 계속 표시된다는 것을 알려주는 작은 항목이 하나 있습니다.

92
00:09:56,340 --> 00:09:59,970
따라서보기가 힘들지만 여기에서 아이콘을보십시오.

93
00:09:59,970 --> 00:10:03,230
내가 그 위에 올라 타지 않을 때에도 여전히 거기에 있습니다.

94
00:10:03,240 --> 00:10:11,210
그래서 우리가 할 일은 스팬의 불투명도를 0으로 설정 한 다음 마우스를 올려 놓을 때 하나가되도록 설정하는 것입니다.

95
00:10:11,370 --> 00:10:17,580
따라서 불투명도는 0이고 불투명도는 1.0입니다.

96
00:10:18,420 --> 00:10:19,840
그리고 그것을 처리해야합니다.

97
00:10:19,860 --> 00:10:22,370
이제 아이콘을 볼 수 없습니다.

98
00:10:22,500 --> 00:10:29,790
거기에 그것은 다음 사라지고 그것은 전환 속성이 ​​모든 영향을 미치기 때문에뿐만 아니라 페이드 아웃.

99
00:10:30,120 --> 00:10:34,740
그럼 2.2 초로 만들어 보겠습니다.

100
00:10:35,640 --> 00:10:40,810
페이드 인 (fade in) 한 다음 페이드 아웃 (fade out)하는 방법에 유의하십시오.

101
00:10:40,890 --> 00:10:42,560
그래서 그것은 매우 느린 버전입니다.

102
00:10:43,200 --> 00:10:46,830
그리고 우리는 단지 0.2를 할 것입니다.

103
00:10:47,070 --> 00:10:59,530
우리가 남긴 작은 성가신 일이 있습니다. 여기에 정말 가깝게 보이거나 크기가 커지면 입력과 작은 목록 사이에 약간의 차이가 있습니다.

104
00:11:00,060 --> 00:11:03,810
하지만 지금은 그곳에 집중할 때 그 격차가 사라집니다.

105
00:11:04,200 --> 00:11:07,220
그리고 내가 집중하지 않을 때 그것은 되돌아옵니다.

106
00:11:07,500 --> 00:11:24,690
그래서 우리는 보이지 않는 작은 경계선을 추가 할 것입니다. 실제로 그것은 R.G.의 작은 경계선을 가질 것입니다. 0 0 0 0 0 0 우리가 집중할 때 국경과 같은 공간을 차지할 것입니다.

107
00:11:25,080 --> 00:11:34,560
그래서 우리는 되돌아 가서 우리가 여기있는 입력을 좋아하고 그것을 3 개의 픽셀로 된 고체 R-Ga의 경계를 부여 할 것입니다.

108
00:11:35,150 --> 00:11:38,640
제로 제로 제로

109
00:11:39,210 --> 00:11:41,770
그렇게되면 결국 우리는 보이지 않는 경계를 갖게 될 것입니다.

110
00:11:41,880 --> 00:11:47,420
그러나 여기에 주목하십시오. 나는 작은 격차가 없어지는대로 바로 새로 고칠 것입니다.