1
00:00:00,390 --> 00:00:01,650
De acuerdo, bienvenido.

2
00:00:01,660 --> 00:00:05,770
En este video, vamos a trabajar en el diseño de nuestro sitio en este momento.

3
00:00:05,850 --> 00:00:09,530
Definitivamente no está cerca de cómo se supone que debe verse al final.

4
00:00:09,810 --> 00:00:12,960
Así que vamos a compararlos uno al lado del otro.

5
00:00:13,530 --> 00:00:14,840
Aquí está el nuestro aquí.

6
00:00:15,030 --> 00:00:21,280
Entonces, algunos de los grandes cambios que necesitamos para redondear las esquinas agregan espacio entre los primeros.

7
00:00:21,360 --> 00:00:23,260
Cambiando el estilo de los botones aquí.

8
00:00:23,490 --> 00:00:27,750
un efecto de desplazamiento, nuestros botones son definitivamente horribles y no tenemos ningún efecto de desplazamiento sobre ellos.

9
00:00:28,470 --> 00:00:32,370
Entonces, estos botones realmente no parecen botones hasta que pasas el cursor sobre ellos y obtenemos

10
00:00:32,370 --> 00:00:35,200
También la posición de ellos es un poco incorrecta.

11
00:00:35,550 --> 00:00:43,130
Como puede ver, si adivino aquí, recibo texto, pero si estuviera fresco, ese espacio tecnológico ya está ocupado, en comparación

12
00:00:43,200 --> 00:00:48,310
con nuestra versión, si creo que el texto empuja todo a los lados.

13
00:00:48,470 --> 00:00:51,480
También hay una animación aquí.

14
00:00:51,510 --> 00:01:00,360
Entonces, cuando hago clic noto cómo se desvanecen lentamente en la nuestra cuando hacemos clic bien si hago clic en uno incorrecto,

15
00:01:01,170 --> 00:01:02,990
simplemente se elimina inmediatamente.

16
00:01:03,000 --> 00:01:05,790
Entonces, queremos agregar una transición a eso.

17
00:01:05,790 --> 00:01:09,200
También tenemos el H-1 aquí que necesita algo de trabajo en el nuestro.

18
00:01:09,390 --> 00:01:10,920
Necesita ocupar más espacio.

19
00:01:11,130 --> 00:01:12,930
Necesitamos cambiar el color de fondo.

20
00:01:12,930 --> 00:01:14,520
Queremos cambiar la fuente.

21
00:01:14,910 --> 00:01:21,240
Necesitamos asegurarnos de que el lapso de nuestro color tenga el formato correcto, de modo que esté en su propia línea y

22
00:01:21,240 --> 00:01:22,610
sea una fuente más grande.

23
00:01:22,710 --> 00:01:25,910
También tenemos que cambiar la fuente para todo el cuerpo.

24
00:01:25,950 --> 00:01:28,020
Entonces estas son todas de la misma fuente.

25
00:01:28,080 --> 00:01:32,970
Y, por último, notará que tenemos un poco de espacio aquí mismo, entre la franja y

26
00:01:32,970 --> 00:01:37,470
el extremo del cuerpo, y en la versión de la solución no hay espacio.

27
00:01:38,030 --> 00:01:38,490
DE ACUERDO.

28
00:01:38,550 --> 00:01:41,580
Empecemos abordando primero este H-1.

29
00:01:41,990 --> 00:01:49,740
Así que vamos a ir a mi texto de sublínea e ir a la H-1 y lo primero que hará es alinear las cosas

30
00:01:49,740 --> 00:01:52,700
en el medio como puede ver en la solución.

31
00:01:52,890 --> 00:01:54,170
Las cosas están alineadas al centro.

32
00:01:54,210 --> 00:02:03,070
Entonces todo lo que tenemos que hacer es agregar texto alinear al centro y guardar y actualizar.

33
00:02:03,360 --> 00:02:06,520
Bien leve mejora.

34
00:02:06,540 --> 00:02:14,010
A continuación, cambiemos el color de fondo para que el color siga siendo azul, pero notarás que si

35
00:02:14,010 --> 00:02:17,280
actualizo la página en este momento, funciona bien.

