1
00:00:00,210 --> 00:00:03,460
Lo siguiente que abordaremos es el fondo del cuerpo.

2
00:00:03,660 --> 00:00:08,430
Y esto en realidad no es una imagen de fondo, aunque si encontramos uno que se parece a

3
00:00:08,430 --> 00:00:09,270
esto, funcionaría bien.

4
00:00:09,420 --> 00:00:13,590
Pero en realidad es un gradiente que CSX está agregando para mí.

5
00:00:13,650 --> 00:00:19,430
Así que, en esencia, podemos escribir degradados lineales y en lugar de escribirlos por nuestra cuenta desde cero, les

6
00:00:19,470 --> 00:00:25,290
mostraré un gran recurso que tiene algunos buenos degradados de color pre-hechos con los que podemos trabajar y que

7
00:00:25,560 --> 00:00:27,470
podemos actualizar y editar en nuestro propio.

8
00:00:27,750 --> 00:00:29,850
Entonces se llama gradientes dot com.

9
00:00:30,030 --> 00:00:35,580
Y luego tiene un montón de degradados diferentes, podemos usar las teclas de flecha para ver algunos de ellos.

10
00:00:36,180 --> 00:00:39,860
Así que solo fui hasta que encontré uno que me gustó.

11
00:00:40,050 --> 00:00:46,080
Entonces, digamos que quería usar todo esto, lo único que tenemos que hacer es hacer clic en Obtener código

12
00:00:46,080 --> 00:00:52,120
CSSA o presionar la tecla Enter y luego copiar este código en un portapapeles y luego seleccionaremos el cuerpo.

13
00:00:52,360 --> 00:00:56,960
Así que cuerpo y pegar eso en.

14
00:00:57,540 --> 00:01:02,610
Entonces, en realidad solo se trata de una línea, pero existen todos los prefijos de navegador diferentes.

15
00:01:02,880 --> 00:01:09,130
Así que para Internet Explorer para Firefox para Chrome para opera todos estos prefijos diferentes.

16
00:01:09,240 --> 00:01:09,990
Pero lo que hace

17
00:01:10,020 --> 00:01:16,170
Estamos configurando el fondo en degradado lineal y estamos eligiendo dos colores y porcentajes diferentes de

18
00:01:16,170 --> 00:01:18,740
esos colores y también el ángulo.

19
00:01:18,750 --> 00:01:24,390
Así que déjame mostrarte cómo se ve ahora si actualizamos los nuestros.

20
00:01:24,390 --> 00:01:26,190
Tenemos este lindo degradado

21
00:01:26,580 --> 00:01:28,420
Entonces podemos seguir jugando por ahí.

22
00:01:28,620 --> 00:01:31,890
Puede ver algunos más y puede usar los suyos.

23
00:01:31,980 --> 00:01:35,860
El que decidí se llama Bora-Bora aquí mismo.

24
00:01:36,210 --> 00:01:42,840
Así que copiaremos esa copia en el portapapeles y reemplazaremos este código.

25
00:01:42,840 --> 00:01:49,410
Todo esto aquí con ese nuevo degradado que nuevamente es solo otro gradiente lineal que alguien más

26
00:01:49,410 --> 00:01:52,870
escribió en dos colores diferentes porcentajes de cada uno.

27
00:01:53,150 --> 00:01:54,450
Y ahorraremos

28
00:01:54,780 --> 00:01:56,250
Y ve a verlo ahora.

29
00:01:56,520 --> 00:01:57,830
Y ahí vamos.

30
00:01:57,840 --> 00:01:59,190
Así que nos estamos acercando.

31
00:01:59,430 --> 00:02:02,860
La próxima gran cosa en la que tenemos que trabajar son los íconos.

32
00:02:03,060 --> 00:02:05,530
Entonces, aparece un icono más.

33
00:02:05,640 --> 00:02:10,130
Y lo que hace es mostrar y esconder la forma y luego tenemos la papelera.

34
00:02:10,130 --> 00:02:16,100
Puedo ver que también necesitamos incluir esos iconos que son parte de una biblioteca llamada fuente.

35
00:02:16,110 --> 00:02:16,780
Increíble.

36
00:02:17,050 --> 00:02:22,650
Así que vaya a la fuente impresionante y solo google para el sitio web es Fonte impresionante.

37
00:02:22,660 --> 00:02:24,030
Yo consigo a su yo

38
00:02:24,930 --> 00:02:29,660
Y todo lo que es es una colección de un grupo de iconos.

39
00:02:29,970 --> 00:02:36,780
Así que déjame mostrarte si miramos debajo de los iconos hay una gran lista de todos los iconos diferentes que podemos usar

