1
00:00:04,260 --> 00:00:08,990
Então, voltando a esse tutorial, o próximo passo é começar a trabalhar nos nossos C-s.

2
00:00:09,150 --> 00:00:13,420
Então, precisamos criar um novo arquivo C S S e folhas de estilo público e chamá-lo.

3
00:00:13,590 --> 00:00:15,280
Esse sucesso.

4
00:00:15,510 --> 00:00:20,860
Então, se voltarmos aqui, vá para o nosso diretório público abrir folhas de estilo parece que ele já

5
00:00:20,940 --> 00:00:24,930
está aberto e com um clique direito Criar novo arquivo e eu chamarei este.

6
00:00:24,930 --> 00:00:26,350
Blanding é sim.

7
00:00:27,430 --> 00:00:32,120
Agora, se eu abri-lo, está em branco e está pronto para ser preenchido

8
00:00:32,130 --> 00:00:35,530
com todas as regras que irão modelar nossa página principal.

9
00:00:36,150 --> 00:00:41,450
Então, de volta aqui, a primeira coisa que queremos fazer é abrir aprendendo. Danciu diz o que fizemos.

10
00:00:41,590 --> 00:00:44,750
E queremos configurar a cor de fundo dos corpos para bloquear.

11
00:00:44,800 --> 00:00:46,120
Você pode escolher qualquer cor que você gosta.

12
00:00:46,120 --> 00:00:50,860
Eu só acho que parece bom desvanecer-se na primeira imagem de um fundo preto e então começar o

13
00:00:50,860 --> 00:00:51,980
crossfade a partir daí.

14
00:00:55,530 --> 00:01:00,300
Então, coloquei nesta regra, o que fizemos é selecionada a etiqueta do corpo e, em seguida, configura as costas na

15
00:01:00,300 --> 00:01:01,230
cor para o hash.

16
00:01:01,270 --> 00:01:07,530
0 0 0 que é o mesmo que preto.

17
00:01:07,610 --> 00:01:13,010
Então, agora eu preciso de uma posição de todo o contexto e para ver todos os acampamentos que temos é selecionado

18
00:01:13,010 --> 00:01:13,720
com um ID.

19
00:01:13,760 --> 00:01:19,290
Então, vamos seguir em frente e usar o seletor IDs e esse é o cabeçalho Blowing.

20
00:01:19,870 --> 00:01:24,630
E o que fizemos aqui é que tomamos esse texto e nós demos um índice z de 1.

21
00:01:24,640 --> 00:01:29,700
Então, se você não sabe sobre o índice z, basicamente, a página da Web pode ser visualizada em um plano tridimensional.

22
00:01:29,860 --> 00:01:36,310
Nós temos X e Y, que é esquerda e direita para cima e para baixo e então Z que está para a frente e para trás no espaço.

23
00:01:36,310 --> 00:01:40,120
Então, se lhe darmos um índice z de 1, está vindo em nossa direção.

24
00:01:40,240 --> 00:01:45,860
posição de algo diferente da estática estática é o valor de posição padrão para todos os seus elementos HTML .

25
00:01:45,860 --> 00:01:50,980
E aquele em camadas em cima de qualquer outro conteúdo que tenha um índice Az menor do que

26
00:01:50,980 --> 00:01:54,380
um para que possamos usar o índice z, temos que mudar a

27
00:01:54,580 --> 00:01:58,300
E se você usar estática, ele realmente ignorará o índice z.

28
00:01:58,300 --> 00:02:01,080
Agora, o que queremos fazer é centrar esse texto e o botão.

29
00:02:01,090 --> 00:02:05,440
Então eu apenas uso o centro de alinhamento de texto aqui e isso nos levará centrados horizontalmente.

30
00:02:05,470 --> 00:02:09,730
Agora, para que possamos subtrair verticalmente na página, na verdade, são muitas maneiras

31
00:02:09,730 --> 00:02:15,880
diferentes de fazer isso, mas descobri que a maneira mais fácil de fazê-lo é usar a altura da vista.

32
00:02:15,910 --> 00:02:19,920
Então, o que fazemos aqui é que nós colocamos o topo do estofamento até a altura da visão 40.