36
00:02:17,400 --> 00:02:23,010
Pero si actualizo de nuevo y luego gano el juego o hago clic en nuevos colores.

37
00:02:23,010 --> 00:02:28,230
Vuelve a negro y eso se debe a que nuestro código de JavaScript está sobreescribiendo que

38
00:02:28,230 --> 00:02:31,970
estamos volviendo a establecer este color negruzco gris oscuro en nuestro javascript.

39
00:02:32,010 --> 00:02:37,320
Necesitamos encontrar los lugares donde lo estamos restableciendo a este color que es 2 3 2 3 2 3.

40
00:02:37,320 --> 00:02:38,040
Aquí vamos.

41
00:02:38,100 --> 00:02:40,820
Solo queremos cambiar esto para que siga siendo azul.

42
00:02:41,340 --> 00:02:44,690
Y también es cuando reinicio, comienza todavía es azul.

43
00:02:44,850 --> 00:02:45,970
Obtengo nuevos colores

44
00:02:45,990 --> 00:02:47,870
Se mantiene como azul.

45
00:02:48,360 --> 00:02:48,810
DE ACUERDO.

46
00:02:48,870 --> 00:02:49,830
Entonces eso es eso

47
00:02:49,830 --> 00:02:54,430
Ahora deshagamos todo el espacio negro a cada lado de nuestro H-1.

48
00:02:54,870 --> 00:03:02,230
Por lo tanto, en nuestro H-1 vamos a deshacernos de todos los márgenes de margen cero en la parte superior e inferior izquierda y derecha.

49
00:03:02,250 --> 00:03:04,820
Entonces fíjate qué sucede cuando hacer eso.

50
00:03:04,820 --> 00:03:10,590
Ese espacio negro se va por todos lados excepto por este pequeño espacio en la parte superior izquierda y derecha.

51
00:03:10,830 --> 00:03:14,870
Y eso no viene de o H-1 que realmente viene del cuerpo.

52
00:03:14,940 --> 00:03:19,420
Entonces, para arreglar eso, podemos ir al cuerpo y darle el margen cero.

53
00:03:19,680 --> 00:03:24,230
Y ahora presten atención a esta pequeña brecha que refrescaré y desaparecerá.

54
00:03:24,390 --> 00:03:30,040
Así que nuestra franja blanca llega hasta el lado justo como lo hace en esta versión aquí.

55
00:03:30,150 --> 00:03:30,970
DE ACUERDO.

56
00:03:31,080 --> 00:03:33,080
A continuación, centrémonos en la diversión.

57
00:03:33,450 --> 00:03:36,180
Entonces la diversión será la misma para todos nuestros elementos.

58
00:03:36,180 --> 00:03:41,690
Los botones y el H-1 y el lapso aquí son todas las mismas fuentes de pesos de fuentes ligeramente diferentes.

59
00:03:41,850 --> 00:03:46,660
Y vamos a usar solo una de las fuentes integradas que el sistema de alarde se llama Avenir.

60
00:03:46,920 --> 00:03:52,730
Así que va a ser la familia de fuentes Avenir.

61
00:03:53,430 --> 00:03:56,440
Esa es una fuente que puede no funcionar en todos los sistemas.

62
00:03:56,580 --> 00:04:03,930
Así que agregaremos otra opción, que es Mont. Serat solo así.

63
00:04:04,740 --> 00:04:10,050
Así que terminamos con esta diversión aquí que obviamente no se ve exactamente igual.

64
00:04:10,170 --> 00:04:12,460
Y eso se reduce a nuestro peso de fuente.

65
00:04:12,540 --> 00:04:16,040
Entonces tenemos que cambiar el peso de esta fuente porque es un H1.

66
00:04:16,050 --> 00:04:21,520
El valor predeterminado es hacer que sea en negrita o tener un peso de fuente de 700, 800 o incluso 900.

67
00:04:21,600 --> 00:04:24,350
Lo que queremos hacer es darle un peso de fuente normal.

68
00:04:24,420 --> 00:04:32,230
Entonces, cuando nuestro H-1 puede agregar un peso de fuente normal y guardar.

69
00:04:32,400 --> 00:04:33,400
Refrescar.