40
00:02:38,260 --> 00:02:39,720
para que puedas ver allí.

41
00:02:40,380 --> 00:02:48,030
Entonces, debemos incluir esta biblioteca dentro de nuestra aplicación para que podamos ir a descargarla allí mismo

42
00:02:48,030 --> 00:02:52,740
y hacer clic en descargar o también podríamos hacer una fuente.

43
00:02:52,740 --> 00:02:57,370
Awesome CDN y solo usa uno de estos CDN también.

44
00:02:57,450 --> 00:02:58,710
Cualquiera de los dos funcionaría.

45
00:02:59,100 --> 00:03:06,030
Entonces, para variar, dado que ya descargaron Jay query, usaré el CD y aquí copio ese enlace.

46
00:03:07,470 --> 00:03:15,780
página de índice Timo y necesito agregar una etiqueta de enlace porque es un archivo CSSA, por lo que no es realmente un archivo JavaScript o

47
00:03:15,780 --> 00:03:23,100
una fuente, pero es un archivo C Ss y lo guardaré, y lo que eso hace es en realidad, me da un montón

48
00:03:23,100 --> 00:03:29,540
de clases que están preconstruidas y prefabricadas que luego puedo agregar a los elementos, así que le mostraré algunos ejemplos.

49
00:03:29,550 --> 00:03:30,940
Luego iré a mi

50
00:03:31,230 --> 00:03:40,740
Si desea utilizar, por ejemplo, la batería vacía o la batería de tres cuartos, todo lo que necesitamos saber es que la clase se llama

51
00:03:40,740 --> 00:03:47,760
f dash battery dash 3 dash courts Así que tenemos que agregar uno solo copie el código aquí

52
00:03:49,140 --> 00:03:51,350
en alguna parte de nuestra aplicación.

53
00:03:51,510 --> 00:03:53,400
Pongamos en la H-1.

54
00:03:53,400 --> 00:03:58,980
Es una etiqueta que significa icono y le damos una clase y no tenemos que poner nada aquí.

55
00:03:59,070 --> 00:04:02,560
Lo dejamos vacío y esto representa a Rifan increíble.

56
00:04:02,700 --> 00:04:10,890
y guardará la actualización y ahora tenemos ese ícono de la batería en lugar del ícono de la batería de tres cuartos.

57
00:04:10,890 --> 00:04:13,500
Y este es el nombre del ícono

58
00:04:13,500 --> 00:04:20,700
Queremos el signo más y el cubo de basura, así que veremos aquí y dentro del H-1 mantendremos el ícono y

59
00:04:21,480 --> 00:04:28,070
mantendremos la clase pero queremos F. A. dash plus y siéntete libre de usar tu propio ícono.

60
00:04:28,110 --> 00:04:33,420
Si continúas encontrando increíbles y encuentras otro que te guste, también podríamos usar uno como un

61
00:04:33,420 --> 00:04:40,050
lápiz que parezca un ícono o un lápiz y papel, y si estuviera fresco y ahora tengo el signo

62
00:04:40,800 --> 00:04:48,330
más que entró en estilo y movimiento a la derecha y todo lo que tenemos que hacer para eso es seleccionarlo primero,

63
00:04:48,330 --> 00:04:49,990
así que seleccionaremos el perro.

64
00:04:50,280 --> 00:05:00,000
F a dash plus y flotará justo así y actualizar y ahora está terminado en el sitio correcto.

65
00:05:00,960 --> 00:05:06,250
Ahora abordemos los botes de basura y no vamos a ocuparnos de la animación todavía.

66
00:05:06,300 --> 00:05:09,810
Solo vamos a mostrar el cubo de basura en vez de una X.

67
00:05:10,260 --> 00:05:17,640
Así que volvamos y en nuestra spand vamos a deshacernos de las X's y dentro del

68
00:05:17,640 --> 00:05:27,030
lapso vamos a agregar otra etiqueta electrónica y el e-TAG va a tener una clase de FAA y el nombre de

69
00:05:27,030 --> 00:05:38,430
el ícono de la basura es la basura FAA Dasch, copiemos eso en los otros vanos y esto solo se aplica a los existentes cuando

70
00:05:38,920 --> 00:05:44,520
se carga la página, pero obtenemos tres contenedores de basura para los nuevos.

71
00:05:44,730 --> 00:05:46,280
Todavía estamos lidiando con el ex.

72
00:05:46,530 --> 00:05:50,310
Entonces, queremos ir a nuestro Javascript.

73
00:05:50,310 --> 00:05:54,990
Y cuando pensemos uno nuevo, no queremos agregar un lapso con X.

