Transcripciones
1. Introducción: Oigan a todos. Mi nombre es Christina Gorton y soy una desarrolladora remota front-end. También soy un desarrollador autodidacta, y una de las formas en que aprendí a codificar fue a través de la codificación creativa. En este curso, vamos a estar repasando muchas propiedades CSS
avanzadas e intermedias, pero las estaremos aplicando de manera divertida a lo largo del curso en un proyecto de imagen CSS. Estaremos trabajando juntos en CodePen, y al final del curso tendrás tanto una imagen como una animación para compartir. Empecemos.
2. Proyecto de clase: En este video me gustaría describir brevemente qué
son las imágenes CSS y luego vamos a hablar de lo que va a ser nuestro proyecto en esta clase. Las imágenes CSS son cualquier imagen que crees con CSS y HTML. Como puedes ver aquí en CodePen, hay muchas imágenes CSS y muchas cosas que puedes hacer con CSS. Incluso puedes crear una imagen CSS con un solo elemento div que permita propiedades
CSS como ves aquí en el sitio Lynn Fisher en singlediv.com. Voy a estar compartiendo varios enlaces a sitios y perfiles de
CodePen con imágenes inspiradoras en nuestro documento fuente de aula. Ahora para este curso, vamos a estar creando esta imagen CSS. En cada lección presentaré un nuevo concepto CSS, entonces
aplicaremos lo que acabamos de aprender a nuestro proyecto de clase. Al final del curso habrás aprendido y aplicado varias propiedades CSS nuevas y tendremos esta imagen CSS
completada con animación para compartir. Me encantaría que compartieran su trabajo lo largo del curso en nuestra sección de proyectos de clase. Para aquellos de ustedes que quisieran estaré recogiendo y compartiendo los proyectos finales en una colección de clase CodePen. Incluso puedes ponerte creativo y cambiar colores, formas, box shadow, lo que quieras hacer o incluso simplemente crear una imagen completamente diferente y me encantaría compartir eso, tanto en nuestra colección CodePen de clase, lo que quieras hacer o incluso simplemente crear
una imagen completamente diferente y me encantaría compartir eso,
tanto en nuestra colección CodePen de clase,
como en mi cuenta de Twitter. Empecemos.
3. Ser desde: En este video, vamos a hacer una breve introducción a Sass. No voy a meterme en todo en Sass. Hay mucho que ver con Sass. Pero para nuestro proyecto vamos a estar usando Sass para algunas cosas como variables y anidación. Por lo que me gustaría repasar esas. Son realmente útiles. Son una buena introducción a Sass, y desde ahí puedes seguir adelante y aprender parciales y
mixins y loops y todo tipo de cosas divertidas que Sass ofrece. Un preprocesador CSS solo te permite tomar un idioma y compilarlo en CSS para que puedas usar las características que están en ese idioma, en este caso, Sass. También hay menos estilistas, pero Sass parece ser el preprocesador más popular para usar en el desarrollo web en este momento. Sass tiene dos sintasis diferentes, en realidad. El que verás más comúnmente ahora es SCSS, que puedes ver aquí arriba, y CodePen, solo puedes, ir a la configuración y puedes elegir tu preprocesador. Son Sass, SCSS, Stylus, PostCSS. Vamos a estar usando SCSS y eso se debe a que se asemeja más a CSS regular. Si estás usando Sass regular y no Sassy CSS, que es SCSS, no tienes que hacer corchetes, pero tienes que preocuparte por indention. Hay ciertas formas en que tienes que sangrar y no puedes simplemente tomar cualquier código CSS que tengas y empezar a usarlo. Con Sass, tendrías que volver atrás y reformatear todo tu CSS. Entonces aquí te dejamos algunos ejemplos de Sass que podrías ver en nuestro proyecto. Entonces vamos a pasar y solo unos minutos en nuestro próximo video, y vamos a escoger colores y crear variables con ellos. Por lo que las variables son útiles porque se puede escribir el código una vez aquí arriba tengo mi color. Estos son diferentes blues, y lo puedo poner a lo largo de mi proyecto. En este pequeño proyecto podría no parecer un gran problema tener que escribir el color cada vez. Pero cuando estás haciendo un proyecto enorme, si cambias ese color en absoluto, un diseñador regresa y dice: “Oye, quiero que este color sea rojo en lugar de azul”. Es mucho más fácil justo aquí escribir, rojo, y luego en cualquier lugar he puesto ese color azul que cambiará a lo largo de todo mi proyecto. Entonces si tuviera títulos, fronteras [inaudibles], si tuviera algo que fuera ese color azul, todos
cambiarían a rojo ahora. Súper útil. También verás que la gente lo usa para cosas como encabezamientos o puntos de ruptura. En cualquier lugar donde vas a estar escribiendo algo varias veces donde podrías estar usando el mismo tipo de fuente de encabezado o los mismos puntos de ruptura en diferentes consultas de medios. Quieres poner eso en una variable para que solo tengas un lugar para cambiarlo y no
estás teniendo que pasar por todas tus hojas de estilo y buscarlo. Una de las otras cosas que verás en nuestro proyecto es anidar. Anidar es realmente útil. Cuando piensas en HTML, tienes una jerarquía anidada y visual clara de tus elementos HTML. CSS realmente no ofrece eso. Pero con la anidación, algo así como un nav donde tendrías un UL y LI y enlace de anclaje. Ahora puedes ver que aquí, están todos juntos, tienen sentido. Esto es muy fácil de mantener, mientras que aquí te estás repitiendo, nav ul, nav li, nav a. cuando realmente es más fácil mantenerlos todos juntos. Se puede sobreanidar cosas, esto puede llegar a complicarse de anidar y de mantener, así que hay que tener cuidado con eso, pero con algo así como un nav, tiene sentido mantener todas tus cosas juntas en anidación. Otra cosa genial que puedes usar con Sass son los operadores, y a menudo uso mucho operadores. Haré algunas matemáticas para descifrar mis anchos dependiendo de lo que esté haciendo, pero los uso mucho con colores. Entonces si tengo un color que es el mismo, estos dos colores son ambos en Brown, y quiero que uno sea un poco más claro y otro sea un poco más oscuro. Yo los multiplicaré. Si subes, pasa uno que lo haga más ligero. Si vas por debajo de uno que lo hace más oscuro y esa es solo una manera fácil, y especie de tener que ir a buscar otro color y poner eso dentro, solo
puedes multiplicarlo. Entonces eso es bastante guay. En el siguiente video, te mostraré cómo normalmente genero colores, cómo encuentro una paleta de colores, y luego agregaremos algunos de nuestros colores usando las variables Sass, y luego a lo largo de nuestro proyecto estaremos usando algunos Sass más, por lo que lo verás en el resto del proyecto. Empecemos. En este video voy a hablar de cómo podría generar colores si no
tengo un programa como Sketch o productos de Adobe. Entonces este es solo un sitio gratuito que uso mucho. Es bastante guay. Se llama coolers dot com, y voy a tener un enlace para esto en nuestros recursos de clase. Lo que esto hace es, permite generar paletas de colores. Si solo hago clic en esta barra espaciadora de mi teclado, puedo ir por y ver manojo a las paletas de colores. Puedo pasearlos, encontrar paletas de colores que vayan con eso. Pero lo que suelo hacer con mis imágenes CSS es que
encuentro una imagen que quizá quiera recrear en línea, y luego puedo ir aquí, y si tengo una captura de pantalla de la misma o si tengo la URL,
puedo dejarla caer eso y puedo conseguir el paleta de colores de esta manera. Entonces si muevo esto, me dieron el azul. Puedo dar click en este y luego puedo ponerlo donde quiera. Puedo conseguir un color marrón y hacer clic en éste. puedo meter este pequeño color de acento. Es realmente genial. En este punto puedes entonces generar los colores, que tengo mi paleta de colores aquí. Súper útil. Esto se puede exportar si lo desea. Puedes agarrar los colores, puedes hacer esto. Se pueden copiar y poner los colores encima. Incluso puedes exportarlos y ellos los exportarán como variables para ti. Este es un sitio gratuito. No tienes que apuntarte. Si te inscribes, solo te ahorra paletas de colores. Yo uso esto todo el tiempo. Es súper útil y quería compartir eso con ustedes chicos. Entonces sigamos adelante y empecemos a agregar algunos de nuestros colores a nuestro proyecto usando variables Sass. Si este fuera un proyecto donde estaba trabajando en el trabajo, probablemente no estaría nombrando cosas cielo y madera o cosas así para mis variables, estaría nombrándolas como texto principal, cosas que tienen sentido para que vengan otros desarrolladores y usar también, pero cuando estás creando imágenes CSS, puedes nombrarlas, lo que sea que tenga sentido para ti. Por lo que para nosotros, tenemos nuestro color cielo. Vamos a agregar, tenemos nuestro color de madera. Tenemos un color blanco. Tenemos un agujero negro aquí. Tenemos el color de acento, tenemos el spot, y luego tenemos un borde, y estos van a ser nuestros colores que vamos a estar usando para todos nuestros proyectos. Ya verás los estaremos agregando más adelante, y te puedo mostrar cómo hacer eso si quieres empezar con uno de los colores, podemos seguir adelante y añadirlo a nuestro fondo, fondo cielo. No te preocupes aún por estas cosas. El marco o el HTML aquí, vamos a estar haciendo eso en nuestro próximo video con posicionamiento. Entonces por ahora solo dibuja tus variables y luego pon tu fondo como Sky, y luego llegaremos a nuestro video de posicionamiento a continuación.
4. Encuadre: Siempre que empiezo una nueva imagen CSS, lo primero que suelo hacer es configurar un marco para esa imagen. Enmarcar la imagen nos da una buena oportunidad para repasar el posicionamiento en CSS. Por lo que hay seis valores para la propiedad de posición, son estáticos, relativos, absolutos, fijos, pegajosos y heredan. Entonces esta clase vamos a estar repasando el posicionamiento relativo y absoluto. Algunas de las cosas difíciles a saber sobre el posicionamiento relativo y absoluto son, es que si tenemos un elemento hijo con una posición absoluta, el elemento padre lo ignorará. Por lo que para hacer que el elemento hijo se posicione en absoluto basado en el elemento padre, necesitamos primero establecer la posición de los padres en relativa. Aquí te mostraré un ejemplo. En este ejemplo tenemos dos elementos padre y dos hijos. Uno de los padres tiene la posición relativa que se le aplica y el otro no. Entonces cuando agregamos el posicionamiento del top 0 a este elemento hijo, se posiciona relativo a su padre, mientras que éste es ignorado por su padre y su posicionado relativo al cuerpo del documento. Entonces si descomentamos aquí este código, veremos que el elemento hijo ahora está posicionado en relación con su casa de padres. Por lo que para nuestro proyecto, queremos que todos los contenidos se posicionen en relación
al marco que agregamos y no al cuerpo del documento. Por lo que agregamos la posición relativa al marco de clase. Entonces hagámoslo ahora aquí en nuestro proyecto. Algunas de las otras cosas aquí son solo cosas que normalmente hago en cada proyecto. Doy a nuestro marco un ancho y una altura. Dije desbordamiento oculto si no quiero mostrar nada fuera
del marco y hago margen 0 auto para que esté en el centro aquí. Entonces para nuestro proyecto, las primeras cosas que vamos a estar haciendo son estos círculos aquí. En nuestro proyecto ahí se llama border_1, border_2, border tres, y luego un hoyo. Sigamos adelante y sumamos el primer border_1 a nuestro proyecto. Tan solo una nota rápida en code-pen. Hay un plugin incorporado que también puedes conseguir en muchos editores de texto llamados emit. Lo estaré usando a lo largo del curso. Simplemente mejora enormemente el flujo de trabajo HTML y CSS. Esto lo hace mucho más fácil. Entonces cuando me veas haciendo algunas cosas, lo
señalaré al principio, pero lo estaremos usando a lo largo del curso. Entonces con él en absoluto tengo que hacer si quiero otro div es que puedo hacer punto y luego
puedo poner el nombre de la clase ya boarder_1 y luego puedo golpear “Tab”, y luego tengo div class border_1 ya aquí con la etiqueta div cierre. Entonces vamos a empezar a agregar el código para nuestro primer borde y normalmente empiezo con un ancho y una altura, que no verás hasta que le demos un color de borde. Entonces vamos a hacer frontera. Dos píxeles sólidos y luego nuestro borde de color que agarramos antes. Ahora mismo es un cuadrado y así si queremos hacerlo redondo como en nuestro ejemplo, le
damos un radio de borde, 50 por ciento, y eso lo hará perfectamente redondo. Cuando tienes un ancho y una altura que son iguales en tamaño. Entonces queremos hacer posición absoluta. Nos vamos a ir a la izquierda alrededor del 30 por ciento y hablar del 21. Las imágenes CSS, este posicionamiento de izquierda y superior, es solo algo con lo que tienes que jugar. Si lo pongo más del 50 por ciento a la izquierda, se acabaría sólo un poco demasiado lejos y quiero que todo
se centrara en relación con el elemento padre, que en este caso es el marco. Entonces hice el 30 por ciento. Debido a que tenemos posición relativa sobre el padre, esto se deja 30 por ciento del antepasado más cercano, que sería nuestro elemento padre aquí, el marco. Por lo que va 30 por ciento más de nuestro marco. Sólo para demostrar que un poco mejor, pongo un borde, dos píxeles sólidos para rodear nuestro marco muy rápido y en realidad
puedo ver que el 30 por ciento no está realmente centrado. Se acabó un poquito. Entonces si fuéramos tal vez 25 por ciento, creo que seríamos un poco más y centros. Por lo que a veces es bueno agregar un pequeño marco a tu imagen para que
puedas ver exactamente lo que sería el centro con tu posicionamiento aquí. Entonces podemos seguir adelante y quitarnos esto de nuevo y podemos trabajar en sumar nuestro próximo trimestre. Entonces de nuevo, haremos punto orden dos hit “Tab”, y de nuevo tenemos un div de apertura y cierre con la clase ya. Este border_2 también va a tener un borde de dos píxeles, sólido y luego el color del borde, y también va a tener un radio de borde del 50 por ciento. Entonces en lugar de hacerlo dos veces en nuestro código, podemos mantener nuestro código un poco más seco putting.border_1 luego poner una coma y luego en.border_2, y luego simplemente agregar nuestro código aquí y sacarlo de aquí. Eso aplicará el borde tanto al border_1 como al border_2. Entonces para nuestro border_2, vamos a querer tener un ancho que sea un
poco más pequeño que nuestro primer borde. Por lo que voy a probar con 23rem y altura 23rem. Entonces queremos darle este color. Ese es nuestro color de acento. Entonces haremos acento de fondo. Entonces queremos que se acabe un poquito. Entonces me adelanté e hice margen 0.3rem. De nuevo, eso era simplemente jugar con él y ver qué lo centraría dentro del border_1. Se puede ver me salté un poco adelante porque border_3 y todo son muy similares a lo que acabamos de hacer con border_1 y border_2. Entonces de nuevo, solo queríamos tener un poco más pequeño ancho y alto en ambos y luego queríamos tener el margen que tenía que jugar un poco con él. Este tenía 0.5rem y éste tenía 0.2, y para mantener nuestro código seco, porque habríamos tenido que repetir este borde, dos pixeles, borde
sólido y radio borde-50 por ciento cuatro veces diferentes. Entonces solo lo agregamos justo aquí y ponemos cada nombre de clase justo aquí para que se le aplique. Después los dos siguientes videos te voy a estar mostrando cómo usar los pseudo elementos antes y después,
y cómo usar la trayectoria de clip y un poco más sobre el radio de frontera. Empecemos.
5. Elementos de Pseudo: Ahora vamos a hablar de pseudo elementos, que una vez que aprendas, encontrarás que en realidad puedes usar todo el tiempo. Utilizo pseudo elementos casi todos los días, en cada proyecto que uso, varias veces, son súper útiles. Pseudo elementos antes y después crean un pseudo elemento que se inserta ya sea antes del elemento o después del elemento al que apuntes. En realidad no está en el DOM. No estás poniendo esto en el HTML en ninguna parte. Todo esto es solo en el CSS y te voy a mostrar cómo se hace eso. En nuestro ejemplo, tenemos un botón y en nuestro HTML solo tenemos un div, tenemos nuestro botón y tenemos las palabras, Click Me.No hay nada más aquí. Pero como verás cuando tengamos nuestro botón sobre, tenemos un emoji unicornio y tenemos una flecha. Esos se aplican con pseudo elementos poco después y antes. Como puedes ver en nuestro código, apuntamos nuestro botón tanto con el antes como con el después. Para hacer esto en el hover, es un poco complicado. De hecho hice esto mal la primera vez que tuve que buscarlo. En realidad lo estás basando en el hover del padre. Por lo que hover vendría antes que el antes aquí. Entonces cuando tengamos un hover, ahora
obtenemos el emoji y la flecha. El emoji es el antes, es antes del click me, y la flecha es la después viene después del texto aquí. En nuestro próximo video, en realidad vamos a aplicar lo que acabamos de aprender aquí en nuestro proyecto de clase. Empecemos con eso. Nuestro proyecto, vamos a utilizar pseudo elementos en dos lugares. Lo vamos a utilizar para esta base de puente parte mellow que sale de aquí. Este es nuestro después y luego también lo usamos en nuestras clavijas, y luego el pequeño punto que hay dentro de nuestras clavijas es el después. Sigamos adelante y hagamos eso en nuestro proyecto. Se puede ver en nuestro HTML he agregado un div con la base de puente de clase, y luego he agregado en algunos CSS aquí. Tenemos antecedentes y escuchamos en estamos usando madera. Entonces aquí otra vez está nuestra clase SAS o variables SAS, lo siento. Entonces tenemos un ancho y una altura. Esto es sólo algo con lo que jugué y adiviné. Nosotros sí posicionamos absoluta para que pudiéramos posicionarlo donde queríamos, y como está aquí abajo, su posición relativa al marco, y luego tenemos un top 60 por ciento del marco, queda 27 por ciento del fotograma. Tiene una parte superior de borde para que sea un poco más ligera y en realidad necesita comentar la sombra de caja. Eso es algo en lo que nos vamos a meter en otro video. Pero ahora que tenemos esta base aquí, entonces
podemos sumar nuestro, lo que pongo como antes solo para mostrarles el antes que estamos posicionando absoluto. En este caso realmente no importa si es un antes o un después. Pero como estamos usando un después más adelante, seguí adelante y usé el antes. Entonces, en cualquier momento que utilices los pseudo elementos, tienes que tener un contenido, y esto podría tener contenido en él si lo deseas. Pero como en realidad no necesitamos agregar nada, simplemente lo dejamos en blanco. Pero esto es necesario que lo posicionemos absoluto y esto se posiciona con relación a la base del puente, y luego hacemos fondo, negativo 48 por ciento, izquierda 10 por ciento, hacemos un ancho y una altura y un fondo madera oscura. Adelante y saquemos esto y en realidad aparecerá aquí. puede ver que aparece por debajo de aquí. este momento no se ve realmente como lo tenemos en nuestro producto terminado, porque aún no hemos repasado clip. Entonces por ahora solo lo dejaré así, está bien. Volveremos atrás y lo arreglaremos y se verá más bonita una vez que pasemos por clip. Adelante y añadamos las clavijas también. De acuerdo, seguí adelante y agregué las clavijas a nuestro HTML. No me voy a sentar aquí a codificar cada uno para que ustedes lo vean. Me imagino que ustedes saben al menos cómo codificar HTML en CSS. Entonces queremos llegar a lo que estamos haciendo aquí con ellos. Entonces para esta instancia, hice peg y me di una otra clase,
peg 1, peg 2, peg 3, peg 4, peg 5, peg 6 y les mostraré por qué en nuestro CSS en tan solo un minuto. Entonces para que todos ellos a hacer nuestro secador de código, les
di la clavija de clase porque todos van a tener un radio de frontera del 50 por ciento, todos
van a tener el mismo ancho, la misma altura, la misma fondo nuestro fondo es el acento variable, la posición absoluta, y todos van a ser 50 por ciento desde lo alto de esta base aquí. De nuevo, nos meteremos en la sombra de caja en otra. Entonces por ahora todo va a quedar muy plano. Cuando hacemos nuestro después, todo esto está haciendo es agregar ese pequeño punto que teníamos en nuestra imagen. Esto podría parecer raro ahora mismo, y es porque en realidad todos están encima el uno del otro. Todos están posicionados absolutamente. Todos están en el mismo lugar. Por eso hice la clase extra de peg 1, peg 2, etc. Porque ahora solo podemos tener que escribir la propiedad izquierda que queremos aquí y hasta dónde queremos que llegue a la izquierda. Adelante y comentemos esto y ya puedes ver de qué estoy hablando aquí. Ahora todos están posicionados de manera diferente el uno del otro. Todos están solapados solo un poquito, y todos tienen su pequeño lugar aquí, que es nuestro después. Entonces así es como usamos el después en esta instancia, no
tuvimos que entrar y escribir un montón más divs que terminarían siendo pequeños spots que sí posicionamos absolutos y luego pusimos encima de los spots, pudimos hacerlo sin tener que poner otro elemento HTML. Eso es realmente impresionante, por eso el antes y el después pueden ser muy útiles. En el siguiente video voy a hablar de nivel de sendero. Te voy a mostrar un ejemplo de cómo podrías usarlo en realidad en producción, y entonces realmente haremos que nuestra pequeña base aquí se vea un poco mejor. Entonces lleguemos a ello.
6. Trato de Clip-Path radio de bordes: Clip-path es una propiedad interesante que tengo está aquí de indio porque hacen un buen trabajo de solo tener unas demos aquí para mostrarte. Este es un ejemplo de cómo sería un círculo. Se puede hacer un clip path circle que es una propiedad que tienen, clip path elipse y luego se pone en algunos puntos aquí o se puede hacer polígono y de nuevo poner en algunos puntos cuales vamos a repasar en tan solo un segundo lo que significan algunos de estos. Si ajustas esto en absoluto, puedes ver que la forma de esta imagen podría haber sido más larga. Cincuenta por ciento, que es lo que normalmente pensarías si estás haciendo radio de frontera, el seno más profundo. Si algo tiene el mismo ancho y altura hará un círculo. Pero si no es el mismo ancho y altura, eso no va a hacer un círculo así que aquí fue 40 por ciento. Esto es algo con lo que puedes seguir y puedes jugar. Trataré de quitar el enlace a esto en nuestros recursos de clase. la sintaxis puede ser un poco difícil de acostumbrarse al principio pero puedes hacer como vimos en indio puedes poner una forma básica como círculo o elipse. Puedes hacer fuente de elipse, que puede ser una URL si ya tienes una imagen o puedes hacer un cuadro de geometría. Ahora si miramos aquí, así es como las hago a menudo. Esto es solo un polígono y luego tienes todos estos números. ¿ Cuáles son estos números? Aquí recortará todas las imágenes en forma de rombo. Pero, ¿por qué? Todo depende de los valores de lo que se llama los vértices. En el siguiente diagrama aquí hace un muy buen trabajo de mostrar esto así que por eso fui a este sitio. Este es el punto in situ. Se llama introducción de la propiedad de ruta de clip CSS. Aquí arriba tenemos 50 por ciento, cero por ciento de nuestros dos primeros puntos. Estamos más del 50 por ciento en nuestra x y somos cero por ciento en nuestra y que es todo el camino arriba. Fuimos 100 por ciento en nuestra y que se ve aquí abajo y 50 por ciento, esto se acerca. Ésos son nuestros puntos aquí. Estamos 100 por ciento en nuestra x aquí y sólo 50 por ciento
aquí arriba en nuestra y y otra vez aquí estamos al 0 por ciento en nuestra x y 50 por ciento en nuestra y Esto es algo con lo que puedes jugar. Puedes tratar de descifrar tus números pero un gran recurso que a mucha gente le gusta usar, lo uso todo el tiempo, lo
hace súper simple, se llama clippy. Déjame mostrarte. Esto es clippy. Clippy puedes escoger una forma que tal vez quieras. Si queríamos un trapezoide y entonces puedes venir aquí y puedes arreglarlo si quieres algunas formas realmente extrañas , baja, ven, lo que quieras hacer y entonces solo puedes copiar el código aquí. Ya tiene todos los puntos para ti. Lo copias y luego lo pones en lo que estés usando, lo que sea que estés tratando de hacer clic. Es tan fácil. Es realmente agradable de usar. Se puede hacer todo tipo de formas. A mucha gente le gusta usar este recurso así que me aseguraré de poner eso en nuestros recursos de clase para que lo vean. Maletín usado común para trayectoria de clip que verás en la web por todo el lugar en este
momento es este pequeño ángulo que te levantas en una imagen de héroe. Todo lo que tienes que hacer es tener tu imagen y luego dentro de esa misma área donde tienes tu imagen de fondo, en este caso está en mi encabezado, agregarías tu ruta de clip y luego cambiarías los puntos para que coincida con eso. Si cambio algunos de estos puntos, se
puede ver que puede cambiar drásticamente dónde está la trayectoria del clip. Aquí cambié ese 100 por ciento a cero. Se puede ver cuánto cambió eso. Ahí podríamos cambiar esto a tal vez 50 por ciento. No obstante, en todo tipo de imágenes locas, es realmente fácil jugar con tu inspector o como dije en el sitio, clippy. Adelante y agreguemos ese poquito de un camino de clip a nuestro proyecto aquí. Bajaremos a la base del puente y al antes. Entonces tengo un webkit aquí porque la ruta de clip en realidad no es muy compatible. No obstante, los recorridos de clip SVG son mucho más soportados. Cuando uso cosas de producción en realidad a menudo uso rutas de clip SVG. Pero para hacer estas imágenes de la forma en que la mayoría de la gente hace imágenes CSS en CodePen, las
verás usando la ruta de clip como esta. Quiero hablar rápidamente de otra forma en que puedes crear formas y es con radio de borde o borde. En muchas de mis imágenes, no necesariamente siempre
estoy usando clippy. Creo que he usado un recorrido de clip aquí. En realidad a menudo uso un borde para crear todas estas formas. Si miramos aquí mismo, estos son solo divs cuadrados en los que he usado un radio de borde en. Podemos hacer que el dedo ruede grande, que sea realmente pequeño. Puedes cambiar drásticamente las formas de tus imágenes con solo un radio de borde o un borde. Para un buen ejemplo de algunas de las formas que solo puedes crear con un borde, puedes echar un vistazo a CSS TRUCES. Han creado unas formas de CSS y muchas de estas formas. Este es un radio fronterizo. Estas son fronteras. Todas estas formas se crean con apenas bordes diferentes, donde apenas hay un cuarto mostrando por un lado pero tienes un montón de píxeles o un par de lados de todo el lote de píxeles y no se muestra por otros lados y así es como se crean estos triángulos. Se ve mucho en línea que van por debajo como menús o diferentes banderas. Puedes crear todo tipo de formas con solo un borde o un radio de borde. Es un poco tedioso. Mucha gente no quiere crear estas formas con un radio de frontera o un borde así que mucha gente va a estar usando ya sea SVG clip path o clippy. En el siguiente video, te voy a hablar todas las cosas que puedes hacer con box shadow. Hay muchas cosas que puedes hacer con la sombra de caja. Me emociona mostrarles algunos ejemplos de pixel que creé con box shadow. Algunos de los efectos geniales que puedes crear en cosas como botones y cómo vamos a agregar un poco de profundidad a nuestro proyecto para que no sea tan plano usando box shadow así que vamos a llegar a eso ahora.
7. Agregar profundidad con la sombra de la tontura: En este video vamos a hablar de box-sombra. Cuando pienses en box-shadow, podrías pensar en agregar un poco de sombra debajo de algo para que reventara un poco. Simplemente añade un poco de profundidad. Pero en realidad hay muchas cosas que puedes hacer con box-shadow que es realmente genial. Echemos un vistazo a box-shadow por un segundo. Más hay caja-sombra. En box-shadow, tienes un desplazamiento horizontal, tienes un desplazamiento vertical, un radio de desenfoque y luego tienes un radio de dispersión opcional, y un color. Si quieres cambiar el color por defecto es el negro. Veamos un ejemplo realmente rápido, que muestra esto realmente bien. Esto es solo un generador de sombras de caja en línea. Puedes usar esto para generar tus box-shadow, si no quieres tener que descifrar todas las diferentes propiedades aquí. Tan solo para mostrarte un ejemplo, nuestra longitud horizontal va a lo largo del eje x aquí, nuestra longitud vertical va a lo largo del eje y. Desenfoque es lo borroso que lo quieres. Ya sea que quieras que sea completamente crujiente o que realmente se vea un poco más como una sombra, y luego se extienda para esparcirlo. Puedes cambiar tu color. Hay todo lo que puedes hacer con box-shadow, solo para tener algo detrás y darle un poco más de profundidad. Pero veamos algunas otras formas en las que puedes usar box-shadow. Estos son algunos efectos de hover simples que puedes hacer con box-shadow. Verás estos en línea por todo el lugar. Este lo hace Giana. Creo que ves su nombre en CodePen. Si miramos esto, se puede ver que hace todas las cosas. De los que están entrando, estos están animando una caja-sombra de inset, y los que están saliendo son la caja-sombra regular. Otra cosa genial que puedes hacer con box-shadow yendo junto con nuestras imágenes CSS aquí, es que puedes crear pixel art con box-shadow. Aquí la premisa es que puedes dibujar pixel art dentro un solo elemento mediante el uso de una gran caja-sombra complicada. Si ves aquí en este sencillo ejemplo, tienes tres casitas. Porque, si declaras un desplazamiento vertical y horizontal para la caja-sombra pero no un desenfoque, obtienes estos cuadrados de aspecto realmente nítido, estos negros, la caja-sombra original. Entonces estos están saliendo de izquierda y derecha. Puedes hacer un dibujo entero como este aquí con la caja-sombra así. Incluso puedes animar box-sombra. Mira qué genial es este murciélago. Aquí se puede ver la gran caja-sombra complicada. Lo tienen en una animación, que vamos a estar repasando, animaciones de
fotogramas clave, un poco más tarde. Esta es una pequeña demostración rápida de la diferencia entre box-shadow regular y box-shadow inset. Tu caja-sombra regular saldrá de cualquiera que sea tu elemento y el recuadro irá dentro. En el siguiente video, seguiremos adelante y empezaremos a aplicar parte de la box-shadow a nuestro proyecto, que veas cómo hace pop a los diferentes elementos. Les da mucha más profundidad. En este momento nuestra imagen es muy plana. A medida que sigamos y terminamos el proyecto, seguiremos agregando box-shadow a nuestros diferentes elementos que agregamos. Vamos a llegar a ella. Ahora vamos a pasar y vamos a añadir un poco de caja-sombra a algunas de las cosas que ya tenemos aquí. Tenemos nuestra base de puente, y si agregamos un poco de caja-sombra, se
puede ver que aparece un poco. No es tan plano. En realidad parece que está saliendo un poco de la página, lo cual es genial. Parece que el puente está saliendo de lo que sería nuestra guitarra. Yo quiero mostrarles aquí, en el inspector cómo podría parecer
algo de esto si lo cambio un poco. Ahora mismo lo tengo como un píxel, un píxel, y tres píxeles. Digamos que hicimos cinco píxeles, eso va a salir mucho más a la izquierda. En lugar de estar centrado como lo tenía antes, donde está saliendo un poco para que parezca que la luz viene de un lado porque está sobre a la izquierda y no a la derecha, pero aquí no se ve tan drástica. Parece que tal vez la luz viene de un lado y hacia abajo un poco, que es lo que queremos a nuestra imagen. Este de aquí es nuestro desenfoque para que podamos hacerlo realmente borroso, podrías hacer cinco, siete ocho. Podrías seguir adelante con eso y eso lo hace aún más pop. Pero me gusta a las tres. Creo que se ve bien. Creo que se ve bien. Eso depende de ti. Puedes cambiar siempre a tu alrededor, puedes jugar con él. Ustedes pueden hacer estas imágenes, las tuyas. Ahora hagamos lo mismo con el después y con nuestras clavijas para que parezcan que están apareciendo un poco. Establecido en nuestro código, lo
siento, este era nuestro antes. Ya podemos despegar y añadir nuestra caja-sombra. Espere un segundo a que se cargue. Ya verás que hace que parezca que se inclina un poco como lo haría un puente en una guitarra. Entonces cuando lo agreguemos a nuestras clavijas, va a hacerlas estallar un poco también y darles un poco de profundidad. Se puede jugar con estos. Tal vez te guste que se vea un poco diferente. Es posible que encuentres aquí un color diferente, tal vez más de un marrón en lugar del negro. Esto es un poco marrón. Es sólo un marrón oscuro. Es del mismo color que lo que es la mancha. Te va a dar un segundo para mirar el código. Entonces lo vamos a agregar a un lugar más y en realidad vamos a hacer inset esta vez. Aquí está nuestro hoyo, lo vamos a agregar aquí. Después toma un segundo para que pueda cargar. Ahora se puede ver por el recuadro, parece que esto está bajando ahora. Se parece más a un agujero real, en lugar de solo un punto negro que está en medio de la página aquí. Eso es todo el box-shadow que vamos a añadir por ahora. Vamos a sumar un poco más y nuestro proyecto, después de sumar algunos elementos más.
8. Transformas y transiciones: En este video, vamos a hablar de transformaciones y transiciones. Un poco más tarde, vamos a estar hablando de animaciones, pero para llegar, primero, vamos a hablar de transiciones y transformaciones. Cuando sí hablemos de animar, les
hablaré de cómo se transforman, y la opacidad son las formas más performantes de animar. Eso podría parecer un poco limitante al principio, pero una vez que entiendas todas las cosas que puedes hacer con las transformaciones, verás que realmente no es limitante en absoluto. Empecemos a aprender un poco estos. Además, quiero hacer una nota rápida y solo decir que he construido algunos de estos ejemplos a lo largo del curso que les he estado mostrando a todos, y esos estarán en una colección que estaré compartiendo en nuestros recursos del curso para que puedes volver atrás y puedes jugar con ellos y cambiar las cosas y aprender un poco más así también. Echemos un vistazo a la primera transformación que tenemos aquí. Tenemos escala de transformación, y esto será escalando tanto en el eje x como en el eje y cuando lo tengamos de esta manera. Se está escalando hacia arriba dos veces su tamaño. Esperemos por aquí y veamos su escala. Aquí va, escalando tanto la x como la
ySi quisiéramos que fuera sólo la x, podríamos escribirla de esta manera, 'scalex', y estará escalando por el eje x aquí dos veces su tamaño. Puedes hacer lo mismo para el y cuando estás usando la escala, y esto realmente la estará escalando hacia abajo, así que si vas por encima de uno, estás escalando el tamaño hacia arriba. Esto va a ser la mitad de su tamaño haciendo 0.5 aquí. Ya puedes ver que se está encogiendo ahora. Si yo hubiera subido, habría crecido hacia arriba. El siguiente es sesgado. Puedes hacer ya sea skewx o sesgado, y usas grados para esto. De esta manera, vas a hacer skewx 40 grados. Puedes usar números negativos o positivos. Ya veremos cómo es con sesgado aquí, y esto está sesgando negativo 25 grados en el eje y. Nuestra siguiente transformación es rotar. Esto está girando 30 grados. Podrías hacer 30 grados negativos si quieres. Se puede girar justo en el eje Y, que lo volteará. Al igual que ves tarjetas ahora en línea. Las personas tienen tarjetas diferentes, así que usa una cara posterior y permite visibilidad facial, y puedes ver el reverso de una tarjeta como lo que se les llama cuando las estás usando en la web. Podemos hacer lo mismo con la x, y yo solo voltearé hacia el otro lado, así que rotax, ahora se está volteando hacia arriba y hacia abajo. Entonces hay transformación: rotatez. Esto está girando 90 grados. Nuestra última transformación es traducir. Esto va a estar moviéndose tanto en el eje x como en el eje y. Lo verás ir por encima de 50 mientras que también bajas 20 píxeles. Si solo quisieras repasar, solo
podrías hacer transformx. Esto va en la dirección negativa. Podrías hacer lo positivo si quieres que haga justo la Y. Ahora bajaría, y si ponemos un negativo aquí, subiría. Puedes ver aunque solo hay cuatro cosas que puedes transformar, en realidad
podrías hacer mucho con cada uno. Tener las diferentes x y la y y las diferentes formas que puedes transformar sobre ellas, solo crea toda una oportunidad para probar diferentes transformaciones. Si volvemos a subir en nuestro código aquí verás que
tuve una transición en estos todo el tiempo. Tenía transición todo, y Si no tenía una transición sobre ellos, veamos cuál es el efecto. Se puede ver ahora cuando rondo que todo pasa de inmediato. No hay una flexibilización en marcha que solo da una mejor experiencia de usuario cuando tienes un poco de tiempo en el medio. Esto es jarring. eso usamos transiciones. Viniendo aquí a trucos de CSS, podemos ver cuáles son cada una de estas propiedades. Se puede ver que estaba escribiendo la propiedad taquigrafía para la transición. En realidad puedes escribirla propiedad de transición y luego darle su valor, duración de
transición, darle su valor, pero la mayoría de las veces, verás que es taquigrafía así. Repasemos cuáles son estos valores. La propiedad de transición es cualquier cosa que estás tratando de transitar. Si estás tratando de transitar tu color de fondo, entonces pondrías eso aquí. Tenía transición todo lo que estaría transitando cualquier cosa en la que hubiera puesto el efecto flotante, ya que estamos rondando. Entonces tenemos duración de transición. Cuánto tiempo quieres que dure, y aquí son 0.5 segundos. También puedes poner cinco milisegundos si quieres usar, o 500 milisegundos, si estás deseando usar milisegundos, entonces tenemos función de sincronización de transición, y esto se está relajando. Puedes usar las funciones de flexibilización incorporadas hay facilidad, facilidad lineal de entrada, facilidad de salida, y facilidad de entrada, creo, pero también puedes crear la tuya propia con algo llamado cubic-bezier. Echemos un vistazo a esos realmente rápido. Esto es sólo un creador de cubículo-bezier en línea. Están por todo el lugar. Simplemente puedes google cubic-bezier, y probablemente verás uno pop up. Trataré de recordar poner uno en nuestros recursos de clase, para que también puedas jugar con él ahí. En nuestro proyecto tuvimos facilidad de entrada, y si sigues éste de aquí abajo, verás qué hace la facilidad de entrada, simplemente
se ralentiza al principio y luego va rápido. Si querías crear tu propia facilidad, puedes mover estos pequeños mangos por ahí y luego ver el rosa por aquí arriba. Ya verás que se ralentiza más hacia el medio, que es lo que pasa cuando lo tienes así. Si lo sacamos todo el camino, verás que va realmente rápido. Si lo bajamos, simplemente
lo cambia de nuevo. Puedes jugar con esto. Se puede hacer facilidad de salida, se
puede hacer facilidad de entrada, puede ver cómo se ve si se hace una lineal o facilidad. Entonces solo copiarías este cubic-bezier, todo
este asunto aquí, y luego lo pondrías en, así que vamos a copiar. Podría ponerlo en lugar de la facilidad, lo pondría aquí mismo. Ahora tenemos nuestra facilidad personalizada. Sé que este fue un video un poco más largo, pero quería asegurarme de que realmente
repasé las transformaciones y transiciones con ustedes chicos porque vamos a estar aplicándolas ahora a nuestro proyecto y luego un poco más más tarde también cuando hacemos algunas de nuestras animaciones. Lleguemos a eso ahora con nuestro proyecto. Chicos, así que atengan un poco conmigo en este video, porque vamos a estar agregando mucho código. Ya le he agregado mucho a la mía, para que no nos llevemos mucho tiempo conmigo solo escribiendo el código, pero voy a repasarlo contigo, y no quiero que te preocupes demasiado porque sí tengo cada de éstos en un ejemplo que estará en nuestros recursos de clase. Va a haber una colección que va a tener cada video y donde comienza el código y donde termina el código. Entonces habrá un proyecto final por el que podrás
pasar y asegurarte de que todo tu código esté bien. Pero sigamos adelante y hablemos de transformar y traducir ahora mismo. En mi HTML, todo el camino después de mi última clavija, puedes ignorar la cadena por ahora, pero algo que estaré agregando en unos minutos. Después de mi última clavija, mi peg 6, agregué este puente clase div. El puente está justo aquí. Es lo que estarían pasando tus cuerdas en una guitarra. Cuando normalmente miras un instrumento, estos suelen estar ligeramente inclinados de una manera. No están perfectamente rectas así. Eso es lo que vamos a hacer aquí con nuestra transformación, y vamos a traducir ese puente sólo un poquito. En tu CSS, sigue adelante y agrega tu clase de puente. Vamos a hacer el fondo y es el color que es acento. Yo lo hice 13.9 rems. Hice la altura, 0.6 rems, posición, absoluta. Yo quería aquí el relativo absoluto a la base. Entonces hicimos top 25 por ciento, está bajando 25 por ciento y queda 22 por ciento. Entonces le di un poco de radio de borde de 10 píxeles. Ahora aquí vamos a sumar en nuestra transformación. Yo sí agregué prefijos de proveedor porque la transformación no es necesariamente compatible en todos los navegadores. Por solo una buena medida, ponemos los prefijos -webkit- en -ms- de proveedor. Si bajamos y
miramos, veremos que sí se ve muy leve. Es sólo 0.5 grados. No es mucho de rotación aquí. Ahora me doy cuenta de que seguí diciendo traducir. No estamos traduciendo, en realidad lo estamos girando. Giramos a 0.5 grados. Podríamos hacer una rotación más drástica. Podrías hacer dos grados negativos. Ya verás que eso es un poco más. Simplemente no pensé que eso se veía tan bonito. Nuevamente, preferencia personal. Si quieres que sea más arriba, quieres que se incline más, puedes hacerlo. Voy a volver a ponerlo 2.5 grados aquí. El siguiente código que vamos a estar agregando son nuestras cadenas que están en nuestro proyecto final. Cuando los estamos haciendo en nuestro proyecto ahora mismo, realidad no los verás porque vamos a tener el top zero por ciento. Eso es para que cuando realmente hacemos la animación, podamos hacerla crecer desde abajo, todo el camino desde abajo, hasta un montón entero. Ahí es donde obtienes esa animación de las cuerdas animando. Eso haremos en un poquito. Pero como estamos poniendo en este código, posible
que no veas las cadenas reales y eso está bien. Los veremos cuando agreguemos la animación. Si volvemos a nuestro HTML aquí, dentro de cada div peg, por favor ponga cadena de clase div. Entonces puedes agregar el retraso en este momento o puedes ignorarlo. Eso es lo que vamos a usar cuando estemos haciendo las animaciones. Si quieres agregarlo ahora, puedes o puedes esperar a que hagamos las animaciones en un poco. Pero vamos a tener seis cuerdas. Todos solo necesitan el mismo nombre de clase. No tenemos que hacer una cuerda 1,2 ni nada por el estilo ahora mismo. Sólo cuerda debajo de cada clavija aquí. Si quieres puntar cadena en tu CSS, puedes ignorar ese retraso por ahora. Vamos a llamarlo de nuevo acento de fondo. Le estamos dando un ancho muy poco, así que ancho 0.1 rem, va a ser top zero. Está todo el camino aquí abajo ahora mismo. Va a ser posición absoluta, izquierda 40 por ciento, y todo esto es relativo a nuestras clavijas, porque está dentro de nuestras clavijas. Está 40 por ciento por encima dentro de nuestra clavija. Entonces me di cuenta mientras estaba filmando esto que tengo z-index 3. Déjame mostrarte por qué hice eso. Por aquí en nuestro proyecto terminado, se
puede ver que las cuerdas parecen estar encima del puente, como si estuviera en una guitarra. Si me quitara el z-index 3, irían por debajo del puente así, que no es el efecto que yo quería. Pero entonces me di cuenta de que en realidad sólo podía usar el posicionamiento en el HTML para hacer esto. En realidad no necesitamos el índice z 3. Si queremos no agregar eso, tendrás que agregar eso cuando volvamos a nuestro CSS. Pero en tu HTML, si vas aquí y tomas el puente desde debajo de la última clavija y luego lo subes y lo pones debajo de la base del puente, ahora está debajo del índice z de las clavijas de todos modos, así que no tienen que poner un índice z en. Si algo viene primero, el puente, lo que sea siguiente estará encima de eso en tu HTML en el índice z, que no tengas que poner el z-index 3 por lo que estés haciendo con el índice, siempre y cuando tengas el puente antes las clavijas. Seguiremos adelante y sacaremos eso de nuestra cuerda aquí. Nuestra cuerda tendrá una sombra de caja. No lo verás ahora mismo, así que no necesitamos añadir eso ahora mismo. queremos poner un poco de caja-sombra en nuestro puente, para que no se vea tan plano. Si vuelves al puente que agregamos hace un poco, y luego hice box-shadow un pixel,
tres pixeles, cinco pixeles, y luego elegí de nuevo color pardo. Eso sólo hace que parezca que el puente realmente está saliendo de la base del puente aquí y no se ve tan plano. Entonces cuando nuestras cuerdas lo repasen y tengan la sombra de caja encima, también volverán a parecer que están saliendo de esto solo un poquito. Se ve más realista, se parece más a una guitarra. Sé que no repasamos demasiadas transformaciones en este video en particular, pero estaremos aplicando más en nuestras animaciones para nuestro avión en tan solo un poquito. En el siguiente video, vamos a repasar algunos SVG, y luego haremos animaciones CSS.
9. Uso de SVG: Hablemos de SVG. SVG son Gráficos Vectoriales Escalables. Se trata de un lenguaje de marcado basado en XML, y lo bueno de SVG es que se pueden buscar, indexar, guionar y comprimir, y se pueden crear en un editor de texto o en cualquier software de dibujo. A menudo hago el mío en Sketch o Affinity Designer. Otras personas lo hacen en Adobe, luego puedes exportarlos. Optimizo el mío normalmente con un programa llamado SVGOMG y luego los pongo en mis archivos. Hay algunas otras razones por las que podría usar SVG. SVG son geniales porque no importa lo grande que hagas tu foto o lo pequeño que hagas tu SVG, siempre
te vas a quedar bien. Siempre se ven crujientes. Nunca se ven borrosas como si las imágenes pudieran tener diferentes tamaños de pantalla y debido a que es una imagen basada en XML, puedes animar casi cualquier pieza de un SVG que puedas encontrar y agarrar del DOM. Aquí estoy animando con una biblioteca llamada GSAP. Nuestro proyecto, estará haciendo animaciones CSS con el SVG pero solo quiero mostrarte algunas de las cosas que podrías hacer con SVG. Aquí estoy animando todas estas diferentes piezas individuales. Cambian sus colores y luego lo traducen. Otra razón por la que podría usar un SVG, digamos como en mis imágenes CSS, es porque podría querer crear algunas formas geniales que son difíciles de hacer con CSS. Podría ser capaz de hacerlas con CSS, pero van a llevar mucho tiempo. Recuerda que soy mamá a tres pequeños así que no tengo mucho tiempo. Si quiero crear algo cool a veces lo haré con en SVG. Todo lo demás aquí es CSS. Todo está hecho con CSS, pero esto aquí mismo, sobre todo con estos ángulos, esto se hace con un SVG. Si has estado siguiendo junto con el proyecto y
sacas esto de nuestros recursos del curso. Tenemos un SVG que se comenta. Ahora podemos usar este SVG. Lo he envuelto en una clase llamada Jet. Adelante y empecemos a aplicar esto a nuestro proyecto. Justo antes de nuestro último div de cierre aquí, vamos a empezar a sumar en nuestros jets. Va a haber un jet, jet uno, jet, jet dos como tenemos con nuestras clavijas. Vamos a estar repitiendo el SVG seis veces. Déjame mostrarte aquí, ahora mismo solo tiré eso ahí dentro. Entonces tenemos jet, jet uno, jet, jet dos, jet, jet tres, y así sucesivamente hasta jet seis. Adelante y repite tus SVG dentro de una clase div seis veces y luego puedes agregar el jet, jet one, jet two, jet three, jet four, jet five, y jet six. Lo primero que vamos a hacer es usar sólo esa clase.jet que está en todos ellos y vamos a posicionar todo absoluto. Lo bonito de grabar esto es que puedo encontrar cosas que hice mal la primera vez y puedo sacarlas. Me acabo de dar cuenta de nuevo, y no necesito el índice z esta vez. Una vez que tomé el índice z de esa cadena, ya no lo necesitaba para poner el SVG encima de la cuerda. Podemos sacar eso. En realidad no necesitamos eso. Entonces voy a hacer otro basurero de código aquí, pero lo repasaremos. Ahora tenemos cada uno de nuestros jets, jet uno, jet dos, y así sucesivamente y luego los estamos posicionando todos a la izquierda. Izquierda 36.5 por ciento. Sé que esto se pone realmente preciso. Esto es mucho de mí simplemente entrando en las “Herramientas de desarrollo” e inspeccionando y luego moviéndolo hasta que siento que está alineado con las clavijas, y la cuerda y la cuerda viene con animación. Eso es todo lo que teníamos que ver con esto ahora mismo. En nuestro próximo video, en realidad vamos a empezar a animar. Animaremos nuestra cadena y animaremos nuestros SVG. Entonces lo estaremos envolviendo y así casi terminamos con el proyecto. Empecemos con el siguiente.
10. Animaciones en CSS: Está bien. Ahora vamos a hablar de animaciones CSS. Las animaciones CSS son muy divertidas. Pongámoslo aquí. En la animación hay muchas propiedades, pero son muy similares a las transiciones que pasamos antes. Tendríamos un nombre, esto es, éste se llama estiramiento. Tendríamos una duración de animación como la que teníamos en nuestras transiciones, así que ésta lo está haciendo a lo largo de un segundo. Función de temporización, la facilidad de salida de éste. Podríamos hacer el cubic-bezier que pasamos antes. Tenemos un retraso, así que si quisiera retrasar la animación, podría poner aquí un número mayor a 0. Tenemos una dirección de animación. Este está alternando ahora mismo, va de ida y vuelta. Podría simplemente moverlo hacia adelante, o simplemente podría moverlo hacia atrás. Tenemos infinito. Esto va una y otra vez, ese es nuestro recuento de iteración. Podría simplemente poner uno o dos y la animación sólo
pasaría cualquiera que sea el número que ponga aquí, 20, 30, lo que sea que quieras hacer. Nuestro modo de película de animación es, si tienes tu animación no corriendo. Aquí, si pongo 2 y se fue 1, 2, y luego pongo hacia adelante, empieza de vuelta donde empezó. Entonces tenemos corriendo. Ahora mismo se está ejecutando la animación. Estaba funcionando cuando cargamos la página. Si ponemos pausa, no
se ejecutaría la animación cuando cargamos la página o si a veces solo
podrías querer poner pausa porque estás intentando depurar un poco tu animación, por lo que puedes poner pausa para que la animación no sigue adelante y puedes cambiar las cosas a tu alrededor. Entonces, esta es la mano larga para la animación. Si quisiéramos hacer la taquigrafía de la animación, igual que nuestra transición, ¿cómo va la taquigrafía? Puedes hacerlo así. Sería animación, colon, y entonces tendríamos nuestro nombre de animación,
nuestra duración, nuestra función de flexibilización, nuestro retraso, nuestra dirección, nuestro recuento, si tiene un modo de relleno o no, y entonces lo tendríamos funcionando. Sólo escribir eso en realidad no te dará ninguna animación. Tienes que tener aquí tu marco clave. Agrega fotogramas clave y luego tenemos nuestro nombre de animación. Esto es lo que nos está diciendo cuál va a ser la animación. Aquí lo tenemos transformando, traducir X, 50 píxeles, el borde radio, y luego lo tenemos haciendo el color. De nuevo, estamos traduciendo la Y y luego el color otra vez. Se puede hacer desde y hacia. Esas pueden ser propiedades que tienes aquí, y así tendrías que hacerlo, y entonces tendrías un corchete y luego decir a dónde quieres que vaya. Al decir eso, me doy cuenta de que está mal, en realidad lo
harías de y luego a. Quieres empezar por donde comienzas y luego a dónde vas. O puedes hacer porcentajes,
como aquí, tenemos 0 por ciento, 50 por ciento, 100 por ciento. Se puede hacer 0, 10, 20, se
puede ir todo el camino arriba si se quiere, se
puede hacer 12 por ciento. No tienes que hacer 0, 50 y 100. Esto es sólo un ejemplo aquí. Entonces entre estos corchetes estás diciendo lo que estás queriendo cambiar las horas extras aquí. Más de entre 0 y 100 por ciento de un segundo, estamos queriendo cambiar estas cosas. Ahora te voy a mostrar algunos ejemplos de dónde podrías ver algunas animaciones CSS. Buen ejemplo es con un icono. Este es nuestro icono de menú y está animando la transformación que está sucediendo. Entonces tenemos aquí algunos cargadores que se están animando con CSS también. Todos estos se están animando con opacidad o transformación. Puedes ver que realmente no estás limitado, si esos son lo que estás usando. Se pueden hacer cosas como fondo, como tuvimos en nuestro primer ejemplo, pero a esas no se les pide rendimiento. Se sugiere que intentes simplemente animar tu opacidad y luego tus transformaciones. Pero puedes ver, hay mucho que puedes hacer con los de aquí. Este tipo de aquí es solo una animación divertida. Puedes ver que si estás haciendo algunas imágenes CSS, puedes darles vida después de haberlas creado con solo una animación. Lo siento, mi internet es un poco lento, así que esto está rezagado aquí, pero ya puedes ver la animación ahora. Simplemente es lindo, dándoles vida. Esto podría ser solo una imagen y no tener ninguna animación, seguirá siendo lindo, pero es bueno agregar la animación también. En el siguiente video, lo que vamos a estar animando son, nuestras cuerdas y nuestros aviones. Van a subir y va a haber un poco de retraso. Estas cuerdas vendrán primero que estas también y luego las externas junto con los aviones que las siguen. En este video, ahora vamos a sumar nuestra animación y vamos a simplemente terminar cualquier cosa donde tal vez nos hayamos perdido una sombra de caja que pudiéramos querer o cualquier lugar donde quisiéramos agregar un poco más de detalle, nosotros va a terminar eso en este video también. Nuestra animación, nuestra primera, he llamado cola. Son nuestras cuerdas, se supone que están imitando la cola de un avión mientras está volando. Como dije en el video anterior, si ya tienes donde está tu posición al principio donde quieres que vaya, no
necesitas poner el cero por ciento. Simplemente puedes ir directo al 100 por ciento porque yo quiero que pase de un lugar directo hasta el 100 por ciento. No tengo que hacer cero por ciento ni 50 por ciento ni nada de eso. Sé que esto parece un número loco, top negativo 3,800 por ciento, pero si piensas en nuestra cadena aquí abajo, es en relación a la clavija, así que si solo pongo top 100 por ciento, sólo iría hasta la parte superior de la pinza aquí. Si quiero subirlo todo el camino, tengo que darle una gran altura y tengo que darle este porcentaje superior realmente grande aquí, negativo 3,800 por ciento. Eso traerá las cuerdas hasta aquí. Ahora lo siguiente que estamos haciendo es bajar nuestros aviones. Estaban todo el camino hasta aquí, queremos que estén abajo arriba de las clavijas. Nosotros sí transformamos,
traducimos Y, sólo nos estamos moviendo en el eje y, 500 píxeles. Esto es otra vez algo que acabo de probar. Miré aquí a mi inspector y jugué por ahí con los números hasta que
vi que estaba por encima de las clavijas y 500 píxeles estaba por encima de las clavijas aquí. Para nuestra animación, sólo vamos a llevarla hasta cero atrás donde había estado. No necesitamos el 50 por ciento ni el cero por ciento. Simplemente vamos de abajo donde ponemos el avión todo el camino hacia arriba, para que podamos ir recto y sólo poner 100 por ciento, así que vamos a estar transformándolo, el Y, de nuevo transformar traducir Y, cero píxeles. Eso no significa moverlo cero píxeles, significa moverlo en el eje y desde los 500 píxeles que está en este momento, hasta cero píxeles. Si recuerdas lo dije, vamos a volver y vamos a añadir en nuestro HTML, un retraso si no lo hubieras hecho ya. En cada avión, queremos sumar un retraso para que suban en diferentes momentos. Plano 1, no tengo nada aquí, y entonces tengo retraso 2 para el segundo, retraso 3 para el tercero, retraso 4, retraso 5, y retraso 6. Al pasar por esto, en realidad quiero volver un segundo porque me di cuenta de que en realidad podemos hacer nuestro código un poco más seco. No hice esto en mi original, pero eso es lo positivo de volver a través de tu código, es que puedes ver donde puedes hacer mejoras. Donde acabamos de tener el avión, podemos quedarnos con eso. Entonces tenemos retraso 2, retraso 3, entonces podemos tener este también ser un retraso 3. Porque van a estar yendo al mismo ritmo, podemos hacer de éste el retraso 2, en lugar de retardo 5, porque va a estar yendo al mismo ritmo que la segunda cadena. Entonces nuestro último, no tenemos que tener nada porque ambos los aviones simplemente van últimos y no tienen ningún retraso en ellos. Lo que te estaba mostrando ahí, solo estaba cambiando en mi original, por
eso viste que la animación pasaba con las cuerdas también pero sigue
adelante y cambia eso en tu código para que pueda ser un poco más seco. No hace falta tener todos los diferentes retrasos como dije originalmente. Cuando vamos a ponerlo en nuestro CSS, también
podemos hacer que nuestro CSS sea un poco más seco también, lo cual es agradable. Lo primero que haremos es agregar la animación a nuestra clase de avión aquí. Nuestra animación, la llamábamos mosca. Entonces queremos ir 1.5 segundos, nos estamos relajando, luego 0.6 segundos es el retraso aquí. Está yendo hacia adelante, así que solo se está quedando arriba en la cima. Cuando vemos nuestra animación, vemos que todos ellos van al mismo tiempo ahora. Todavía no hay retraso. Nosotros queremos hacerlo para que parezca que estos dos van primero, luego estos dos, y luego el último. Adelante y hagamos eso aquí. Tenemos nuestro retraso 2, y este va a tener el mismo nombre de animación, 1.5 segundos es cuánto tiempo lo va a llevar, la duración y va a tener el ease-in. Pero esta vez sólo estamos esperando 0.5 segundos y luego haciendo hacia adelante de nuevo. En el retraso 3, que son estos dos, queremos que esos vayan aún más rápido, así que solo estamos teniendo un retraso de 0.4 segundos. Esas clases de retardo que
creamos, ahora podemos sumar esas también a nuestras cuerdas para que puedan corresponder con los planos que tenemos aquí. Nuestra primera no tendrá ninguna clase especial, y solo agregaremos animación a la clase de cuerdas que ya está ahí, y luego en nuestra segunda y nuestra quinta cuerdas bajo la peg 5, pondremos un delay 2 y luego debajo de nuestra peg 3 y peg 4 cuerdas, vamos a poner el retraso 3. Todos esos estarán yendo al mismo ritmo que los aviones. Echemos un vistazo a nuestro código aquí y sigamos adelante y agreguemos nuestra animación a nuestra clase de cuerdas. Aquí está nuestra clase de cuerdas, y vamos a añadir la cola de animación a esto. Queremos hacer 1.5 segundos, queremos relajarnos en 0.6 segundos y luego hacia adelante. Ahora también podemos agregar esa sombra de caja a nuestras cuerdas para que parezcan como si estuvieran un poco arriba. Eso sólo le da a las cuerdas un poco más de profundidad. Se ven un poco más gruesas ahora con la sombra también y se
ven como si estuvieran encima del puente aquí un poco mejor. Eso es todo. Ahora tenemos una imagen CSS terminada y animación. Desde aquí puedes cambiar esto para arriba si quieres. Puedes intentar jugar con los retrasos aquí, hacer que esto vaya más lento o más rápido, puedes rehacerlo por completo. He visto esta imagen donde en realidad es hojas creciendo. Es stocks y luego hojas saliendo y aves. Puedes sentirte libre de hacer eso y compartir eso con la clase, eso sería maravilloso.
11. Envoltura: Si llegaste tan lejos, eso significa que ahora tienes una imagen CSS impresionante y una animación. Espero que hayas disfrutado aprendiendo CSS a través de la codificación creativa. He disfrutado enseñándote todo este camino y si completaste el proyecto, o cambiaste el proyecto, o has hecho una imagen completamente diferente, me encantaría que compartieran en nuestros proyectos de clase, y también en los comentarios, avísame si puedo compartir en nuestra colección CodePen y también en mi cuenta de Twitter.
Christina Gorton, Teaching Code Through Creativity