70
00:04:33,710 --> 00:04:34,700
Eso es mirar más de cerca.

71
00:04:34,700 --> 00:04:37,550
Ahora hay algunas otras cosas que necesitamos cambiar.

72
00:04:37,590 --> 00:04:44,030
de que nuestro color esté en su propia línea y que cambiemos ese tramo de forma ligeramente diferente Para hacer eso.

73
00:04:45,330 --> 00:04:52,580
El primero de ellos es que todo esto está en mayúsculas y podemos hacer eso con RCSS usando mayúsculas y minúsculas de texto

74
00:04:52,700 --> 00:04:56,510
para guardar Entonces ahora mire más de cerca y también querrá asegurarse

75
00:04:56,570 --> 00:05:00,950
Vamos a entrar aquí en nuestro equipo y de hecho vamos a editarlo un

76
00:05:00,950 --> 00:05:01,340
poco.

77
00:05:01,700 --> 00:05:04,120
Y esta es la primera forma en que vamos a hacer que esto funcione.

78
00:05:04,160 --> 00:05:09,350
Veremos otra forma de hacerlo con Pearcey SS. Pero vamos a comenzar por diseñar esto donde tenemos

79
00:05:09,350 --> 00:05:12,590
lo bueno en una línea y luego agregar un descanso.

80
00:05:12,590 --> 00:05:19,070
algunas devoluciones y algunos saltos de línea, y eso es todo lo que hace esta etiqueta es que agrega un salto de línea.

81
00:05:19,070 --> 00:05:24,080
Podemos usar la etiqueta abr y esta no es una buena idea en cuanto a estilo, pero es

82
00:05:24,080 --> 00:05:26,440
una manera rápida y fácil de empezar a agregar

83
00:05:26,620 --> 00:05:33,200
Así que queremos una después de la Gran queremos un descanso y luego nuestro lapso y luego queremos otro descanso y luego el

84
00:05:33,200 --> 00:05:37,970
juego de color en la parte inferior y si renovamos Ahora puede ver que nos estamos acercando.

85
00:05:38,060 --> 00:05:41,280
Ahora tenemos que enfocarnos en hacer que el lapso sea mucho más grande.

86
00:05:41,660 --> 00:05:44,160
Entonces, esta banda tiene una idea de visualización en color.

87
00:05:44,300 --> 00:05:49,730
Así que vamos a pasar a R C S y seleccionaremos la pantalla a color como esta.

88
00:05:49,900 --> 00:05:58,200
La pantalla del color Id y luego vamos a decir que el tamaño de la fuente es 200 por ciento del tamaño de letra H-1.

89
00:05:58,550 --> 00:06:01,860
Y si actualizamos, ahora obtenemos este tamaño de letra mucho más grande.

90
00:06:02,210 --> 00:06:03,630
Y nos estamos acercando.

91
00:06:03,680 --> 00:06:05,210
Tenemos nuestros descansos aquí.

92
00:06:05,330 --> 00:06:10,040
También notas que tenemos mucho más espacio entre las líneas que aquí.

93
00:06:10,280 --> 00:06:12,970
Entonces, hay algunas cosas que podemos hacer para trabajar en eso.

94
00:06:12,980 --> 00:06:15,780
El primero es cambiar la altura de la línea.

95
00:06:16,280 --> 00:06:21,580
Así que le daremos una altura de línea de 1. 1 y guardar.

96
00:06:22,190 --> 00:06:27,040
Echemos un vistazo a nuestra versión nuevamente y actualicémosla y se puede ver que se reduce un poco.

97
00:06:27,290 --> 00:06:30,440
Pero ahora perdimos el espacio en la parte superior e inferior.

98
00:06:30,440 --> 00:06:32,190
Necesitamos un poco de espacio allí.

99
00:06:32,210 --> 00:06:35,050
Entonces, lo que haremos es entrar y agregar algo de relleno.

100
00:06:35,450 --> 00:06:40,610
Así que vamos a agregar relleno en la parte superior e inferior, no solo en la parte izquierda y

101
00:06:40,610 --> 00:06:47,050
derecha, y queremos 20 píxeles en la parte superior e inferior para que podamos hacer eso, como este relleno de 20 píxeles y cero.