33
00:02:20,230 --> 00:02:24,690
A razão pela qual eu não jogo aos 50 é porque isso realmente pressionaria o conteúdo para baixo.

34
00:02:24,700 --> 00:02:26,490
E parece que está centrado.

35
00:02:27,010 --> 00:02:33,380
Então, vamos salvar esta regra, volte aqui para atualizar e você pode ver que o fundo é

36
00:02:33,930 --> 00:02:35,220
preto e o fundo.

37
00:02:35,290 --> 00:02:35,560
Sim.

38
00:02:35,580 --> 00:02:40,020
O texto não está centralizado na página se quisermos que possamos atualizar aqui.

39
00:02:40,150 --> 00:02:42,710
Veja um pouco melhor.

40
00:02:42,720 --> 00:02:47,630
Então, agora, o texto Bem-vindo ao seu acampamento é visivelmente visível, então mudamos isso aqui em um segundo.

41
00:02:49,800 --> 00:02:57,030
E parece que apenas levamos a cabeça de aterrissagem ou o Slichter adicionamos um seletor H1 e

42
00:02:57,030 --> 00:02:58,960
mudamos a cor para 1.

43
00:02:59,700 --> 00:03:07,200
Então, adicione que aqui eu irei dizer que atualizar a página e agora é muito mais fácil ver o texto.

44
00:03:07,270 --> 00:03:11,170
E quando conseguiremos o fundo lá, será mais fácil vê-lo também.

45
00:03:13,730 --> 00:03:17,080
Então, a próxima coisa que queremos fazer é o estilo da lista desordenada.

46
00:03:17,360 --> 00:03:21,370
E porque você sabe que a lista tem uma classe de apresentação de slides, é muito fácil para nós deslizar.

47
00:03:21,650 --> 00:03:25,040
Então, eu tomarei essa regra e vamos conectá-la aqui.

48
00:03:25,580 --> 00:03:32,330
página e então empurramos para cima no canto superior esquerdo da página usando posições de nível superior de zero.

49
00:03:32,390 --> 00:03:38,060
Então, nós selecionamos o honorável com sua classe e nós ajustamos a posição afixada dentro da altura

50
00:03:38,060 --> 00:03:41,360
para 100 por cento assim que vai ocupar toda a

51
00:03:41,690 --> 00:03:44,890
E então, se você vê aqui, temos o índice z definido como zero.

52
00:03:45,000 --> 00:03:49,940
Isso garantirá que as imagens de fundo estejam por trás do outro conteúdo, como sejam bem-vindos ao seu texto

53
00:03:49,970 --> 00:03:52,130
em nossa visão ou nos campos de acampamento.

54
00:03:53,910 --> 00:03:55,070
Defina nosso estilo de lista.

55
00:03:55,080 --> 00:03:58,240
E nesta guerra, movem os pontos da bala desse jeito.

56
00:03:58,240 --> 00:04:00,340
Não os vemos nos itens da lista.

57
00:04:00,340 --> 00:04:03,170
E, finalmente, queremos garantir que não haja margem ou preenchimento.

58
00:04:03,340 --> 00:04:05,180
Então, definimos os dois para zero.

59
00:04:05,620 --> 00:04:08,530
Agora, salvamos que voltemos aqui e estávamos frescos.

60
00:04:08,770 --> 00:04:12,480
Podemos ver que os pontos de bala que estavam no lado esquerdo aqui desapareceram.

61
00:04:16,660 --> 00:04:19,670
Agora, precisamos fazer um estilo dos itens da lista individual.

62
00:04:19,780 --> 00:04:26,460
aqui copiar, trazê-lo para o Intourist, o SS colá-lo abaixo da lista não descartada e o que temos aqui são os

63
00:04:26,470 --> 00:04:32,670
mesmos shows de slides de pontos do seletor de classe para a lista de roteiros de honra e então estamos

64
00:04:33,040 --> 00:04:38,950
dizendo isso para selecionar cada item da lista dentro da lista novamente, estabelecemos a largura e altura para 100%.

65
00:04:38,950 --> 00:04:40,570
Então, vamos puxar esta regra

66
00:04:40,600 --> 00:04:47,470
Desta vez, posicionamos a posição absoluta superior e esquerda ou zero novamente, o tamanho do fundo está configurado para cobrir.