74
00:05:55,290 --> 00:06:00,930
Desea agregar un icono y debemos asegurarnos de que nuestras cotizaciones no interfieran.

75
00:06:00,930 --> 00:06:08,290
Entonces, si usamos comillas simples allí y las guardamos, ahora deberíamos tener un ícono de papelera dentro del lapso.

76
00:06:08,870 --> 00:06:10,830
Así que agreguemos algunos nuevos.

77
00:06:10,830 --> 00:06:11,650
Aquí vamos.

78
00:06:12,030 --> 00:06:15,320
Y todavía puedo hacer clic porque todavía están dentro de un lapso.

79
00:06:15,450 --> 00:06:18,680
Entonces es un elemento icono en lugar de un lapso.

80
00:06:19,530 --> 00:06:22,440
Así que hago clic en evento todavía funciona.

81
00:06:22,470 --> 00:06:28,380
Ahora trabajemos en esta animación simple y todo esto se hace con C evaluar que los tramos aquí están realmente

82
00:06:28,380 --> 00:06:30,210
ocultos cuando se carga la página.

83
00:06:30,210 --> 00:06:31,630
Tienen una riqueza de cero.

84
00:06:31,860 --> 00:06:38,760
Y luego, cuando cierro, en realidad estamos aumentando el ancho a 40 píxeles y luego lo estamos animando

85
00:06:39,030 --> 00:06:40,950
con la propiedad de transición.

86
00:06:41,430 --> 00:06:44,070
Así que vamos a intentar algo de eso.

87
00:06:44,400 --> 00:06:53,850
Abra nuestro archivo CSSA y lo primero que haremos será cambiar el estilo para que se expanda

88
00:06:54,510 --> 00:07:06,270
y le daremos un color de fondo de color rojo que es e 7 4 C 3 C y se actualizará.

89
00:07:06,460 --> 00:07:10,820
Y ahora tenemos ese fondo rojo a su alrededor.

90
00:07:10,830 --> 00:07:19,470
Lo siguiente que haremos es darles una altura de 40 píxeles, lo que no parece hacer mucho todavía, pero una vez

91
00:07:19,470 --> 00:07:22,680
que agreguemos algunas propiedades más notará la diferencia.

92
00:07:23,250 --> 00:07:29,140
Agreguemos un margen a la derecha de 20 píxeles y regresemos.

93
00:07:29,200 --> 00:07:34,420
Ahora que nos da el espacio que queríamos aquí.

94
00:07:35,550 --> 00:07:38,760
A continuación, démosles un texto que alinee el centro,

95
00:07:41,970 --> 00:07:45,700
que es solo una pequeña diferencia en los tramos aquí.

96
00:07:45,990 --> 00:07:55,110
Los íconos dentro de uno importante son para hacer que el ícono sea demasiado blanco para que el color sea blanco.

97
00:07:55,110 --> 00:07:55,970
Todo bien.

98
00:07:56,220 --> 00:08:01,730
Así que voy a mostrarte cómo hacer que se vean así primero sin la animación para que

99
00:08:01,740 --> 00:08:02,640
siempre estén ahí.

100
00:08:02,930 --> 00:08:06,830
Y luego los animaremos para que estén ocultos hasta que estemos sobre él.

101
00:08:06,870 --> 00:08:12,190
Así que nos estamos acercando, pero necesitamos que estos ocupen más espacio vertical y horizontalmente.

102
00:08:12,390 --> 00:08:20,360
Así que voy a agregar un a con 40 píxeles que eventualmente vamos a establecer en cero y establecer

103
00:08:20,510 --> 00:08:21,990
dos en línea Bloquear.

104
00:08:22,440 --> 00:08:23,950
Y me actualizo ahora.

105
00:08:24,870 --> 00:08:26,790
Y eso se ve bien.

106
00:08:26,790 --> 00:08:29,460
Entonces, lo siguiente es hacer la animación.

107
00:08:29,760 --> 00:08:33,630
Y la forma en que eso funcione realmente vamos a establecer que el ancho sea cero.

108
00:08:33,780 --> 00:08:40,410
Entonces, todos estos tramos tienen un cero hasta que sobrevuelo un aliado y luego lo aumento

109
00:08:40,410 --> 00:08:42,420
con 40 en ese lapso.

110
00:08:42,870 --> 00:08:44,580
Así que hagámoslo ahora.

111
00:08:45,020 --> 00:08:53,370
aliado y no solo el tramo, pero cuando pasamos el mouse sobre un aliado queremos seleccionar el tramo que está dentro de un

112
00:08:53,370 --> 00:08:54,810
aliado que está sobrevolando.