102
00:06:47,300 --> 00:06:54,980
También podríamos haber rellenado los primeros 20 píxeles y rellenando el fondo, pero esta es una forma más sencilla de

103
00:06:54,980 --> 00:06:58,590
actualizar y se puede ver que ya casi llegamos.

104
00:06:58,880 --> 00:07:00,670
Entonces nuestro encabezado se ve bien.

105
00:07:00,880 --> 00:07:05,830
Tenemos la fuente correcta, la fuente correcta, todo está en mayúsculas, el color de fondo correcto.

106
00:07:05,870 --> 00:07:11,240
Asegurémonos de que mientras juegue se mantenga bien se ve bien.

107
00:07:11,300 --> 00:07:14,800
Lo siguiente que debemos abordar son los botones en esta barra de navegación.

108
00:07:15,130 --> 00:07:18,080
Así que definitivamente tenemos un largo camino por recorrer para mejorarlos.

109
00:07:18,080 --> 00:07:23,000
Lo primero que queremos hacer es deshacernos de los bordes para no tener este borde obvio

110
00:07:23,000 --> 00:07:23,840
alrededor del botón.

111
00:07:23,870 --> 00:07:27,230
También queremos deshacernos del color de fondo.

112
00:07:27,320 --> 00:07:29,290
Entonces no debería haber ningún fondo como puede ver aquí.

113
00:07:29,330 --> 00:07:33,210
Es solo esperar hasta que pase el mouse o hasta que seleccionamos uno.

114
00:07:33,250 --> 00:07:37,790
También queremos asegurarnos de que la familia de fuentes sea la misma que aquí.

115
00:07:37,790 --> 00:07:39,230
Entonces empecemos.

116
00:07:39,230 --> 00:07:48,620
Y voy a seleccionar todos los botones para que aparezca el botón y solo diremos none y save.

117
00:07:48,800 --> 00:07:50,850
Presta atención a los botones cuando actualizo.

118
00:07:51,170 --> 00:07:51,790
DE ACUERDO.

119
00:07:51,980 --> 00:07:53,520
Entonces ahora no tenemos frontera.

120
00:07:53,720 --> 00:07:55,600
Pero todavía tenemos ese color de fondo.

121
00:07:55,850 --> 00:08:02,760
Así que ahora ese mismo fondo ninguno y guardar y actualizar y nos estamos acercando.

122
00:08:02,950 --> 00:08:04,800
Entonces ahora tenemos solo texto simple.

123
00:08:05,120 --> 00:08:09,520
Y comenzaremos haciendo todo ese texto en mayúsculas como lo tenemos aquí.

124
00:08:09,740 --> 00:08:16,330
Así que utilizamos la transformación de texto de nuevo, solo copiamos esa línea sobre la que está allí y actualizamos.

125
00:08:16,400 --> 00:08:18,840
Ahora nuestros botones están en mayúsculas.

126
00:08:18,920 --> 00:08:23,240
Lo siguiente que queremos hacer es asegurarnos de que el botón recorre todo el camino desde la parte

127
00:08:23,260 --> 00:08:25,370
superior hasta la parte inferior del contenedor div strip.

128
00:08:25,400 --> 00:08:31,580
En este momento solo ocupa una parte del espacio, así que podemos hacer eso configurando la altura en un 100 por ciento.

129
00:08:31,750 --> 00:08:37,490
Y eso significa que ocupará el 100 por ciento del elemento que lo contiene, como puede ver,

130
00:08:37,490 --> 00:08:38,900
nos acerca mucho más.

131
00:08:38,930 --> 00:08:44,870
Ahora solo necesitamos cambiar algunos colores, cambiemos el tamaño de la fuente, el peso de la fuente y luego cambiemos

132
00:08:44,870 --> 00:08:47,540
el efecto de desplazamiento que aún no hemos configurado.

133
00:08:48,010 --> 00:08:54,050
Lo siguiente que hará es hacer que la fuente espere un poco más y cambie el color para que siga

134
00:08:54,050 --> 00:08:54,980
siendo azul también.