67
00:04:47,470 --> 00:04:53,100
E isso é o que permitirá que as imagens ocupem todo o espaço da página.

68
00:04:53,110 --> 00:04:56,240
Nós também estabelecemos nossa posição de volta para 50 por cento 50 por cento.

69
00:04:56,430 --> 00:04:59,660
E isso irá centrar as imagens perfeitamente na página.

70
00:04:59,660 --> 00:05:02,720
Então, por fim, definimos o cenário feliz sem repetir.

71
00:05:03,010 --> 00:05:06,870
Isto é, onde a imagem não está repetindo verticalmente ou horizontalmente.

72
00:05:07,060 --> 00:05:13,330
e então usaremos a animação que vamos criar um pouco para desvendá-las lentamente em uma opacidade de uma.

73
00:05:13,330 --> 00:05:17,650
Configuramos a nossa opacidade para zero porque queremos que nossas imagens começassem desaparecendo

74
00:05:17,770 --> 00:05:22,930
Nós ajustamos o nosso índice z novamente para zero novamente, isso assegurará que as imagens de fundo sejam colocadas

75
00:05:23,020 --> 00:05:24,790
atrás do texto e do botão.

76
00:05:25,150 --> 00:05:29,540
A última propriedade que temos aqui é chamada de animação e isso é algo que não vimos antes.

77
00:05:29,590 --> 00:05:33,430
Então, isso nos permitirá realmente desvendar imagens dentro e fora.

78
00:05:33,490 --> 00:05:38,920
Então, o nome da animação é animação de imagem e isso é arbitrário, você pode chamá-lo

79
00:05:38,920 --> 00:05:44,430
do que quiser, contanto que combine com a animação que vamos criar aqui em minutos e

80
00:05:44,430 --> 00:05:46,950
então dizemos que a animação durará 50 segundos.

81
00:05:47,130 --> 00:05:51,780
Certifique-se de que é linear e o que significa linear é que apenas mostra que a animação

82
00:05:51,780 --> 00:05:54,120
é a mesma velocidade do começo ao fim.

83
00:05:54,150 --> 00:05:57,370
E, finalmente, contamos a animação para loop infinitamente.

84
00:05:57,480 --> 00:05:59,410
Dessa forma, nosso slide show nunca termina.

85
00:06:01,160 --> 00:06:05,810
Então, podemos dizer isso, mas se nós visualizamos isso, nada vai mostrar ainda porque não temos a

86
00:06:05,810 --> 00:06:06,430
animação configurada.

87
00:06:06,530 --> 00:06:10,130
Também não temos imagens configuradas para os itens da lista individual.

88
00:06:10,130 --> 00:06:11,580
Então, vamos em frente e faça isso agora.

89
00:06:15,890 --> 00:06:20,900
Então, vamos copiar todo o item da lista de slides em seletores filho e isso é o

90
00:06:20,900 --> 00:06:24,390
que vai adicionar as imagens de fundo aos itens da lista real.

91
00:06:30,790 --> 00:06:37,690
Então, agora e podemos ver que há cinco itens de lista começando com a criança, que vai

92
00:06:37,690 --> 00:06:38,470
até cinco.

93
00:06:38,520 --> 00:06:44,050
Damos a cada um uma imagem de fundo a sua função e, se você quiser, pode vincular a esses locais ou

94
00:06:44,050 --> 00:06:48,030
pode colocar as imagens dentro de seu diretório público dentro de um diretório de imagens.

95
00:06:48,070 --> 00:06:53,020
Eu segui em frente e basta carregá-los usando a imagem ou este é um serviço de upload gratuito na web.

96
00:06:53,200 --> 00:06:58,780
realmente destinado a hospedar imagens para usar em seu site, mas é uma solução rápida à mão usada.

97
00:06:58,780 --> 00:06:59,390
Não é

98
00:06:59,770 --> 00:07:02,740
A animação para a primeira imagem de fundo vai começar imediatamente.

99
00:07:02,830 --> 00:07:05,030
Portanto, não precisamos dar uma demora de animação.

100
00:07:05,110 --> 00:07:09,570
Queremos que cada imagem desapareça após 10 segundos da imagem anterior.

