En esto íbamos a comenzar escribiría un poco de CSS para nuestra aplicación que no se vea de esta forma
parece de página web de los noventas.
Vamos a comenzar a escribir un poco de CSS para que se vea mejor.
La idea es terminar todo lo que es el fondo y esta parte amarilla junto a esta sombra que está aquí.
Y para ello lo primero que vamos a hacer es mostrarte bueno mostrar el boxing.
Esta es una técnica recomendada por estas personas para Leiris.
él trabaja con Google Chrome es de las personas que está siempre agregando nuevas cosas en Google Chrome
y recomienda utilizar el book 6.
De esta forma.
Por eso lo he utilizado a lo largo del curso más que nada lo que es el box.
De esta forma nos va a permitir que si agregas un pad indicamos qué un elemento le defines 200 píxeles
pero le agregas un par de 50 pixeles el elemento nos queda de 200 píxeles queda 250.
Entonces esta técnica eso es lo que hace que si agregas un widget 200 y le agregas un par de 100 el
elemento se mantenga de 200.
Eso es lo que hace este código por eso lo vamos a agregar es una red que comparte lo voy a cerrar ya
esta parte y lo siguiente que voy a hacer es colocar un body.
Vamos a colocar el color de fondo background color y el que va a ponerse 2 1 8 5 ve entonces guardamos
cambios abrimos el proyecto y aparece el color de fondo.
Ahora la idea de este proyecto es comenzar a utilizar ya las técnicas más modernas utilizar Grille donde
sea posible utilizar Flex Books o utilizar la nueva sintaxis de JavaScript y también es buena idea utilizar
la sintaxis de CSS.
Vamos a utilizar lo que se conoce como custom properties.
Para este proyecto custom Property es muy similar a las variables que vas a encontrar en tecnologías
como zas zas.
La ventaja que tiene una de muchas es que te permite crear variables.
La ventaja de crear una variable utilizando custom properties es que si por ejemplo utilizas este color
en 30 o 40 elementos de tu sitio web si el cliente decide cambiarlo si tú decides cambiarlo tienes que
hacer el cambio 40 veces utilizando custom Property solamente haces el cambio en lo que es el Custom
Property y puede sonar complicado pero créeme que no lo es.
Lo primero es que aquí arriba tienes que colocar un elemento que se llame Root.
De esa forma se almacenan las variables en el root y esquiva ponerle un nombre.
Los nombres de las propiedades siempre inician con dos guiones.
Vamos a ponerle aquí colores como un color rosa pero podrías nombrarlo rosado o también yo recomiendo
que por ejemplo pongas como primario por ejemplo primario y después le das el valor que vendría siendo
éste lo pegas aquí.
Ahora cómo utilizas esto ya crea lo que viene siendo el Custom property en root y almacena esta variable
aquí.
Ahora para acceder a esto aquí colocas bar Yongbyon y luego el nombre de lo que viene siendo la variable
y recargas aquí y puedes ver que continúa funcionando.
La ventaja de esto de nueva cuenta es que una vez que utilices estas variables múltiples veces solamente
haces un cambio aquí y se va a propagar en todos los electores en los que hayas hecho ese cambio.
Me gusta mucho utilizar custom properties no tienen soporte al 100 por ciento pero más adelante veremos
cómo hacerlo es una buena técnica y no digo que aprender sea malo pero si solamente querías aprender
Saz por las variables pues puedes utilizar custom properties.
Segundo color que vamos a crear es uno que se va a llamar secundario
Yongbyon secundario que vendría siendo el color amarillo que predomina en el diseño pues es el que está
aquí hasta aquí abajo también y cuando das criquet en editar este botón también tiene ese color.
Por lo tanto lo vamos a estar utilizando como color primario y secundario.
Este va a tener un valor de FFs unos 107 son colores que yo ya elegí ya tengo los valores desde un programa
entonces se lo vamos a utilizar en lo que viene siendo Index tenemos este gran amarillo y lo voy a utilizar
una vez aquí va gran amarillo y de esta forma este gran amarillo lo podemos utilizar muchas veces a
lo largo de nuestro nuestro proyecto también lo puedes poner como Bagram primario.
Si deseas casa lo voy a dejar así de nueva cuenta a un color y va a tener bar secundario y guardamos
cambios y abrimos nuevamente el proyecto y aparece el color amarillo entonces se va viendo bastante
bien lossiguientes que va a crear un contenedor para lo que viene siendo para centrar todo nuestro nuestro
texto nuestros elementos y vamos a utilizar Flex Book Sigfrid.
Pero la parte central un elemento sigue siendo más fácil con Margin Cervatos.
Si recuerdas aquí se llama contenedor y voy a colocar aquí punto contenedor iba a colocarlo en Max width
de mil 100 píxeles y un margen cero auto para que lo centre mucho más sencillo que centrarlo con Flags
Box en mi opinión lo siguiente puedes ver que el diseño final tiene una pequeña sombra aquí pequeño
sombreado la forma más fácil de hacerlo es utilizando CIESAS Matic en mi opinión si ese es puntocom
aquí vas a encontrar Boggiano generador de boqueadas este va a tener una parte más visual de generarlo
por ejemplo el horizontal lo puedes mover y decidir hacia dónde se mueve qué lo va a poner como ser
o para qué quede centrado horizontalmente y el vertical de arriba y hacia abajo para tener una sombra
muy ligera lo que viene siendo nuestro nuestro elemento aquí en el blog también lo va a poner muy poco
un poco más abajo entonces la ventaja que tiene esto es que lo puedes ver cómo va quedando yo creo que
ahí se ve bastante bien y lo que viene siendo la opacidad también te permite lo que es qué tan oscuras
la sombra más o menos así lo va a dejar copiarlo y copias todo este código.
Y si recuerdas creamos una clase que se llama sombra pues de esa forma podemos reutilizarla mucho a
lo largo del proyecto sombra y pegamos lo que es ese código que nos ha generado ese es Matic si guardas
cambios y recargas pues el que aparece una pequeña sombra aquí tal vez que quisieras hacer un poco más
más grande lo que el vertical y digamos aquí de 5 puedes copiar nuevamente y reemplazar tu código y
que quede hasta que quede como tú deseas que quedaba mejor de otra forma y creo que así queda mucho
mejor.
Estos son algunas herramientas que puedes utilizar para hacerlo más sencillo aparte de generar efectos
como estos que estamos viendo como sables algunos estilos al formulario ambos formularios como añadir
contacto y como editar tienen el mismo diseño entonces podemos seleccionar únicamente por el formulario
si formulario
formulario y a seleccionar.
Voy a darle un Padín de tres RAAM tres frames mucho más que tres píxeles que lo vas a entrar un poco
mejor que no quede el contenido como tal a la orilla y también margen top de 2 Reem 2 Efren para que
tenga separación entre lo que es la barra esta parte de aquí y el formulario es un poco de separación
nada más.
La siguiente va a ser el selector del leyen puedes ver que tenemos esta parte dañada en contacto y todos
los campos son obligatorios para eso requiero puede ser que la fuente es diferente.
Vamos a utilizar una fuente de Google Fonts me gusta mucho Google Fonts porque tienen más gran cantidad
de fuentes todas son gratis libres de derecho y por ejemplo si tienes un texto como éste que dices añada
un contacto puedes seleccionar el texto y ponerla que añada un contacto e ir viendo con qué fuentes
quieres que tu diseño se ve mucho mejor.
Yo tengo elegida una fuente se llama Poppins Poppins y es esta fuente nada más das click en este sino
además agrega tu colección te va a permitiria desde aquí tener un código voy a copiar este código el
link y lo vamos a colocar en Leger entonces después de fondos voy a colocar ese código de Poppins y
después aquí abajo viene el código para utilizarlo de nueva cuenta hasta el punto CCC y aquí arriba
puedes colocar una fuente a como fuente sería fuentes secundarias porque vamos a utilizar otra fuente
como primaria que vendría siendo Arial muy fea del área.
Pero la idea es que no tenga esa fuente tan esta que está aquí no me gusta ponerle Arial helvética y
sans serif.
De esta forma entonces lo que viene siendo en el body voy a utilizar esa fuente colocarla aquí en Font
Family enervar fuente primaria y eso va todas las fuentes de nuestro diseño a utilizar Arial y vamos
a darle estilo a lo que es el leyen de nueva cuenta.
Volvemos a esa parte me colocar aquí foram leyendo todos los leyendo van a tener la misma fuente que
ponemos font family Bar y vamos a utilizar fuente secundaria que vendría siendo la fuente de Google
Fonts cambio recargamos y ya cambia un poco esta fuente que está aquí ahora.
Lo primero que voy a hacer es darle estilos a los que viene siendo añado en contacto después todos los
campos son obligatorios eso es el spam por lo tanto aquí va a colocar 6 2 Reem para hacerla más grande.
Lo que está aquí también lo voy a centrar Text Line.
Va a ser Center entonces lo centra el texto y puedes ver que todos los campos son obligatorios están
un salto de línea y este más pequeño podría ser aquí y agregarle a lo que viene haciendo el Index un
break tiene esta parte.
Br.
Te daría el mismo efecto de salto de línea pero puedes también hacerlo por medio de CSS algo similar
son leyen y eso es pan para no hacer un selector tan grande voy a colocar aquí leyen Span podríamos
darle también una clase todas las formas son correctas Foncillas va a ser una fuente mas pequeña de
un Reem un margen top de 10 pixeles.
También podría ser un green para que tenga un poco de separación en cualquiera de los dos números también
un pixel o REMS y para tener el salto de línea vas a poner un clip bought y los Spahn tienen un tipo
de mostrarse inline inline.
En este caso quiere decir que se va a colocar así junto con el otro lo vamos a cambiar por Display Block.
De esa forma nos garantizamos que tome todo el espacio y con el Clear Boot estos dos juntos.
El elemento siempre va a estar debajo del leyen sumáramos cambios recargamos y pensar que tenemos el
mismo resultado que si hubiéramos utilizado un break tenemos añado en contacto y todos los campos son
obligatorios para mencionarles a la persona que tienes que llenarlos todos sabiendo bastante bien el
proyecto.
Lo último que quiero hacer es la parte de aquí arriba que hice agenda de contactos pues ver que les
falta un poco a la nuestra nos hará un poco de scroll hacia arriba y aquí vamos a colocar primero a
colocar un H1 y H2 todos los jedis 1 y 2 que tengamos van a utilizar la fuente de Google Photos from
family bar nuevamente fuentes secundarias de Google Fonts y después vamos a poner un texto Layne Center
y los H1 y los HD2 siempre tienen un margen tenemos margen cero porque no los quiero tener y más abajo
voy a colocar contenedor barra
y en este caso vamos a crear otro tercer color que va a ser primario oscuro y que iba a colocar a colocar
como RGB 156 10 69.
También puedes colocar declarar a los colores los colores de esta forma este RGB más que nada viene
porque si inspeccionada aquí en Google Crom digamos el body y haz click aquí.
Aquí puedes seleccionar si va a ser como RGB a como HCl o como hexadecimal entonces es el valor de ahí
lo obtuve en realidad no sé si vamos a volver un poco el contenedor barra va a tener un background color
Bar y va utilizar primario oscuro guardamos cambios si recargamos vemos que aparece la barra de esta
forma se centra nuestro texto aquí tengo la H1 la aplica algunos estilos pero voy a crear nuevamente
la H1 para asi con los estilos que van a ser propios del H1 de otros estilos que comparte con el Jenin
2 apenas un par de 20 pixeles y el color del texto va a ser blanco.
No pongo el blanco como un color de variables porque Blanco solamente hay uno que lo voy a dejar así
puedes crear una variable si lo crees conveniente que se centra correctamente y con eso Finalizamos
este video puedes ver que nos faltan los que son los campos que se vean de esta forma para eso estaremos
utilizando Flex asi que lo veremos en el próximo video.