135
00:08:55,040 --> 00:09:02,350
Entonces, el peso de la fuente hará setecientos y luego el color también seguirá siendo azul.

136
00:09:02,650 --> 00:09:05,370
Y revisemos la actualización.

137
00:09:06,020 --> 00:09:11,180
Por lo tanto, se hace un poco más antiguo y también se puede ver que el color

138
00:09:11,240 --> 00:09:14,750
ahora ha cambiado a azul, el mismo color que tenemos aquí.

139
00:09:14,760 --> 00:09:21,740
Hay un cambio realmente menor que podemos hacer, que es cambiar el espaciado entre letras para que sea un píxel.

140
00:09:21,830 --> 00:09:27,260
Y si prestas atención cuando actualizo puedes ver cosas espaciadas un poco

141
00:09:27,260 --> 00:09:28,390
entre cada letra.

142
00:09:29,090 --> 00:09:31,690
Leslie centrémonos en el tamaño de la fuente.

143
00:09:31,700 --> 00:09:33,690
Parecen un poco demasiado pequeños.

144
00:09:33,980 --> 00:09:39,340
Así que solo vamos a usar el tamaño de letra y configurarlo para que herede.

145
00:09:39,500 --> 00:09:44,750
Y si actualizo puedes ver que heredan el tamaño de fuente y no tenemos que decirlo explícitamente.

146
00:09:45,620 --> 00:09:47,120
Así que echemos un vistazo ahora.

147
00:09:47,620 --> 00:09:51,380
Una de las grandes diferencias es que actualmente están espaciados de manera diferente.

148
00:09:51,670 --> 00:09:55,490
Tan pronto como se carga la página, tenemos el espacio aquí en nuestra versión.

149
00:09:55,490 --> 00:09:59,460
Sin embargo, no tenemos ese espacio hasta que haga clic en un botón.

150
00:09:59,480 --> 00:10:08,860
Entonces, lo que tenemos que hacer es diseñar el tramo que está justo aquí y ese lapso se llama mensaje y vamos a querer ir

151
00:10:08,870 --> 00:10:14,480
y darle algunas propiedades para que ocupe ese espacio y todo lo que tenemos que

152
00:10:14,480 --> 00:10:17,220
hacer es cambiar uno propiedad en realidad.

153
00:10:17,360 --> 00:10:24,980
Así que vamos a seleccionar mostrar nuestro mensaje que es este fan y vamos a cambiar

154
00:10:24,980 --> 00:10:28,830
la propiedad de visualización para estar en línea.

155
00:10:28,830 --> 00:10:34,880
BLOQUE: Entonces, lo que hará si renuevo no notará una gran diferencia de inmediato, pero

156
00:10:34,880 --> 00:10:41,790
eso se debe a que también debemos asignarle un valor de 20 por ciento, guardarlo y actualizarlo.

157
00:10:42,230 --> 00:10:48,530
Ahora tenemos este lapso a pesar de que no tiene nada que ocupe el 20 por ciento de esta pantalla.

158
00:10:49,000 --> 00:10:52,920
Entonces eso empuja estos elementos hacia el lado que es exactamente lo que queremos.

159
00:10:53,500 --> 00:10:55,690
Echemos un vistazo y compárelos.

160
00:10:55,700 --> 00:10:56,960
Está bien, así que se ve bastante cerca.

161
00:10:56,960 --> 00:11:03,340
Ahora lo que vamos a trabajar a continuación es lograr que la clase seleccionada coincida con el color correcto y

162
00:11:03,350 --> 00:11:05,450
también tenga nuestro efecto de desplazamiento.

163
00:11:05,450 --> 00:11:10,460
Así que eso va a estar en nuestro botón y vamos a agregar el efecto de desplazamiento primero.

164
00:11:10,460 --> 00:11:15,970
Entonces todo lo que tenemos que hacer es agregar el botón Colan Huffer y vamos

165
00:11:18,920 --> 00:11:27,140
a cambiar el color de la fuente para que sea blanco y el color de fondo para que sea de color azul acero.

166
00:11:27,130 --> 00:11:31,370
Así que básicamente estamos invirtiendo los colores y guardaremos y actualizaremos.