101
00:07:09,580 --> 00:07:15,290
Então, eu ajuste o próximo atraso de animação de imagem para 10 segundos e então aumentamos em 10 para cada imagem depois disso.

102
00:07:15,430 --> 00:07:20,590
Então, 20 segundos para o terceiro 30 para o quarto e 40 para o quinto, que nos

103
00:07:20,590 --> 00:07:24,320
levará até 50 segundos e depois voltará para a imagem número um.

104
00:07:25,150 --> 00:07:30,460
nada porque todas as peças são definidas para zero e não temos a animação configurada para desaparecer em uma.

105
00:07:30,460 --> 00:07:35,600
Então, novamente, podemos seguir em frente e dizer o pouso no arquivo CSSA, mas ainda não vamos ver

106
00:07:35,620 --> 00:07:41,330
Então, vá em frente e faça isso agora.

107
00:07:41,420 --> 00:07:48,400
Então, vou copiar a regra de animação de imagem dos quadros-chave do tutorial e colá-lo aqui.

108
00:07:54,240 --> 00:08:01,590
Então, o que estamos fazendo é tomar o seletor no quadro e dar à animação o nome da animação da imagem.

109
00:08:01,590 --> 00:08:07,490
E isso coincide com o valor anterior que tivemos para a propriedade de animação em nossa apresentação

110
00:08:07,500 --> 00:08:09,900
de slides era a regra de slide.

111
00:08:09,900 --> 00:08:16,150
Então, temos isso no lugar o que faremos é indicar o que queremos ter acontecido em vários

112
00:08:16,200 --> 00:08:17,700
quadros-chave dentro da animação.

113
00:08:17,820 --> 00:08:23,520
Assim, a animação vai de zero por cento até 100 por cento, mas estamos preocupados apenas com zero

114
00:08:23,520 --> 00:08:24,800
a 30 por cento.

115
00:08:25,110 --> 00:08:31,230
Então o que acontece aqui é que começamos nossa animação em zero para a opacidade e, em seguida, até

116
00:08:31,230 --> 00:08:32,220
10 por cento.

117
00:08:32,370 --> 00:08:34,260
Nós deixamos isso desaparecer no espaço.

118
00:08:34,290 --> 00:08:41,580
Quando deixamos a opacidade em um todo através de 20 por cento e, em seguida, encontramos de volta a zero

119
00:08:41,580 --> 00:08:43,110
em 30 por cento.

120
00:08:43,110 --> 00:08:50,040
temporização de animação de propriedades configurada para facilitar de 0 a 10 e, em seguida, também tende a diminuir.

121
00:08:50,040 --> 00:08:53,100
Você também percebe que temos a função de

122
00:08:53,160 --> 00:08:58,030
Então, isso nos dá uma transição mais suave, como Faden de 0 a 1.

123
00:08:58,920 --> 00:09:02,200
Então, você pode estar se perguntando onde surgiu essas porcentagens.

124
00:09:02,400 --> 00:09:08,840
Então, avancei e criei um gráfico da animação para ajudá-lo a visualizar melhor o que está acontecendo aqui.

125
00:09:09,840 --> 00:09:16,020
Então, basicamente, temos uma imagem que irá animar de zero segundos a 10 segundos e a segunda imagem

126
00:09:16,020 --> 00:09:17,880
passará de 10 para 20.

127
00:09:17,880 --> 00:09:25,510
O terceiro de 20 a 30 e depois de 30 a 40 e, em seguida, 40 a 50 formando cinco imagens a 10 segundos cada.

128
00:09:25,740 --> 00:09:32,340
desbotada na opacidade de um e depois de 10 segundos a 15 segundos, desaparecemos na próxima imagem.

129
00:09:32,340 --> 00:09:40,000
Então, de zero segundos a 10 segundos, temos um Faden de cinco segundos e, então, temos a imagem ficando

130
00:09:40,260 --> 00:09:47,330
Assim, isso pode ser representado por azul, que é desvanecido em vermelho, que é sollen e depois desaparece, que é laranja.

131
00:09:47,700 --> 00:09:54,810
Assim, a primeira imagem vai de 0 por cento a 10 por cento e isso está desaparecendo de zero segundos a

