De acuerdo, bienvenido.
En este video, vamos a trabajar en el diseño de nuestro sitio en este momento.
Definitivamente no está cerca de cómo se supone que debe verse al final.
Así que vamos a compararlos uno al lado del otro.
Aquí está el nuestro aquí.
Entonces, algunos de los grandes cambios que necesitamos para redondear las esquinas agregan espacio entre los primeros.
Cambiando el estilo de los botones aquí.
un efecto de desplazamiento, nuestros botones son definitivamente horribles y no tenemos ningún efecto de desplazamiento sobre ellos.
Entonces, estos botones realmente no parecen botones hasta que pasas el cursor sobre ellos y obtenemos
También la posición de ellos es un poco incorrecta.
Como puede ver, si adivino aquí, recibo texto, pero si estuviera fresco, ese espacio tecnológico ya está ocupado, en comparación
con nuestra versión, si creo que el texto empuja todo a los lados.
También hay una animación aquí.
Entonces, cuando hago clic noto cómo se desvanecen lentamente en la nuestra cuando hacemos clic bien si hago clic en uno incorrecto,
simplemente se elimina inmediatamente.
Entonces, queremos agregar una transición a eso.
También tenemos el H-1 aquí que necesita algo de trabajo en el nuestro.
Necesita ocupar más espacio.
Necesitamos cambiar el color de fondo.
Queremos cambiar la fuente.
Necesitamos asegurarnos de que el lapso de nuestro color tenga el formato correcto, de modo que esté en su propia línea y
sea una fuente más grande.
También tenemos que cambiar la fuente para todo el cuerpo.
Entonces estas son todas de la misma fuente.
Y, por último, notará que tenemos un poco de espacio aquí mismo, entre la franja y
el extremo del cuerpo, y en la versión de la solución no hay espacio.
DE ACUERDO.
Empecemos abordando primero este H-1.
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
en el medio como puede ver en la solución.
Las cosas están alineadas al centro.
Entonces todo lo que tenemos que hacer es agregar texto alinear al centro y guardar y actualizar.
Bien leve mejora.
A continuación, cambiemos el color de fondo para que el color siga siendo azul, pero notarás que si
actualizo la página en este momento, funciona bien.
Pero si actualizo de nuevo y luego gano el juego o hago clic en nuevos colores.
Vuelve a negro y eso se debe a que nuestro código de JavaScript está sobreescribiendo que
estamos volviendo a establecer este color negruzco gris oscuro en nuestro javascript.
Necesitamos encontrar los lugares donde lo estamos restableciendo a este color que es 2 3 2 3 2 3.
Aquí vamos.
Solo queremos cambiar esto para que siga siendo azul.
Y también es cuando reinicio, comienza todavía es azul.
Obtengo nuevos colores
Se mantiene como azul.
DE ACUERDO.
Entonces eso es eso
Ahora deshagamos todo el espacio negro a cada lado de nuestro H-1.
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.
Entonces fíjate qué sucede cuando hacer eso.
Ese espacio negro se va por todos lados excepto por este pequeño espacio en la parte superior izquierda y derecha.
Y eso no viene de o H-1 que realmente viene del cuerpo.
Entonces, para arreglar eso, podemos ir al cuerpo y darle el margen cero.
Y ahora presten atención a esta pequeña brecha que refrescaré y desaparecerá.
Así que nuestra franja blanca llega hasta el lado justo como lo hace en esta versión aquí.
DE ACUERDO.
A continuación, centrémonos en la diversión.
Entonces la diversión será la misma para todos nuestros elementos.
Los botones y el H-1 y el lapso aquí son todas las mismas fuentes de pesos de fuentes ligeramente diferentes.
Y vamos a usar solo una de las fuentes integradas que el sistema de alarde se llama Avenir.
Así que va a ser la familia de fuentes Avenir.
Esa es una fuente que puede no funcionar en todos los sistemas.
Así que agregaremos otra opción, que es Mont. Serat solo así.
Así que terminamos con esta diversión aquí que obviamente no se ve exactamente igual.
Y eso se reduce a nuestro peso de fuente.
Entonces tenemos que cambiar el peso de esta fuente porque es un H1.
El valor predeterminado es hacer que sea en negrita o tener un peso de fuente de 700, 800 o incluso 900.
Lo que queremos hacer es darle un peso de fuente normal.
Entonces, cuando nuestro H-1 puede agregar un peso de fuente normal y guardar.
Refrescar.
Eso es mirar más de cerca.
Ahora hay algunas otras cosas que necesitamos cambiar.
de que nuestro color esté en su propia línea y que cambiemos ese tramo de forma ligeramente diferente Para hacer eso.
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
para guardar Entonces ahora mire más de cerca y también querrá asegurarse
Vamos a entrar aquí en nuestro equipo y de hecho vamos a editarlo un
poco.
Y esta es la primera forma en que vamos a hacer que esto funcione.
Veremos otra forma de hacerlo con Pearcey SS. Pero vamos a comenzar por diseñar esto donde tenemos
lo bueno en una línea y luego agregar un descanso.
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.
Podemos usar la etiqueta abr y esta no es una buena idea en cuanto a estilo, pero es
una manera rápida y fácil de empezar a agregar
Así que queremos una después de la Gran queremos un descanso y luego nuestro lapso y luego queremos otro descanso y luego el
juego de color en la parte inferior y si renovamos Ahora puede ver que nos estamos acercando.
Ahora tenemos que enfocarnos en hacer que el lapso sea mucho más grande.
Entonces, esta banda tiene una idea de visualización en color.
Así que vamos a pasar a R C S y seleccionaremos la pantalla a color como esta.
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.
Y si actualizamos, ahora obtenemos este tamaño de letra mucho más grande.
Y nos estamos acercando.
Tenemos nuestros descansos aquí.
También notas que tenemos mucho más espacio entre las líneas que aquí.
Entonces, hay algunas cosas que podemos hacer para trabajar en eso.
El primero es cambiar la altura de la línea.
Así que le daremos una altura de línea de 1. 1 y guardar.
Echemos un vistazo a nuestra versión nuevamente y actualicémosla y se puede ver que se reduce un poco.
Pero ahora perdimos el espacio en la parte superior e inferior.
Necesitamos un poco de espacio allí.
Entonces, lo que haremos es entrar y agregar algo de relleno.
Así que vamos a agregar relleno en la parte superior e inferior, no solo en la parte izquierda y
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.
También podríamos haber rellenado los primeros 20 píxeles y rellenando el fondo, pero esta es una forma más sencilla de
actualizar y se puede ver que ya casi llegamos.
Entonces nuestro encabezado se ve bien.
Tenemos la fuente correcta, la fuente correcta, todo está en mayúsculas, el color de fondo correcto.
Asegurémonos de que mientras juegue se mantenga bien se ve bien.
Lo siguiente que debemos abordar son los botones en esta barra de navegación.
Así que definitivamente tenemos un largo camino por recorrer para mejorarlos.
Lo primero que queremos hacer es deshacernos de los bordes para no tener este borde obvio
alrededor del botón.
También queremos deshacernos del color de fondo.
Entonces no debería haber ningún fondo como puede ver aquí.
Es solo esperar hasta que pase el mouse o hasta que seleccionamos uno.
También queremos asegurarnos de que la familia de fuentes sea la misma que aquí.
Entonces empecemos.
Y voy a seleccionar todos los botones para que aparezca el botón y solo diremos none y save.
Presta atención a los botones cuando actualizo.
DE ACUERDO.
Entonces ahora no tenemos frontera.
Pero todavía tenemos ese color de fondo.
Así que ahora ese mismo fondo ninguno y guardar y actualizar y nos estamos acercando.
Entonces ahora tenemos solo texto simple.
Y comenzaremos haciendo todo ese texto en mayúsculas como lo tenemos aquí.
Así que utilizamos la transformación de texto de nuevo, solo copiamos esa línea sobre la que está allí y actualizamos.
Ahora nuestros botones están en mayúsculas.
Lo siguiente que queremos hacer es asegurarnos de que el botón recorre todo el camino desde la parte
superior hasta la parte inferior del contenedor div strip.
En este momento solo ocupa una parte del espacio, así que podemos hacer eso configurando la altura en un 100 por ciento.
Y eso significa que ocupará el 100 por ciento del elemento que lo contiene, como puede ver,
nos acerca mucho más.
Ahora solo necesitamos cambiar algunos colores, cambiemos el tamaño de la fuente, el peso de la fuente y luego cambiemos
el efecto de desplazamiento que aún no hemos configurado.
Lo siguiente que hará es hacer que la fuente espere un poco más y cambie el color para que siga
siendo azul también.
Entonces, el peso de la fuente hará setecientos y luego el color también seguirá siendo azul.
Y revisemos la actualización.
Por lo tanto, se hace un poco más antiguo y también se puede ver que el color
ahora ha cambiado a azul, el mismo color que tenemos aquí.
Hay un cambio realmente menor que podemos hacer, que es cambiar el espaciado entre letras para que sea un píxel.
Y si prestas atención cuando actualizo puedes ver cosas espaciadas un poco
entre cada letra.
Leslie centrémonos en el tamaño de la fuente.
Parecen un poco demasiado pequeños.
Así que solo vamos a usar el tamaño de letra y configurarlo para que herede.
Y si actualizo puedes ver que heredan el tamaño de fuente y no tenemos que decirlo explícitamente.
Así que echemos un vistazo ahora.
Una de las grandes diferencias es que actualmente están espaciados de manera diferente.
Tan pronto como se carga la página, tenemos el espacio aquí en nuestra versión.
Sin embargo, no tenemos ese espacio hasta que haga clic en un botón.
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
y darle algunas propiedades para que ocupe ese espacio y todo lo que tenemos que
hacer es cambiar uno propiedad en realidad.
Así que vamos a seleccionar mostrar nuestro mensaje que es este fan y vamos a cambiar
la propiedad de visualización para estar en línea.
BLOQUE: Entonces, lo que hará si renuevo no notará una gran diferencia de inmediato, pero
eso se debe a que también debemos asignarle un valor de 20 por ciento, guardarlo y actualizarlo.
Ahora tenemos este lapso a pesar de que no tiene nada que ocupe el 20 por ciento de esta pantalla.
Entonces eso empuja estos elementos hacia el lado que es exactamente lo que queremos.
Echemos un vistazo y compárelos.
Está bien, así que se ve bastante cerca.
Ahora lo que vamos a trabajar a continuación es lograr que la clase seleccionada coincida con el color correcto y
también tenga nuestro efecto de desplazamiento.
Así que eso va a estar en nuestro botón y vamos a agregar el efecto de desplazamiento primero.
Entonces todo lo que tenemos que hacer es agregar el botón Colan Huffer y vamos
a cambiar el color de la fuente para que sea blanco y el color de fondo para que sea de color azul acero.
Así que básicamente estamos invirtiendo los colores y guardaremos y actualizaremos.
Ahora, mientras vuelo, puedes ver que obtengo ese efecto.
Perfecto.
Y nuestra clase seleccionada que tenemos se verá igual.
Solo voy a copiar los estilos.
No hay diferencia cuando estamos sobre algo en lugar de cuando se selecciona.
Deberían verse igual.
Para que pueda ver que se ve bien, vuelo y solo mientras vuelo.
¿Tiene ese fondo azul y el color de texto blanco?
Y cuando me muevo, se va.
Hay una pequeña diferencia.
Si desplace el mouse sobre los botones de solución, observe que se desvanece en ese color.
No es solo un cambio instantáneo en mi versión.
Simplemente se alterna al instante.
Podemos arreglar eso usando una propiedad de transición C Ss dentro del selector de botón.
Vamos a escribir la transición y pasarla.
Dos argumentos son dos valores y el primero es lo que queremos hacer y, en nuestro caso, solo vamos a
agregarlo a cada propiedad y luego el siguiente es cuánto tiempo queremos que dure.
Así que voy a exagerar al principio con dos segundos.
Entonces, de nuevo, la propiedad de transición es cómo podemos decirle a CSX cómo animar las transiciones entre cambios de color
o cambios de tamaño de fuente y propiedades.
Entonces, lo que dije aquí es que cualquier propiedad de tiempo cambia en cualquier botón que en nuestro caso
realmente solo será de color y fondo.
Por lo tanto, cada vez que cambie el color y cambie el color de fondo, tomará dos
segundos y verá cuando actualizo.
Y vuelo sobre mí.
Oh, eso todavía no está funcionando.
Me estoy perdiendo mi s aquí 2. 00 s.
Y ahora, si actualizo y vuelo, tardan dos segundos en desvanecerse y cuando hago clic para agregar la clase
seleccionada, también demora dos segundos y tardo dos segundos en desaparecer cuando me vaya.
Entonces dos segundos definitivamente son demasiado largos.
Creo que apunto alrededor del punto tres segundos.
Vamos a probar eso.
Aquí vamos.
Se ve bastante bien para mí.
Lo último importante es obtener las esquinas redondeadas en estos cuadrados de la misma manera que obtenemos esas esquinas
redondeadas usando una propiedad llamada Radio de borde.
Así que tengo los documentos medianos abiertos si quieres echar un vistazo.
Es una buena lectura.
Pero te muestran algunos ejemplos de las diferentes cosas que puedes hacer con board a radius.
Entonces, lo que vamos a hacer es darle un ligero radio de borde y estos son cuadrados aquí.
Echemos un vistazo a lo que estamos buscando.
Entonces eso es lo que queremos obtener.
Entonces, era una ligera ligera curva.
Vayamos a nuestra clase cuadrada y le asignamos un radio de borde y hagamos algo realmente exagerado para comenzar. Le
mostraré lo que sucede si hacemos un 50 por ciento.
Obtenemos círculos y es posible que prefiera usar círculos.
Estaba considerando usarlos, pero al final preferí estos cuadrados de esquina redondeados y el número que
utilicé fue del 15 por ciento.
Y solo comprobaremos y compararemos esos.
OK para que se vea bien.
Quince por ciento, pero si quisieras, te mostraré lo que sucede si hiciéramos algo así como un 5 por
ciento y refrescáramos.
Obtenemos esquinas muy ligeramente redondeadas.
Así que volveré a mi 15 actualización y ahora tenemos nuestras esquinas redondeadas, pero también tenemos que trabajar para obtener
el efecto de animación, porque cuando hago clic en uno de estos.
Observe cómo cuando el color cambia se desvanece al igual que el efecto de desplazamiento se desvaneció dentro y fuera.
Para lograr eso, también necesitamos usar la propiedad de transición, pero de una manera ligeramente diferente.
a ir a la casilla y lo único que queremos hacer es el color de fondo o simplemente el fondo.
Así que voy
Y nuevamente, hagamos un largo tiempo como 2. 0 segundos y vea cómo se ve eso.
Así que lo actualizaré y haré clic en uno de estos.
Puedes ver que tardan dos segundos en desaparecer.
Entonces no queremos que algo dure tanto.
Probablemente vaya por cero punto seis tal vez.
Probemos eso.
DE ACUERDO.
Eso parece razonable.
Para que pueda ver cada vez que ese fondo cambia, toma 0. 6 segundos.
Sin embargo, lo que es diferente es que cuando otras propiedades cambian no las anima como nuestros botones, donde
dijimos que cuando cualquier propiedad cambia debería tomar un punto de tres segundos.
Solo apuntamos a los antecedentes y eso cambia.
Debería tomar 0. 6 segundos.
Una cosa menor que queremos tener en cuenta es que la propiedad de transición no funcionará en todos los navegadores de la
forma en que lo tenemos escrito ahora para que sea lo más amigable posible para el navegador.
De hecho, necesitamos agregar dos propiedades más que no notaremos ninguna diferencia en la funcionalidad, pero
solo hay compatibilidad con el navegador.
Así que la primera es la transición de Web Kit Dasch y simplemente agregaremos el mismo valor exacto
aquí así.
Y luego necesitamos otro, que es este debería ser un tablero Moz M. Ozy.
Entonces estos son en realidad prefijos del navegador.
Así que Web Kit es para Web Kit, que es un motor que usan los navegadores como Safari.
Y luego tenemos Moz y Mozy, que es de forma corta, es Zilah, que es sobre lo que Firefox está basado.
Así que estos son solo para agregar más soporte porque la propiedad de transición aún no está
integrada en cada navegador.
Entonces refrescamos.
Nada debería parecer diferente.
Nuestro juego todavía funciona de la misma manera y todavía obtenemos la misma
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
y la transición a 0. 3 segundos para la transición MOOC.
cosa que podemos arreglar aquí es el espacio entre la franja y el inicio de nuestra grilla.
Una última
Así que pueden ver que tenemos más espacio aquí que no tenemos aquí.
Y ahora si inspeccionamos tenemos un elemento que está alrededor de nuestra grilla.
Tenemos nuestros cuadrados y tenemos un contenedor de identificación div y ese contenedor div va alrededor de los 6 cuadrados.
Para que podamos usar eso y simplemente agregar un poco de espacio a ese contenedor div, solo agregaremos un margen en
la parte superior e inferior.
Así que creo que ya lo hemos diseñado un poco.
Aquí vamos.
Entonces dijimos que el margen es cero.
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
izquierda y derecha, que es cómo está centrado.
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.
Tenemos nuestro espacio.
De acuerdo, hemos terminado con el diseño por ahora.