167
00:11:31,630 --> 00:11:34,090
Ahora, mientras vuelo, puedes ver que obtengo ese efecto.

168
00:11:34,670 --> 00:11:35,550
Perfecto.

169
00:11:35,600 --> 00:11:39,920
Y nuestra clase seleccionada que tenemos se verá igual.

170
00:11:39,950 --> 00:11:42,360
Solo voy a copiar los estilos.

171
00:11:42,530 --> 00:11:45,980
No hay diferencia cuando estamos sobre algo en lugar de cuando se selecciona.

172
00:11:45,980 --> 00:11:47,260
Deberían verse igual.

173
00:11:47,420 --> 00:11:52,790
Para que pueda ver que se ve bien, vuelo y solo mientras vuelo.

174
00:11:52,850 --> 00:11:55,270
¿Tiene ese fondo azul y el color de texto blanco?

175
00:11:55,340 --> 00:11:57,410
Y cuando me muevo, se va.

176
00:11:57,680 --> 00:11:59,010
Hay una pequeña diferencia.

177
00:11:59,300 --> 00:12:04,470
Si desplace el mouse sobre los botones de solución, observe que se desvanece en ese color.

178
00:12:04,550 --> 00:12:08,390
No es solo un cambio instantáneo en mi versión.

179
00:12:08,650 --> 00:12:10,550
Simplemente se alterna al instante.

180
00:12:10,820 --> 00:12:16,440
Podemos arreglar eso usando una propiedad de transición C Ss dentro del selector de botón.

181
00:12:16,670 --> 00:12:19,720
Vamos a escribir la transición y pasarla.

182
00:12:19,720 --> 00:12:26,150
Dos argumentos son dos valores y el primero es lo que queremos hacer y, en nuestro caso, solo vamos a

183
00:12:26,140 --> 00:12:30,610
agregarlo a cada propiedad y luego el siguiente es cuánto tiempo queremos que dure.

184
00:12:30,710 --> 00:12:34,390
Así que voy a exagerar al principio con dos segundos.

185
00:12:34,390 --> 00:12:41,210
Entonces, de nuevo, la propiedad de transición es cómo podemos decirle a CSX cómo animar las transiciones entre cambios de color

186
00:12:41,210 --> 00:12:43,790
o cambios de tamaño de fuente y propiedades.

187
00:12:43,790 --> 00:12:49,730
Entonces, lo que dije aquí es que cualquier propiedad de tiempo cambia en cualquier botón que en nuestro caso

188
00:12:49,730 --> 00:12:51,900
realmente solo será de color y fondo.

189
00:12:52,070 --> 00:12:57,680
Por lo tanto, cada vez que cambie el color y cambie el color de fondo, tomará dos

190
00:12:57,680 --> 00:12:59,190
segundos y verá cuando actualizo.

191
00:12:59,420 --> 00:13:00,410
Y vuelo sobre mí.

192
00:13:00,560 --> 00:13:01,880
Oh, eso todavía no está funcionando.

193
00:13:01,900 --> 00:13:04,750
Me estoy perdiendo mi s aquí 2. 00 s.

194
00:13:04,850 --> 00:13:12,140
Y ahora, si actualizo y vuelo, tardan dos segundos en desvanecerse y cuando hago clic para agregar la clase

195
00:13:12,130 --> 00:13:17,520
seleccionada, también demora dos segundos y tardo dos segundos en desaparecer cuando me vaya.

196
00:13:17,750 --> 00:13:20,140
Entonces dos segundos definitivamente son demasiado largos.

197
00:13:20,560 --> 00:13:23,580
Creo que apunto alrededor del punto tres segundos.

198
00:13:23,750 --> 00:13:25,950
Vamos a probar eso.

199
00:13:25,970 --> 00:13:26,630
Aquí vamos.

200
00:13:26,650 --> 00:13:28,990
Se ve bastante bien para mí.

201
00:13:29,060 --> 00:13:35,570
Lo último importante es obtener las esquinas redondeadas en estos cuadrados de la misma manera que obtenemos esas esquinas

202
00:13:35,570 --> 00:13:38,550
redondeadas usando una propiedad llamada Radio de borde.