132
00:09:54,810 --> 00:09:59,250
cinco segundos e permanece sólido de 10 por cento a 20 por cento.

133
00:09:59,250 --> 00:10:03,330
Então, você vê que temos 10 por cento a 20 por cento de pastoso um pastoso.

134
00:10:03,570 --> 00:10:08,920
E então, de 20% a 30%, está realmente desaparecendo de uma volta para zero.

135
00:10:09,270 --> 00:10:16,200
E como isso está acontecendo, a próxima imagem que a animação já começou em 10 segundos será de

136
00:10:16,290 --> 00:10:18,870
zero a uma de 10 a 15.

137
00:10:18,870 --> 00:10:22,070
E isso se sobrepõe aqui criando esse efeito de crossfade.

138
00:10:22,290 --> 00:10:27,510
Então, isso permanece sólido por cinco segundos e então temos outra sobreposição à medida que desaparece

139
00:10:27,510 --> 00:10:34,990
e a próxima imagem desaparece e o mesmo padrão se repete até chegar a 50 segundos, que é o final da nossa animação.

140
00:10:35,040 --> 00:10:36,630
Esta imagem é sólida.

141
00:10:36,840 --> 00:10:42,200
E então, vamos até o início, onde a imagem original fica desbotada enquanto a

142
00:10:42,210 --> 00:10:47,300
quinta imagem desaparece e então começa de novo e faz um loop infinito.

143
00:10:47,340 --> 00:10:51,910
Então, vamos em frente e guarde nossos EUA e abra a web cam.

144
00:10:52,020 --> 00:10:56,380
Certifique-se de que seus servidores funcionem e atualizem e podemos ver a animação ao vivo.

145
00:11:02,590 --> 00:11:07,530
Então, esta imagem é visível por cinco segundos e agora vai desaparecer à medida que a próxima imagem desaparecer.

146
00:11:07,630 --> 00:11:09,450
Então, essa é uma transição de cinco segundos.

147
00:11:09,550 --> 00:11:13,870
Recebemos mais cinco segundos dessa foto e depois desapareceremos na próxima.

148
00:11:16,550 --> 00:11:22,070
Então, a última coisa que você quer fazer é garantir que nosso controle deslizante de fundo funcione em todos os navegadores.

149
00:11:22,190 --> 00:11:29,420
Então, de volta ao tutorial aqui e no fundo, eu tenho essa regra aqui ou copie-a.

150
00:11:29,420 --> 00:11:31,380
Traga de volta ao seu sucesso.

151
00:11:31,440 --> 00:11:38,540
CSSA Klowns foi adicionada pelo modernizador e já tínhamos o CD dos modernizadores e aqui mesmo se

152
00:11:38,540 --> 00:11:45,680
você quiser saber como achei que acabei de olhar up moderniser CDR e eu escolheu o primeiro.

153
00:11:45,680 --> 00:11:54,600
Colá-lo no fundo e você vê que eu tenho esta vírgula que diz que os navegadores mais antigos suportam as animações não

154
00:11:55,760 --> 00:12:02,420
Então eu acabei de copiar a versão do arquivo e então eu a adiciono a uma tag de script

155
00:12:02,420 --> 00:12:08,270
na cabeça e eu configurei o script para uma sincronização que faz com que esse javascript funcione

156
00:12:08,270 --> 00:12:10,510
simultaneamente com os outros recursos na página.

157
00:12:11,420 --> 00:12:16,330
Então, se voltarmos para a CSSA, podemos ver que eles apenas têm a capacidade definida para 1.

158
00:12:16,340 --> 00:12:21,500
Então, o que acontecerá aqui é que os navegadores que não suportam a integração de sistemas terão

159
00:12:21,500 --> 00:12:25,250
apenas um slide visível e esse seria o plano de fundo dessa imagem.

160
00:12:27,070 --> 00:12:30,390
Então, é isso para o controle deslizante de imagem de fundo em tela cheia.

161
00:12:30,550 --> 00:12:33,640
Se você tiver alguma dúvida, como agora, e vou ver o próximo vídeo.

162
00:12:33,640 --> 00:12:34,000
Obrigado.