113
00:08:57,930 --> 00:09:02,480
Voy a establecer con cero y luego cuando pasemos por encima de un

114
00:09:02,790 --> 00:09:08,020
Entonces vamos a configurar con 40 píxeles así.

115
00:09:08,070 --> 00:09:11,310
Y volvamos a nuestra propia versión y actualización.

116
00:09:11,670 --> 00:09:13,920
Puedes ver que las luces se han ido.

117
00:09:14,310 --> 00:09:19,330
Y cuando sobrevuelo y vuelo aparece el tramo y el botón funciona.

118
00:09:19,800 --> 00:09:25,470
Entonces, la siguiente característica es hacer que se active para que no aparezca instantáneamente y para hacerlo

119
00:09:25,800 --> 00:09:27,860
solo usaremos la propiedad de transición.

120
00:09:28,170 --> 00:09:38,340
dos segundos y lo haremos lineal, lo que simplemente se refiere a la aceleración, lo que significa que se moverá a una velocidad constante.

121
00:09:38,340 --> 00:09:43,680
Entonces, en el tramo vamos a agregar el punto cero de transición en

122
00:09:43,680 --> 00:09:44,520
Y ahí vamos.

123
00:09:44,520 --> 00:09:46,680
Tenemos nuestra buena animación.

124
00:09:47,250 --> 00:09:54,420
Hay un pequeño artículo que me molesta aquí, que es que el ícono aún se muestra incluso cuando el lapso es

125
00:09:54,420 --> 00:09:56,110
de cero píxeles de ancho.

126
00:09:56,340 --> 00:09:59,970
Por lo tanto, es muy difícil de ver, pero mire el ícono aquí.

127
00:09:59,970 --> 00:10:03,230
Todavía está allí, incluso cuando no estoy sobre él.

128
00:10:03,240 --> 00:10:11,040
Entonces, lo que haremos es establecer la opacidad en el tramo para que sea cero y luego configurarlo para que sea uno cuando pasemos el mouse.

129
00:10:11,370 --> 00:10:17,580
Entonces opacidad cero y luego opacidad 1. 0 cuando volamos.

130
00:10:18,420 --> 00:10:19,840
Y eso debería encargarse de eso.

131
00:10:19,860 --> 00:10:22,370
Entonces ahora no podemos ver los iconos.

132
00:10:22,500 --> 00:10:28,680
Ahí está y luego desaparece y se desvanece también porque la propiedad de transición está

133
00:10:28,950 --> 00:10:29,790
afectando todo.

134
00:10:30,120 --> 00:10:34,740
Así que hagámoslo 2. 2 segundos y te mostraré.

135
00:10:35,640 --> 00:10:40,810
Observe cómo se desvanece y luego se desvanece.

136
00:10:40,890 --> 00:10:42,560
Entonces esa es una versión muy lenta.

137
00:10:43,200 --> 00:10:46,830
Y solo haremos 0. 2.

138
00:10:47,070 --> 00:10:53,250
Hay una pequeña cosa molesta que nos queda, que si se mira muy de cerca aquí o

139
00:10:53,250 --> 00:10:59,530
se aumenta el tamaño, hay un pequeño espacio entre la entrada y luego esta lista la UL.

140
00:11:00,060 --> 00:11:03,810
Pero la brecha desaparece cuando me concentro en el rubor.

141
00:11:04,200 --> 00:11:07,220
Y luego, cuando no estoy enfocado, vuelve.

142
00:11:07,500 --> 00:11:13,450
Entonces, para arreglar eso vamos a agregar un borde pequeño que es invisible, de hecho

143
00:11:13,530 --> 00:11:23,340
tendrá un color solo un pequeño borde de R. GRAMO. be 0 0 0 0 0 0, que ocuparemos el mismo espacio que

144
00:11:23,340 --> 00:11:24,690
nuestro límite cuando estemos enfocados.

145
00:11:25,080 --> 00:11:34,560
Así que volveremos y nos gustará la entrada que tenemos aquí y le daremos un límite de R-Ga sólido de tres píxeles.

146
00:11:35,150 --> 00:11:38,640
cero cero cero cero.

147
00:11:39,210 --> 00:11:41,770
Entonces eso terminará dándonos un borde invisible.

148
00:11:41,880 --> 00:11:47,420
Pero fíjate que aquí voy a actualizar, ese pequeño espacio se va.

149
00:11:47,850 --> 00:11:53,580
Así que ahora no solo se enrojece el borde cuando lo tenemos enfocado, sino que también hay un borde que

150
00:11:53,580 --> 00:11:56,000
nos ayuda a enrojecer que en realidad no vemos