203
00:13:38,690 --> 00:13:41,990
Así que tengo los documentos medianos abiertos si quieres echar un vistazo.

204
00:13:42,130 --> 00:13:42,970
Es una buena lectura.

205
00:13:43,100 --> 00:13:46,760
Pero te muestran algunos ejemplos de las diferentes cosas que puedes hacer con board a radius.

206
00:13:46,900 --> 00:13:52,000
Entonces, lo que vamos a hacer es darle un ligero radio de borde y estos son cuadrados aquí.

207
00:13:52,150 --> 00:13:54,340
Echemos un vistazo a lo que estamos buscando.

208
00:13:54,350 --> 00:13:56,140
Entonces eso es lo que queremos obtener.

209
00:13:56,180 --> 00:13:58,810
Entonces, era una ligera ligera curva.

210
00:13:59,500 --> 00:14:06,740
Vayamos a nuestra clase cuadrada y le asignamos un radio de borde y hagamos algo realmente exagerado para comenzar. Le

211
00:14:06,740 --> 00:14:10,130
mostraré lo que sucede si hacemos un 50 por ciento.

212
00:14:10,490 --> 00:14:13,850
Obtenemos círculos y es posible que prefiera usar círculos.

213
00:14:13,850 --> 00:14:20,230
Estaba considerando usarlos, pero al final preferí estos cuadrados de esquina redondeados y el número que

214
00:14:20,240 --> 00:14:22,780
utilicé fue del 15 por ciento.

215
00:14:23,510 --> 00:14:25,590
Y solo comprobaremos y compararemos esos.

216
00:14:25,850 --> 00:14:27,060
OK para que se vea bien.

217
00:14:27,080 --> 00:14:32,900
Quince por ciento, pero si quisieras, te mostraré lo que sucede si hiciéramos algo así como un 5 por

218
00:14:32,890 --> 00:14:33,770
ciento y refrescáramos.

219
00:14:34,010 --> 00:14:36,160
Obtenemos esquinas muy ligeramente redondeadas.

220
00:14:36,290 --> 00:14:43,430
Así que volveré a mi 15 actualización y ahora tenemos nuestras esquinas redondeadas, pero también tenemos que trabajar para obtener

221
00:14:43,420 --> 00:14:47,810
el efecto de animación, porque cuando hago clic en uno de estos.

222
00:14:47,810 --> 00:14:54,740
Observe cómo cuando el color cambia se desvanece al igual que el efecto de desplazamiento se desvaneció dentro y fuera.

223
00:14:54,740 --> 00:14:59,920
Para lograr eso, también necesitamos usar la propiedad de transición, pero de una manera ligeramente diferente.

224
00:14:59,990 --> 00:15:06,170
a ir a la casilla y lo único que queremos hacer es el color de fondo o simplemente el fondo.

225
00:15:06,160 --> 00:15:07,170
Así que voy

226
00:15:07,220 --> 00:15:12,470
Y nuevamente, hagamos un largo tiempo como 2. 0 segundos y vea cómo se ve eso.

227
00:15:12,500 --> 00:15:16,160
Así que lo actualizaré y haré clic en uno de estos.

228
00:15:16,250 --> 00:15:19,710
Puedes ver que tardan dos segundos en desaparecer.

229
00:15:19,940 --> 00:15:21,940
Entonces no queremos que algo dure tanto.

230
00:15:22,120 --> 00:15:26,290
Probablemente vaya por cero punto seis tal vez.

231
00:15:26,750 --> 00:15:27,970
Probemos eso.

232
00:15:28,420 --> 00:15:28,850
DE ACUERDO.

233
00:15:28,850 --> 00:15:31,610
Eso parece razonable.

234
00:15:32,500 --> 00:15:36,680
Para que pueda ver cada vez que ese fondo cambia, toma 0. 6 segundos.

235
00:15:36,670 --> 00:15:42,460
Sin embargo, lo que es diferente es que cuando otras propiedades cambian no las anima como nuestros botones, donde

236
00:15:42,560 --> 00:15:46,710
dijimos que cuando cualquier propiedad cambia debería tomar un punto de tres segundos.

237
00:15:46,900 --> 00:15:49,790
Solo apuntamos a los antecedentes y eso cambia.

