Lo siguiente que abordaremos es el fondo del cuerpo.
Y esto en realidad no es una imagen de fondo, aunque si encontramos uno que se parece a
esto, funcionaría bien.
Pero en realidad es un gradiente que CSX está agregando para mí.
Así que, en esencia, podemos escribir degradados lineales y en lugar de escribirlos por nuestra cuenta desde cero, les
mostraré un gran recurso que tiene algunos buenos degradados de color pre-hechos con los que podemos trabajar y que
podemos actualizar y editar en nuestro propio.
Entonces se llama gradientes dot com.
Y luego tiene un montón de degradados diferentes, podemos usar las teclas de flecha para ver algunos de ellos.
Así que solo fui hasta que encontré uno que me gustó.
Entonces, digamos que quería usar todo esto, lo único que tenemos que hacer es hacer clic en Obtener código
CSSA o presionar la tecla Enter y luego copiar este código en un portapapeles y luego seleccionaremos el cuerpo.
Así que cuerpo y pegar eso en.
Entonces, en realidad solo se trata de una línea, pero existen todos los prefijos de navegador diferentes.
Así que para Internet Explorer para Firefox para Chrome para opera todos estos prefijos diferentes.
Pero lo que hace
Estamos configurando el fondo en degradado lineal y estamos eligiendo dos colores y porcentajes diferentes de
esos colores y también el ángulo.
Así que déjame mostrarte cómo se ve ahora si actualizamos los nuestros.
Tenemos este lindo degradado
Entonces podemos seguir jugando por ahí.
Puede ver algunos más y puede usar los suyos.
El que decidí se llama Bora-Bora aquí mismo.
Así que copiaremos esa copia en el portapapeles y reemplazaremos este código.
Todo esto aquí con ese nuevo degradado que nuevamente es solo otro gradiente lineal que alguien más
escribió en dos colores diferentes porcentajes de cada uno.
Y ahorraremos
Y ve a verlo ahora.
Y ahí vamos.
Así que nos estamos acercando.
La próxima gran cosa en la que tenemos que trabajar son los íconos.
Entonces, aparece un icono más.
Y lo que hace es mostrar y esconder la forma y luego tenemos la papelera.
Puedo ver que también necesitamos incluir esos iconos que son parte de una biblioteca llamada fuente.
Increíble.
Así que vaya a la fuente impresionante y solo google para el sitio web es Fonte impresionante.
Yo consigo a su yo
Y todo lo que es es una colección de un grupo de iconos.
Así que déjame mostrarte si miramos debajo de los iconos hay una gran lista de todos los iconos diferentes que podemos usar
para que puedas ver allí.
Entonces, debemos incluir esta biblioteca dentro de nuestra aplicación para que podamos ir a descargarla allí mismo
y hacer clic en descargar o también podríamos hacer una fuente.
Awesome CDN y solo usa uno de estos CDN también.
Cualquiera de los dos funcionaría.
Entonces, para variar, dado que ya descargaron Jay query, usaré el CD y aquí copio ese enlace.
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
una fuente, pero es un archivo C Ss y lo guardaré, y lo que eso hace es en realidad, me da un montón
de clases que están preconstruidas y prefabricadas que luego puedo agregar a los elementos, así que le mostraré algunos ejemplos.
Luego iré a mi
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
f dash battery dash 3 dash courts Así que tenemos que agregar uno solo copie el código aquí
en alguna parte de nuestra aplicación.
Pongamos en la H-1.
Es una etiqueta que significa icono y le damos una clase y no tenemos que poner nada aquí.
Lo dejamos vacío y esto representa a Rifan increíble.
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.
Y este es el nombre del ícono
Queremos el signo más y el cubo de basura, así que veremos aquí y dentro del H-1 mantendremos el ícono y
mantendremos la clase pero queremos F. A. dash plus y siéntete libre de usar tu propio ícono.
Si continúas encontrando increíbles y encuentras otro que te guste, también podríamos usar uno como un
lápiz que parezca un ícono o un lápiz y papel, y si estuviera fresco y ahora tengo el signo
más que entró en estilo y movimiento a la derecha y todo lo que tenemos que hacer para eso es seleccionarlo primero,
así que seleccionaremos el perro.
F a dash plus y flotará justo así y actualizar y ahora está terminado en el sitio correcto.
Ahora abordemos los botes de basura y no vamos a ocuparnos de la animación todavía.
Solo vamos a mostrar el cubo de basura en vez de una X.
Así que volvamos y en nuestra spand vamos a deshacernos de las X's y dentro del
lapso vamos a agregar otra etiqueta electrónica y el e-TAG va a tener una clase de FAA y el nombre de
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
se carga la página, pero obtenemos tres contenedores de basura para los nuevos.
Todavía estamos lidiando con el ex.
Entonces, queremos ir a nuestro Javascript.
Y cuando pensemos uno nuevo, no queremos agregar un lapso con X.
Desea agregar un icono y debemos asegurarnos de que nuestras cotizaciones no interfieran.
Entonces, si usamos comillas simples allí y las guardamos, ahora deberíamos tener un ícono de papelera dentro del lapso.
Así que agreguemos algunos nuevos.
Aquí vamos.
Y todavía puedo hacer clic porque todavía están dentro de un lapso.
Entonces es un elemento icono en lugar de un lapso.
Así que hago clic en evento todavía funciona.
Ahora trabajemos en esta animación simple y todo esto se hace con C evaluar que los tramos aquí están realmente
ocultos cuando se carga la página.
Tienen una riqueza de cero.
Y luego, cuando cierro, en realidad estamos aumentando el ancho a 40 píxeles y luego lo estamos animando
con la propiedad de transición.
Así que vamos a intentar algo de eso.
Abra nuestro archivo CSSA y lo primero que haremos será cambiar el estilo para que se expanda
y le daremos un color de fondo de color rojo que es e 7 4 C 3 C y se actualizará.
Y ahora tenemos ese fondo rojo a su alrededor.
Lo siguiente que haremos es darles una altura de 40 píxeles, lo que no parece hacer mucho todavía, pero una vez
que agreguemos algunas propiedades más notará la diferencia.
Agreguemos un margen a la derecha de 20 píxeles y regresemos.
Ahora que nos da el espacio que queríamos aquí.
A continuación, démosles un texto que alinee el centro,
que es solo una pequeña diferencia en los tramos aquí.
Los íconos dentro de uno importante son para hacer que el ícono sea demasiado blanco para que el color sea blanco.
Todo bien.
Así que voy a mostrarte cómo hacer que se vean así primero sin la animación para que
siempre estén ahí.
Y luego los animaremos para que estén ocultos hasta que estemos sobre él.
Así que nos estamos acercando, pero necesitamos que estos ocupen más espacio vertical y horizontalmente.
Así que voy a agregar un a con 40 píxeles que eventualmente vamos a establecer en cero y establecer
dos en línea Bloquear.
Y me actualizo ahora.
Y eso se ve bien.
Entonces, lo siguiente es hacer la animación.
Y la forma en que eso funcione realmente vamos a establecer que el ancho sea cero.
Entonces, todos estos tramos tienen un cero hasta que sobrevuelo un aliado y luego lo aumento
con 40 en ese lapso.
Así que hagámoslo ahora.
aliado y no solo el tramo, pero cuando pasamos el mouse sobre un aliado queremos seleccionar el tramo que está dentro de un
aliado que está sobrevolando.
Voy a establecer con cero y luego cuando pasemos por encima de un
Entonces vamos a configurar con 40 píxeles así.
Y volvamos a nuestra propia versión y actualización.
Puedes ver que las luces se han ido.
Y cuando sobrevuelo y vuelo aparece el tramo y el botón funciona.
Entonces, la siguiente característica es hacer que se active para que no aparezca instantáneamente y para hacerlo
solo usaremos la propiedad de transición.
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.
Entonces, en el tramo vamos a agregar el punto cero de transición en
Y ahí vamos.
Tenemos nuestra buena animación.
Hay un pequeño artículo que me molesta aquí, que es que el ícono aún se muestra incluso cuando el lapso es
de cero píxeles de ancho.
Por lo tanto, es muy difícil de ver, pero mire el ícono aquí.
Todavía está allí, incluso cuando no estoy sobre él.
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.
Entonces opacidad cero y luego opacidad 1. 0 cuando volamos.
Y eso debería encargarse de eso.
Entonces ahora no podemos ver los iconos.
Ahí está y luego desaparece y se desvanece también porque la propiedad de transición está
afectando todo.
Así que hagámoslo 2. 2 segundos y te mostraré.
Observe cómo se desvanece y luego se desvanece.
Entonces esa es una versión muy lenta.
Y solo haremos 0. 2.
Hay una pequeña cosa molesta que nos queda, que si se mira muy de cerca aquí o
se aumenta el tamaño, hay un pequeño espacio entre la entrada y luego esta lista la UL.
Pero la brecha desaparece cuando me concentro en el rubor.
Y luego, cuando no estoy enfocado, vuelve.
Entonces, para arreglar eso vamos a agregar un borde pequeño que es invisible, de hecho
tendrá un color solo un pequeño borde de R. GRAMO. be 0 0 0 0 0 0, que ocuparemos el mismo espacio que
nuestro límite cuando estemos enfocados.
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.
cero cero cero cero.
Entonces eso terminará dándonos un borde invisible.
Pero fíjate que aquí voy a actualizar, ese pequeño espacio se va.
Así que ahora no solo se enrojece el borde cuando lo tenemos enfocado, sino que también hay un borde que
nos ayuda a enrojecer que en realidad no vemos