238
00:15:49,810 --> 00:15:52,450
Debería tomar 0. 6 segundos.

239
00:15:52,490 --> 00:15:58,010
Una cosa menor que queremos tener en cuenta es que la propiedad de transición no funcionará en todos los navegadores de la

240
00:15:58,040 --> 00:16:02,140
forma en que lo tenemos escrito ahora para que sea lo más amigable posible para el navegador.

241
00:16:02,140 --> 00:16:07,770
De hecho, necesitamos agregar dos propiedades más que no notaremos ninguna diferencia en la funcionalidad, pero

242
00:16:08,600 --> 00:16:10,650
solo hay compatibilidad con el navegador.

243
00:16:10,660 --> 00:16:19,460
Así que la primera es la transición de Web Kit Dasch y simplemente agregaremos el mismo valor exacto

244
00:16:19,460 --> 00:16:20,250
aquí así.

245
00:16:20,360 --> 00:16:26,550
Y luego necesitamos otro, que es este debería ser un tablero Moz M. Ozy.

246
00:16:26,600 --> 00:16:30,070
Entonces estos son en realidad prefijos del navegador.

247
00:16:30,230 --> 00:16:36,020
Así que Web Kit es para Web Kit, que es un motor que usan los navegadores como Safari.

248
00:16:36,200 --> 00:16:41,700
Y luego tenemos Moz y Mozy, que es de forma corta, es Zilah, que es sobre lo que Firefox está basado.

249
00:16:42,050 --> 00:16:47,300
Así que estos son solo para agregar más soporte porque la propiedad de transición aún no está

250
00:16:47,300 --> 00:16:48,650
integrada en cada navegador.

251
00:16:48,640 --> 00:16:49,790
Entonces refrescamos.

252
00:16:50,060 --> 00:16:51,850
Nada debería parecer diferente.

253
00:16:51,860 --> 00:16:56,660
Nuestro juego todavía funciona de la misma manera y todavía obtenemos la misma

254
00:16:56,870 --> 00:17:05,210
animación y deberíamos hacer lo mismo aquí cuando hayamos hecho la transición, solo dupliquemos esto y cambiemos eso para que sea transitorio

255
00:17:05,200 --> 00:17:08,660
y la transición a 0. 3 segundos para la transición MOOC.

256
00:17:08,650 --> 00:17:15,040
cosa que podemos arreglar aquí es el espacio entre la franja y el inicio de nuestra grilla.

257
00:17:15,050 --> 00:17:15,630
Una última

258
00:17:15,800 --> 00:17:18,950
Así que pueden ver que tenemos más espacio aquí que no tenemos aquí.

259
00:17:19,150 --> 00:17:25,740
Y ahora si inspeccionamos tenemos un elemento que está alrededor de nuestra grilla.

260
00:17:26,140 --> 00:17:34,210
Tenemos nuestros cuadrados y tenemos un contenedor de identificación div y ese contenedor div va alrededor de los 6 cuadrados.

261
00:17:34,390 --> 00:17:40,400
Para que podamos usar eso y simplemente agregar un poco de espacio a ese contenedor div, solo agregaremos un margen en

262
00:17:40,390 --> 00:17:41,950
la parte superior e inferior.

263
00:17:42,110 --> 00:17:44,540
Así que creo que ya lo hemos diseñado un poco.

264
00:17:44,540 --> 00:17:45,550
Aquí vamos.

265
00:17:45,590 --> 00:17:47,510
Entonces dijimos que el margen es cero.

266
00:17:47,650 --> 00:17:54,770
Y lo que vamos a hacer automáticamente es decir que el margen es 20 píxeles en la parte superior e inferior y automático en la

267
00:17:54,770 --> 00:17:57,020
izquierda y derecha, que es cómo está centrado.

268
00:17:57,050 --> 00:18:01,820
Así que queremos que sea automático a la izquierda y a la derecha, pero 20 píxeles en la parte superior de actualización.

269
00:18:02,330 --> 00:18:03,590
Tenemos nuestro espacio.

270
00:18:04,120 --> 00:18:05,940
De acuerdo, hemos terminado con el diseño por ahora.