Crea 10 proyectos web creativos con HTML y CSS

1. Introducción: Bienvenido al curso Brand New donde podrás aprender sobre cómo construir proyectos web creativos y hermosos. Construiremos juntos diez proyectos web creativos diferentes con HTML y CSS puros. Si tienes algunos conocimientos básicos de estas tecnologías y aún tienes problemas para crear tus propios proyectos web, o si quieres subir de nivel tus habilidades de desarrollador y diseño, entonces vienes al lugar correcto. Creamos este curso con el fin de brindar a los estudiantes la mejor experiencia en HTML y CSS y permitirles construir hermosos proyectos creativos. Construiremos diez proyectos web diferentes, y estarán llenos de diseño de efectos modernos, bonitos y hermosos . Comenzaremos con proyectos relativamente simples, y también pasaremos por algunos avanzados. Podemos garantizarte que obtendrás una sólida experiencia y conocimiento en la creación de efectos realmente agradables y geniales después de completar este curso. Mediante este curso, podrás obtener las inspiraciones que te ayudarán a mejorar tus proyectos y personalizar tu portafolio. Dominando solo estas tecnologías centrales del desarrollo de Front y Bob, puedes crear temas increíbles y modernos y simplemente obtener más alto El curso será interesante y útil. Te recomendaría que intentes sacar el máximo provecho de este curso sin solo copiar y pegar el código Si estuviera en tus zapatos, definitivamente tomaría así. Así que únete a nosotros. 2. Proyectos: Hola y bienvenidos al curso. Espero que este sea tu curso adecuado y disfrutes de los proyectos que vamos a construir a lo largo del curso. Como ya sabrás, vamos a crear diez proyectos web creativos y hermosos diferentes. Todos esos proyectos se construirán en base a HTML y CSS. Quisiera mencionar que se debe tener un conocimiento básico de esas tecnologías para poder seguir las conferencias y no confundirse. Los proyectos estarán llenos de diferentes técnicas y trucos modernos. Podrás aprender sobre cómo crear bonitos y hermosos efectos y animaciones, que luego podrás utilizar como inspiración para desarrollar y personalizar tu propio portafolio. Como mencioné, construiremos diez proyectos. Son plantillas independientes por lo que no tienes que pasar por ellas en orden. Puedes construir cualquiera de los proyectos que quieras de lo menos. Depende absolutamente de ti. Bien, entonces ahora voy a repasar cada proyecto y describirlos brevemente. El primer proyecto que vamos a construir es un cuadrado saltador. Como pueden ver, tenemos aquí una plaza que está saltando sobre algo así como el ruber Cambia su forma y también esas garrapatas se están sesgando para crear el efecto natural A continuación vamos a crear esta landing page. Si recargamos la página, entonces verás la imagen de fondo a pantalla completa apareciendo con una bonita animación Una vez que se muestra, entonces cambia su forma así después de eso crearemos una animación de bola. Como pueden ver, tenemos aquí una bola animada que se mueve hacia arriba y hacia abajo. Se trata de golpear las casillas que vienen de los lados izquierdo y derecho. También, tenemos aquí un fondo en movimiento que hace una ilusión de que la pelota se mueve hacia arriba. Bien, a continuación tendremos la Tierra animada. Como veis, tenemos aquí dos partes distintas. Del lado izquierdo, parte oscura de la Tierra. En el lado derecho, hay una parte ligera. La Tierra misma está rotando de acuerdo a su eje Y. A continuación viene el flujo. La flor va a ser solo la regular con un par de pétalos y con tallo. Recuerda que lo crearemos solo con ML y CSS. Después de eso, crearemos una animación atómica. Como puedes ver, tenemos aquí un átomo típico, que quizás hayas visto en tu clase de química o quizás te hayas topado con uno de los populares logotipos del editor. Me refiero al átomo. Tenemos aquí un par de círculos con bolas que se mueven alrededor de la bola principal. Bien, el próximo proyecto va a ser un helicóptero. Tenemos aquí un efecto volador. El helicóptero sobrevuela la ciudad, las palas se mueven. Todo este helicóptero se crea con H, M y CSS. Y en realidad no es una imagen. Me gustaría mencionar que el efecto volador se ve mucho más realista cuando ejecutas el proyecto en el navegador. No se ve del todo realista en el video debido a los fotogramas. No te preocupes, se verá mucho mejor cuando lo construyas por tu cuenta. Bien, el siguiente proyecto va a ser la bicicleta que tenemos aquí, la bicicleta típica. Como puedes ver, las ruedas y los pedales se mueven, parece que la moto está montando El siguiente proyecto va a ser una sala de tres D. Tenemos aquí una mesa en la habitación con una carta. Una vez que hagamos clic en el botón, leemos letra, luego llegaremos a la mesa y la letra rotará. Después de eso será el último proyecto, que va a ser un swing de tres D. Tenemos aquí un par de columpios. Se están moviendo en tres espacios D. Además, puedes ver aquí la pelota moviéndose sobre esos columpios. Bien, eso es todo sobre los proyectos que vamos a construir a lo largo del curso. Espero que sean interesantes, los disfrutes y aprendas algunas cosas nuevas. Así que comencemos. 3. Configuración: Hola y bienvenidos al curso. Estamos encantados de tenerte aquí, y estamos seguros de que encontrarás este curso agradable. Antes de comenzar a sumergirnos en nuestro proyecto, primero preparemos nuestro entorno de trabajo. Si ya estás configurado y listo para escribir código, puedes saltarte este video y saltar directamente al proyecto. No obstante, si aún no estás preparado , eso está perfectamente bien. Te guiaremos a través de la configuración algunas herramientas esenciales a lo largo de este curso. Hay dos herramientas principales que necesitarás, Un navegador web moderno y un editor de texto. Para nuestro navegador web, estaré usando Google Chrome, pero también recomiendo Mozilla, Firefox. Probablemente ya tengas estos navegadores, pero repasemos rápidamente cómo descargarlos, si acaso para obtener Google Chrome, simplemente visita esta URL y descarga el navegador. El proceso de instalación es sencillo, por lo que no dedicaremos mucho tiempo a ello. Para Mozilla, Firefox, puedes obtenerlo desde esta URL. Ambos enlaces serán incluidos con esta conferencia para su conveniencia. Bien, ahora hablemos del editor de texto. Utilizaremos el código de Visual Studio que es uno de los mejores editores de texto disponibles en la actualidad. Sin embargo, puedes usar tu editor de texto preferido si tienes uno. Aún depende totalmente de ti. Te recomiendo dar código a Visual Studio a. Intenta descargar el código de Visual Studio, Visita este sitio web y selecciona la versión para tu sistema operativo, Windows, Mac o Linux. El proceso de instalación para el código de Visual Studio también es sencillo. No deberías encontrar ningún problema. Una vez que hayas instalado ambas herramientas, estarás listo para comenzar con el curso. Vamos a sumergirnos directamente. 4. Proyecto 1 - Saltar a cuadrado: Bien, estamos listos para comenzar a construir nuestros proyectos. En este video, vamos a crear el primer proyecto que es un cuadrado saltando. Como pueden ver, tenemos aquí una plaza que está saltando sobre algo así como el ruber Cambia la forma y también esos palos están sesgados para crear el efecto natural Bien, eso es todo sobre el proyecto, sigamos adelante y comencemos. He creado una nueva carpeta en el escritorio llamada jumping square, que ahora mismo está vacía. Vamos a abrir esta carpeta como código y crear nuestros archivos de trabajo. Me refiero al índice HTML y al estilo CSS. Luego abre el archivo HTML de punto índice y crea un documento Html básico. Coloquemos aquí un signo de exclamación y luego golpeemos Top o Enter Bien. Antes que nada, sigamos adelante y cambiemos el título. Va a estar saltando cuadrado. Después vincula el archivo CSS. Especificemos aquí el estilo SS. Bien, por último, vamos a ejecutar el proyecto al navegador usando servidor en vivo. Y luego colocar el editor y el navegador uno al lado del otro, así. Bien, al principio voy a crear el marcado H DML. Vamos a abrir la etiqueta profunda que va a ser el contenedor. Entonces voy a abrir otro tirón profundo que envolverá toda la animación Va a ser envoltorio Dentro del envoltorio, tendremos un par de elementos diferentes. El primero va a ser el ruber. Entonces tendremos dos palos. Vamos a usar clases stick y stick izquierdo. Después duplica este código y cambia de izquierda a derecha. Por último, vamos a crear otro tirón profundo que va a ser el cuadrado Bien, digamos sobre la marca H mal. Sigamos adelante y comencemos a escribir CSS. En primer lugar, voy a crear algunos estilos de reset y default para cada elemento. Vamos a seleccionarlos usando un asterisco. Voy a deshacerme del margen predeterminado y el relleno. Vamos a establecer ambas propiedades a cero. Además, voy a establecer el tamaño de la caja a la caja de borde. A lo largo de este proyecto, vamos a utilizar Ram como unidad de medida. En este momento, una Ram equivale a 16 píxeles. Por defecto, quiero convertir una Ram en diez píxeles. Que tenemos que disminuir el tamaño del teléfono del elemento HTML, y tenemos que hacerlo 62.5% Bien, a continuación quiero cuidar el contenedor Definamos que está dentro de la altura. El ancho va a ser del 100% En cuanto a la altura, voy a hacer que sea el 100% de la ventana gráfica Eso es sobre el contenedor ahora mismo. A continuación voy a personalizar el envoltorio. En primer lugar, definamos la anchura y la altura. El ancho va a ser de 100 Ram. En cuanto a la altura, voy a hacerla 80 Ram. También cambio el color de fondo. Hagámoslo 15 oh cinco. En realidad, el envoltorio se va a colocar en el centro de la página. Para eso, voy a usar CSS grid. Asignemos a la cuadrícula de visualización del contenedor luego coloquemos los artículos en el centro. Bien, sigamos adelante y continuemos personalizando el envoltorio. A continuación, voy a hacerlo un poco redondeado. Usemos radio de borde con valor cinco Ram y también crea algún efecto de sombra. Coloquemos dos Ram, dos Ram, seis Ram, y como color voy a usar 888. Bien, así que sentémonos sobre el envoltorio. Sigamos adelante y empecemos a trabajar en los palos. Vamos a seleccionarlos usando un nombre de clase común. En primer lugar, definamos dentro de la altura. El ancho va a ser tres Ram, entonces la altura será 40 Ram. Y también cambiar el color de fondo. Voy a usar aquí color llamado coral. Aquí tenemos los dos palos. Hagamos que sus mejores sitios sean ligeramente redondeados. Usa radio de borde con los valores, un Ram, uno Ram, esos son los sitios superiores. Y entonces necesitamos 0.0 Después de eso, voy a encargarme de las posiciones que necesitamos para que sus posiciones sean absolutas. En realidad, necesitaremos posición absoluta para cada elemento que se encuentre. Hijos del envoltorio. Así que voy a seleccionar cada desarrollo dentro la envoltura y luego establecer su posición en absoluto. Vamos a posicionar elementos de acuerdo con el envoltorio. Vamos a asignarle posición o relativo. Bien, después de eso, vamos a encargarnos de las posiciones de los palos. Ambos tendrán el cero inferior. A continuación, voy a definir las posiciones para los palos por separado. Seleccionemos el stick izquierdo y fijemos la posición izquierda en 15 Ram. Duplicemos este código, cambiemos de izquierda a derecha. También necesitamos aquí justo, con el mismo valor. Bien, además de eso, voy a agregar un poco de efecto de sombra a ambos palos. Empecemos con el stick izquierdo. Los valores serán 0.2 M, 0.5 Ram, y el color 555. En cuanto al stick derecho, necesitaremos un efecto de sombra similar, pero el primer valor será negativo. Bien, eso es lo de los palos. A continuación tomemos del ruber. Definamos con la altura. El ancho va a ser 67 Ram. En cuanto a la altura, va a ser 50 Ram. Además, voy a usar algún color de fondo temporal. Digamos rojo. Bien, a continuación tomemos aquí de la posición del ruber Definamos la posición izquierda. Va a ser 16.5 Ram como el fondo. Va a ser 24 Ram. Además de eso, voy a agregarle borde en la parte inferior y también una sombra. El fondo del borde va a ser un sólido Ram. Y el color va a ser Coral como la sombra de caja que necesitamos aquí. 01 Ram cero. Y el color va a ser DD. Bien, veamos sobre la goma. A continuación voy a encargarme de la plaza. Vamos a seleccionarlo y definir el ancho. Va a ser 14 Ram. Necesitamos la misma altura. Voy a usar aquí una propiedad llamada relación de aspecto con el valor uno. Entonces cambiemos el color de fondo, hazlo blanco. Además, voy a hacer el cuadrado redondeado usando radio de borde dos Ram. Bien, a continuación cambiemos la posición de la plaza. Vamos a definir let position, que sea 44 Ram. Además, voy a añadir a la plaza un poco de sombra. Vamos entre 00.2 Ram y el color 555. Bien, todo está listo para comenzar a trabajar en las animaciones. Empecemos con el ruber. A lo largo de la animación, cambiaremos el radio fronterizo y también bajaremos por el propio ruber Sigamos adelante y creamos CSSKeyframes con el Tendremos un par de pasos diferentes al 0% y 20% Cambiaremos la frontera, pero no vamos a mover el ruber Aquí necesitamos estos dos pasos. El radio fronterizo va a ser cero. Entonces necesitamos transformarnos. Traducir con dirección y y con valor cero. A continuación tendremos 50.60% En esos escalones, cambiaremos el radio del borde y moveremos el ruber El radio fronterizo va a ser 0035 Ram y 35 Ram. Nuevamente, en cuanto a la transformación, traduce Y, va a ser 23 Ram. Por último, los dos últimos pasos serán 65% y 100% Aquí cambiaremos el radio del borde y moveremos el elemento a su lugar predeterminado. El radio fronterizo va a ser cero. En cuanto al transform translate Y, va a ser cero también. Bien, entonces los fotogramas clave están listos y podemos ejecutar la animación. Necesitamos el nombre de la animación ruber anim. Entonces la duración va a ser de 2 segundos. Además, necesitamos que la animación sea infinita, entonces va a ser lineal. Como puedes ver, el ruber se mueve y la animación corre bien Podemos deshacernos de este temporal de nuevo en color desde aquí. Bien, a continuación tenemos que crear la animación para la plaza. Deberíamos igualar el movimiento de la plaza y el ruber. Vamos a crear nuevos marcos clave y llamémoslo anim cuadrado. De 0% a 20% deberíamos mover el cuadrado un poco hacia abajo al 0% Necesitamos transformar translate y con el valor de cinco frame. Entonces del 20% al 50% tenemos que volver a mover la plaza hacia abajo. El valor va a ser 40 Ram. En este caso cambiamos la velocidad. Después al 50.60% moveremos el elemento hacia abajo, pero con una velocidad diferente, el valor va a ser 64.5 Ram A continuación viene 62% donde tenemos que movernos cuadrados hacia arriba. El valor va a ser 45 Ram. Después de eso tendremos el 80% o tenemos que mover el elemento hacia arriba. Y también girado, el valor va a ser diez. También necesitamos agregar aquí rotar Z 90 grados. Por último, al 100% necesitamos movernos de nuevo, elemento hacia arriba y rotar. El valor va a ser cinco Ram. Bien, sentémonos sobre la animación cuadrada. Sigamos adelante y ejecutarlo. Necesitamos escuchar el nombre cuadrado Anim, luego la duración 2 segundos, luego infinito y lineal otra vez Como puedes ver, todo estuvo bien. Y lo único que tenemos que hacer es crear las animaciones para los sticks. Deberían sesgar una vez que el cuadrado golpea el ruber. Vamos a crear los fotogramas clave para el stick izquierdo. Voy a llamarlo palo izquierdo anim. Durante la animación, debemos rotar el stick según el eje z. Al 0.30% aún no rotaremos el elemento. Necesitamos transformar rotar con valor cero. Después al 50.65% rotaremos el palo ligeramente. El valor va a ser de dos grados. Finalmente al 80.100% volveremos a girar el stick a su posición predeterminada El valor va a ser cero. Bien, así que todo está listo. Vamos a ejecutar la animación aquí. El nombre dejó Stick animal. La duración va a ser de 2 segundos. Entonces otra vez, necesitamos infinito y lineal. Como se puede ver, el palo está girando. Pero eso no es lo que necesitamos aquí. Está rotando desde el centro porque el origen de la transformación se establece centro por defecto, necesitamos cambiarlo. El origen va a ser el centro inferior. Bien, como puedes ver ahora todo se ve bien. Vamos a ejecutar la animación para el stick derecho también. Voy a copiar este código y pegarlo abajo. Cambiemos el nombre que necesitamos, palo derecho anim. Además, necesitamos cambiar el valor de la función rotate Z. Debe ser menos dos grados. Copiemos la propiedad de animación y cambiemos el nombre. Bien, así como puede ver todo funciona a la perfección. Lo único que quiero hacer es asignarle al encabezado de desbordamiento de envoltorio porque los palos se están moviendo ligeramente fuera del rapero. Muy bien, eso es todo. Por último con este proyecto ya terminamos y espero que lo hayan disfrutado. Nos vemos la próxima vez. 5. Proyecto 2 - Página de destino: En este video, crearemos una landing page animada con HTML y CSS. Sigamos adelante y echemos un vistazo al proyecto terminado. Si recargamos la página, entonces verás la imagen de fondo a pantalla completa apareciendo con una bonita animación Una vez que se muestra, entonces cambia su forma así el proyecto va a ser pequeño, pero espero que sea interesante y lo disfrutes. Bien, comencemos. He creado una nueva carpeta en el escritorio llamada Lending Page Animation, en la que tengo otra carpeta para las imágenes. Sigamos adelante y abramos esta carpeta. Y el código VS luego crea nuestros archivos de trabajo para HTML y CSS. Necesitamos índice HTML y StyletSS. Luego abre el archivo HTML de punto índice y crea un documento HTML básico. Para eso tenemos que colocar aquí un signo de exclamación y luego presionar Tab o Enter Bien, antes que nada voy a cambiar el título. Va a ser una animación de landing page. Entonces vinculemos el archivo CSS. Voy a abrir etiqueta de enlace. Y luego tenemos que definir la ruta del archivo. Bien, finalmente, sigamos adelante y ejecutemos el proyecto al navegador con un servidor en vivo. Y luego colocar el editor y el navegador como. Entonces estamos listos para comenzar. En primer lugar, voy a crear un marcado HTML. Abramos la etiqueta con un contenedor de clase. Tendremos dos elementos diferentes dentro del contenedor. El primero va a ser el aterrizaje. En cuanto al segundo, lo voy a llamar PG. Bien, digamos sobre el marcado HTML. Sigamos adelante y comencemos a escribir algo de CSS. En primer lugar, voy a crear algunos estilos predeterminados y restablecer. Voy a seleccionar cada elemento usando un asterisco. Y luego me voy a deshacer del margen predeterminado y el relleno. Vamos a establecer ambas propiedades a cero. Después de eso, voy a encargarme del contenedor. Seleccionémoslo y definamos que está dentro de la altura. Ancho va a ser 100% En cuanto a la altura, voy a hacer que sea 100% de la parte vista. También cambia el color de fondo. Voy a usar valor RGB 184-16-5119 Bien, aquí tenemos el contenedor con Sentémonos sobre el contenedor, sigamos adelante y nos ocupemos del aterrizaje. Seleccionemos estos elementos. En primer lugar, definamos con la altura. Voy a establecer ambas propiedades al 100% Entonces definamos el fondo. En primer lugar, voy a usar la función de gradiente lineal. Voy a pasar aquí dos valores RGBA. Ambos serán colores negros con opacidad 0.8 Entonces voy a definir el camino de la imagen Necesitamos URL, luego las imágenes del nombre de la carpeta, y tenemos que seleccionar PG. Pg también. Vamos a adherirnos sin repetir. Además de eso, voy a definir el tamaño del fondo. Se va a cubrir. Entonces aquí tenemos el aterrizaje con una imagen de fondo a pantalla completa. Sigamos adelante y cuidemos el segundo elemento, que es un PG. Este elemento cubrirá el aterrizaje. Una vez que gobernemos en la página, entonces desaparecerá y se mostrará el aterrizaje. En primer lugar, definamos dentro de la altura. Voy a hacer las dos al 100% luego cambiar el color de fondo. Voy a usar aquí el mismo valor RGB que usamos para el contenedor. Bien, entonces aquí tenemos el fondo, pero ahora mismo se coloca debajo del rellano, y como dije, tenemos que colocarlo encima del rellano. Para eso voy a usar posiciones y la propiedad índice z. En primer lugar, voy a poner posición en absoluto. Entonces definamos las propiedades superior e izquierda. Voy a hacer que ambos sean cero. Entonces necesitamos la propiedad del índice z con algún valor mayor que cero. Digamos diez. Bien, como puedes ver, el fondo cubre el aterrizaje y ahora es el momento de crear la animación que necesitamos para desaparecer el fondo. Una vez que recarguemos la página, vamos a crear marcos CSS Voy a llamarlo BG anim. En general, tendremos tres pasos diferentes. Voy a disminuir la escala del elemento, pero según el eje y al 0.50% la escala va a ser una Entonces necesitamos transformar la escala y con el valor uno. Y luego de 50% a 100% disminuirá la escala a cero. Al 100% necesitamos transformar la escala Y cero, los fotogramas clave ya. Y ahora tenemos que aplicar estos mosaicos al elemento. Necesitamos propiedad de animación. Entonces al principio tenemos que definir el nombre de la animación. Va a ser G cualquiera, entonces necesitamos duración 2 segundos. Como puedes ver, los elementos se están animando. Pero tenemos aquí dos temas. El elemento está desapareciendo en el centro de la página. Ocurre porque por defecto, el origen de la transformación es el centro, y tenemos que cambiarlo para el segundo número. Una vez que el elemento desaparece, vuelve a aparecer. Tenemos que mantener la escala como cero al principio. Cambiemos el origen de la transformación. Tenemos que llegar a la cima. Ahora se soluciona un problema. En cuanto al segundo número, necesitamos agregar al valor de la propiedad de animación llamado forward. Mantiene todos los estilos que se definen en el último paso de la animación. Ahora como puedes ver, todo funciona bien. Ahora tenemos que encargarnos de la segunda animación. Tenemos que cambiar la forma del rellano. Voy a hacer eso usando una de las propiedades CSS llamadas Ruta de Clip. En realidad, puedo recomendar uno de los sitios web. Busquemos Ruta de Clip donde puedas jugar con diferentes formas. Puedes tomar el código CSS adecuado desde aquí. En nuestro caso, tenemos una forma con siete puntos diferentes. Para transformar una forma en otra con un efecto de transición, entonces ambas formas deben tener el mismo número de puntos. Tengo todo lo preparado, los valores. En realidad, se puede jugar con diferentes formas y valores. Depende de usted. Voy a crear marcos SK con el nombre aterrizando un general. Tendremos tres pasos diferentes al 0.50% tendrán la misma forma Vamos a usar ruta de clip con la función de polígono. Voy a pasar aquí los siguientes valores. El primer poli va a ser 50% cero, entonces tendremos 70% cero. El siguiente va a ser 100% cero. Después 100% dos veces cero, 100% entonces tendremos cero dos veces 30% y cero. En cuanto al 100% tenemos que cambiar estos valores. Necesitamos un polígono de trazado de clip. El primer punto va a ser 50% 4% Entonces tendremos 70% 10% luego 95.0 95, 87% después 5% y 105% 15% El último punto va a ser 31% 10% Bien, los fotogramas clave Vamos a ejecutar la animación. Definamos el nombre de los fotogramas clave prestando cualquiera la duración va a ser 4 segundos como el caso anterior que necesitamos aquí adelante. Si recargamos la página, entonces el elemento cambiará su forma suavemente En realidad, quiero añadir aquí una cosa más. Si echamos un vistazo al proyecto terminado, entonces veremos que la imagen de fondo se mueve hacia arriba sin problemas. Sigamos adelante y agreguemos este efecto también. Necesitamos definir la posición de fondo. Por defecto va a ser centro superior. Entonces tenemos que cambiarlo. En la animación, necesitamos fondo central. Bien, así que ahora todo funciona a la perfección, y con el proyecto, ya estamos hechos. Nos vemos la próxima vez. 6. Proyecto 3 - Animación de bola: En este video, vamos a estar creando un proyecto de animación CSS. El proyecto va a ser pequeño, pero creo que va a ser interesante y aprenderás algunas cosas nuevas sobre las animaciones CSS. Sigamos adelante y describamos el proyecto. Tenemos aquí una bola animada que se mueve hacia arriba y hacia abajo. Se trata de golpear las casillas que vienen de los lados izquierdo y derecho. También, tenemos aquí un fondo en movimiento que hace una ilusión de que la pelota se mueve hacia arriba. Bien, sentémonos sobre este proyecto. Sigamos adelante y empecemos a crearlo. Tengo una nueva carpeta en el escritorio llamada Ball animation, en la que tengo otra carpeta para la imagen de fondo. Sigamos adelante y abramos esta carpeta en código VS y luego creamos nuestros archivos de trabajo. Tendremos solo dos archivos, índice HTML estilo CSS. Vamos a abrir el archivo HTML de índice y crear un documento HTML básico. Voy a usar un signo de exclamación, y después tenemos que golpear Top o Enter Antes que nada, cambiemos el título. Voy a insertar tu animación de pelota. Después de eso, voy a vincular los archivos CSS open link tag y el insertador archivó un CSS Bien, finalmente, sigamos adelante y ejecutemos el proyecto al navegador. Para eso, voy a usar uno de los paquetes de código VS llamado Live Server. Antes de empezar a escribir el código, voy a colocar el editor y el navegador uno al lado del otro. Entonces al principio voy a crear un marcado HTML. Vamos a abrir la etiqueta con el envoltorio de clase. Incluirá todo el contenido dentro del envoltorio va a tener tres elementos profundos diferentes. Los dos primeros elementos profundos serán para las plazas. En cuanto al tercer elemento profundo, va a ser el balón. Es etiqueta abierta profunda con el bloque de clase, será el nombre de clase común. Pero además de eso, necesitamos clase individual, digamos bloquear uno. Duplicemos esta línea de código y cambiemos el nombre de la clase. Necesitamos el bloque dos. ¿Bien? Abramos otra etiqueta profunda con la bola de clase. Bien, sentémonos sobre el marcado HTML. Ahora mismo, aquí no hay nada visible porque todos los elementos están vacíos. Ahora es el momento de comenzar a escribir algo de CSS. En primer lugar, vamos a crear algunos estilos predeterminados y comunes para cada elemento. Seleccionemos un Aster Risk. Voy a deshacerme del default, margin, y padding. Vamos a establecer ambas propiedades a cero. Además, voy a volver a establecer el tamaño de la caja a la caja de borde, digamos sobre los estilos predeterminados a lo largo de este proyecto. Vamos a usar Ram como unidad de medida. Por defecto, un m es igual a 16 píxeles. Quiero que sean diez pixeles. Para ello, tenemos que disminuir tamaño por defecto del elemento HTML. Tenemos que fijarlo en 62.5% Bien. Después de eso, sigamos adelante y diseñemos los elementos del cuerpo. Voy a definir ancho y alto. Vamos a establecer con 200% En cuanto a la altura, voy a hacerla 100% de la ventana gráfica Vamos a establecerlo 200 VH. A continuación, voy a encargarme del envoltorio. Seleccionemos este elemento y definamos, voy a establecer con 270. Bien, voy a hacer el envoltorio cuadrado. Para eso, usaré una de las propiedades CSS llamadas relación de aspecto. Si lo pongo en uno, entonces significará que el envoltorio obtendrá una altura igual a 70 M. Pero si cambio el ancho, digamos a ATM, entonces la altura será ATM también. Creo que esta propiedad es muy conveniente. Sigamos adelante y definamos los antecedentes. Vamos a establecer la URL de la imagen de fondo, y necesitamos la ruta de la imagen. Tenemos carpeta llamada images y tenemos que seleccionar Gng. Como puedes ver aquí, tenemos el fondo ahora mismo, eso es todo sobre el envoltorio. Antes de seguir adelante, solo quiero colocar el envoltorio en el centro de la página. Para eso, usemos la cuadrícula CSS. Voy a configurar Display a grid. Y luego para colocar el elemento en el centro, necesitamos colocar los artículos en el centro. ¿Bien? Entonces como puedes ver, el elemento se coloca en el centro perfectamente. Sigamos adelante. Responder a trabajar en las casillas, me refiero a esos cuadrados que aparecen por los lados izquierdo y derecho, como sabes tienen un bloque de clase común. Vamos a seguir adelante y seleccionarlo y definir el ancho. Voy a establecer con a 18 Ram. Quiero que esos elementos sean cuadrados. Usemos nuevamente la relación de aspecto con el valor uno y también cambiemos el color de fondo. Voy a usar tu valor RGB. 501-18-4184, Bien. Aquí tenemos las plazas. Sigamos adelante y definamos las posiciones. Voy a poner la posición a absoluta. Entonces para posicionar el elemento de acuerdo con el envoltorio, pongamos la posición a un pariente. Después de eso, voy a definir las posiciones para las plazas por separado. Seleccionemos el bloque uno y definamos las propiedades superior y derecha. Voy a establecer la posición superior a 16 Ram. En cuanto a la posición correcta, va a ser 44 Ram. Entonces voy a duplicar este código. Cambiemos el nombre rápido. Necesitamos el bloque dos. La posición superior va a ser la misma que para la posición correcta. Voy a ponerla en ocho Ram. Bien, para que como veas, los elementos se posicionan correctamente. Ahora es el momento de cuidar el balón. Vamos a seleccionarlo. En primer lugar, voy a definir el ancho. Vamos a establecerlo en 12 Ram. Necesitamos la misma altura para el balón. Voy a usar de nuevo la propiedad llamada relación de aspecto con el valor uno. Y luego cambiemos el color de fondo. Vamos a usar RGB, 255-11-8118 Bien, Hagamos esto redondeado usando radio de borde con el valor 50% Entonces cuidemos su posición Voy a poner posición a absoluta. Entonces voy a definir las propiedades de la parte superior izquierda. La posición izquierda va a ser 29 Ram. En cuanto a la posición superior, va a ser la rampa 22. Bien, eso es todo sobre la pelota. Ahora ya podemos comenzar la parte divertida. Me refiero a las animaciones. Empecemos por los cuadrados. Echemos un vistazo al proyecto terminado. Como puedes ver, los elementos vienen de arriba en orden. Al principio baja el cuadrado izquierdo y luego el derecho. Además de eso, la opacidad de los cuadrados está cambiando durante la animación Bien, sigamos adelante y creamos los fotogramas clave CSS en los que tenemos que definir las reglas CSS que se aplicarán a los cuadrados durante la animación. Los marcos clave consistirán en diferentes pasos. Voy a llamarlo bloque uno m de 0% a 30% quiero decir en la parte inicial de la animación, el cuadrado debe moverse de arriba a abajo Y también tenemos que cambiar su opacidad al 0% voy a usar transform con la función translate y como el valor que voy a usar aquí, -38 Ram También, tenemos que definir aquí función con cero grados. Como dije, necesitamos que la opacidad sea 0.5 Bien, al 30% el elemento se mueve hacia abajo en su posición por defecto, aún sin rotación Transformamos traducir Y con cero y nuevamente giramos z con cero. Nuevamente, el siguiente paso va a ser del 40% En este paso, cuadrado seguirá siendo su posición, pero girará. Y además aumentaremos la opacidad al 40% necesitamos transformar traducir Y con cero, con el valor -180 grados También necesitamos aumentar la opacidad. Hagámoslo uno del 40% al siguiente paso, quiero decir al 45% necesitamos las mismas celdas porque durante este tiempo la pelota debería en la plaza y deberíamos esperarla. Coloquemos aquí y luego agreguemos aquí 45% Bien, después de eso la plaza debería moverse hacia abajo y desaparecer. El siguiente paso va a ser 55% En este paso, necesitamos transformar traducir Y con el valor 38 Ram. También, necesitamos la rotación. Yo giro C -180 grados. También necesitamos disminuir la opacidad. Vamos a ponerlo en 2.5 Bien, necesitamos que este cuadrado permanezca en esta posición. Al final de la animación, necesitamos los mismos estilos de 55% a 100% Agreguemos aquí 100% Bien, en realidad la animación está lista. Sigamos adelante y ejecutarlo para el primer cuadrado, necesitamos propiedad de animación, luego tenemos que definir el nombre de la animación. Quiero decir, arranca uno. El siguiente valor va a ser la duración 5 segundos. A continuación, necesitamos ejecutar la animación infinitamente. Entonces tenemos que insertar infinito. Voy a hacer la animación lineal. Como puedes ver, la animación se está ejecutando. Pero en realidad, eso no es lo que queremos ahora mismo. El elemento gira según el centro, ya que por defecto el origen de la transformación se establece en el centro. En nuestro caso, necesitamos hacerlo abajo a la derecha. Vamos a usar transformar origen y hacerlo abajo a la derecha. Ahora como puedes ver, el cuadrado se mueve correctamente. Una vez que se aleja del fondo, necesitamos que se oculte. Para eso podemos asignar desbordamiento oculto al wrapper. Entonces eso es sentarse sobre la primera plaza. Necesitamos lo mismo para el segundo también. En realidad voy a duplicar todos los fotogramas clave. Cambiemos el nombre que necesitamos bloquear a cualquiera siguiente. Tenemos que deshacernos de los signos menos de aquí, porque necesitamos rotar el segundo cuadrado en dirección opuesta. Además de eso, tenemos que cambiar el origen de la transformación. En este caso, necesitamos abajo a la izquierda. Por último, definamos la propiedad de animación. Tenemos que cambiar aquí el nombre de la animación. Va a ser bloque a cualquiera además de eso, necesitamos aquí un tiempo de retraso para la segunda plaza. Hagamos que sea 2.5 segundos en realidad, esa no es la versión final de esta animación. Haremos aquí un ligero cambio una vez que nos encarguemos de la animación del balón. Sigamos adelante y empecemos a trabajar en ello. Echemos un vistazo al proyecto terminado. Como puedes ver, la pelota se mueve hacia arriba y hacia abajo y además cambia ligeramente su forma. Sigamos adelante y creamos CSS, fotogramas clave para la pelota. Voy a llamarlo final de pelota. En la animación de pelota, tendremos cinco pasos diferentes de 0% a 45% La pelota se moverá hacia arriba y se encogerá ligeramente al 0% Voy a usar transformar, traducir Y con el valor -20 Ram. Además, para reducir ligeramente los elementos, voy a usar la función scale. Necesitamos que pases 0.8 como el valor de la dirección x, como parte de la dirección y, va a ser uno. Entonces del 45% al siguiente paso, la pelota debería moverse hacia abajo. Y también debemos cambiar la escala al 45% Necesitamos transformar, traducir Y con el valor de cero. También necesitamos cambiar la escala. Va a ser 0.9 y uno. El siguiente paso va a ser del 50% En ese escalón, la pelota debe moverse hacia abajo. Y también tenemos que encoger la pelota, pero en este caso verticalmente al 50% Necesitamos transformar, traducir y con valor dos Ram. La escala va a ser uno y 0.7 Después de eso tenemos que mover la pelota hacia arriba y encogerla horizontalmente al 60% voy a usar transformar traducir Y con el valor menos diez Ram. En cuanto a la báscula, va a ser el punto 9.1 Bien, después de eso necesitamos el último paso. Tenemos que mover la pelota hacia arriba y también encogerse horizontalmente al 100% Necesitamos transformar, traducir Y con el valor -20 Ram. En cuanto a la escala, va a ser punto 8.1 Bien, los fotogramas clave están listos. Sigamos adelante y apliquemos esas reglas al elemento. Vamos a usar la propiedad de animación. Necesitamos aquí el nombre de la bola de animación. Cualquiera entonces la duración va a ser de 2.5 segundos. Además, la animación debería correr infinitamente y va a ser lineal Como puedes ver, la pelota se está animando, pero no golpea las casillas Tenemos que igualar los tiempos aquí. Voy a añadir un poco de tiempo de retardo a la animación. Va a ser 0.9 segundos. Ahora, como pueden ver, la pelota toca los cuadrados. De un vistazo, todo funciona bien. Pero si recargamos la página, bola y el cuadrado derecho se mostrarán como en una condición de poste, lo que no se ve bien Necesitamos hacer dinámica toda la animación sin importar si recargamos la página o no Para ello, podemos manipular el tiempo de retraso. En general, si usamos los valores negativos, entonces la propiedad de delay de animación acelerará la animación. Echemos un vistazo al proyecto terminado. Si recargamos la página, verás el cuadrado derecho alejándose del fondo, y también la pelota moviéndose hacia arriba desde una posición difícil Tenemos que cambiar los tiempos de retraso para el segundo cuadrado. Va a ser -2.5 segundos. Ahora si recargamos la página, entonces veremos el cuadrado derecho alejándose del envoltorio En cuanto a la pelota, si agregamos aquí el signo menos, entonces la pelota se estará animando una vez que desplieguemos la página Pero ahora como puedes ver, no golpea las casillas. Voy a aumentar el tiempo de retraso. Vamos a establecerlo en 1.5 segundos. Bien, así que eso es todo respecto a las animaciones de la pelota y los cuadrados. Ahora tenemos que cuidar el fondo Antes de empezar a trabajar en la animación, voy a agregar un par de estilos de fondo al wrapper. Necesitamos definir el tamaño del fondo. Esta propiedad tomará dos valores. El ancho del fondo será automático. En cuanto a la altura, la voy a poner en 70 m. Para que quede claro, voy a agregar un borde al envoltorio. Hagámoslo uno Ram, sólido y rojo. Además de eso, voy a definir repetición de fondo con valor no repeat. Ahora bien, si cambio los valores del tamaño del fondo, digamos a 50 Ram y 60 Ram, verás que se cambia el ancho y alto del fondo. Así es como funciona la propiedad de tamaño de fondo. Volvamos aquí. 0.70 Ram. Usamos aquí porque mantenemos la calidad de la imagen, no se encoge. Ahora necesitamos animar el fondo durante la animación Tenemos que mover todo el fondo hacia abajo. Y lo voy a hacer usando la propiedad llamada posición de fondo. En primer lugar, vamos a crear fotogramas clave con el nombre BG al 0% Voy a establecer la posición de fondo en centro y cero. En cuanto al 100% la posición de fondo va a ser central y 70 redondear ya los fotogramas clave. Apliquemos estas reglas al envoltorio. Utilice la propiedad de animación con el nombre de fondo Anim. Entonces la duración va a ser de 5 segundos. También necesitamos aquí infinito y lineal. Ahora como pueden ver, el fondo se mueve hacia abajo. Una vez que se mueve, entonces desaparece. Y no necesitamos eso, necesitamos repetir el fondo, pero en este caso, según el eje y, la propiedad background repeat va a ser repetida Y. Ahora como puedes ver, todo funciona perfectamente. Deshagámonos de esta frontera desde aquí. Además, quiero añadir una cosita a las plazas. Vamos a agregarles un poco de efecto de sombra. Usemos sombra de caja con los valores 0.2 m, luego 0.4 como color. Voy a usar AA. En realidad, la sombra va a estar dentro del elemento que necesitamos aquí en St, quiero la sombra alrededor de la plaza. También necesitamos aquí otros valores. -0.2 Ram, -0.2 Ram, 0.4 Ram, luego el color AA, y nuevamente Bien, finalmente con este proyecto, ya terminamos. Espero que haya sido interesante y lo hayan disfrutado. Nos vemos la próxima vez. 7. Proyecto 4 - Tierra animada: En este video, vamos a crear una Tierra animada, la cual se ve aquí en la página. Construiremos este proyecto usando TML y CSS puros. Como pueden ver, tenemos aquí dos partes distintas. Lado izquierdo, tenemos la parte oscura de la Tierra. En el lado derecho, hay una parte ligera de la Tierra. La Tierra misma está rotando de acuerdo a su eje Y. Bien, veamos sobre este proyecto. Sigamos adelante y comencemos. He creado una nueva carpeta en el escritorio llamada Tierra Animada, en la que tenemos otra carpeta para las imágenes. Sigamos adelante y abramos esta carpeta en código VS, y luego creamos nuestros archivos de trabajo para HTML y para CSS. Bien, vamos a abrir el archivo HTML indexado y crear un documento HTML básico Para eso, tenemos que colocar aquí un signo de exclamación y luego golpear Top o Enter . Aquí vamos. En primer lugar, voy a cambiar el título. Va a ser la Tierra animada. Luego vamos a vincular el archivo CSS, abrir la etiqueta de enlace y especificar el nombre del archivo. Bien, sigamos adelante y ejecutemos el proyecto al navegador usando servidor en vivo. Después coloca el editor y el navegador uno al lado del otro. Estamos listos para comenzar a escribir el código. Al principio, voy a crear el marcado HTML. Vamos a abrir una etiqueta p con un envoltorio de clase. Dentro del envoltorio, tendremos dos elementos distintos, me refiero a la parte y la parte nocturna. Vamos a abrir deep tack con las clases Tierra y luego duplicar esta línea de código y cambiar el nombre de la clase lo necesitamos Bien, veamos sobre el marcado HDML. Sigamos adelante y respondamos para escribir algunos CSS. En primer lugar, voy a crear algunos estilos de reset para cada elemento. adelante y seleccionemos el asterisco y deshagamos el margen predeterminado y el relleno de cada elemento Voy a poner ambas propiedades a cero a lo largo de este proyecto. Voy a usar Ram como unidad de medida. Ahora mismo, una Ram equivale a 16 píxeles, y quiero que sea igual a diez píxeles. Para ello, tenemos que disminuir el tamaño de fuente de los elementos Html. Hagámoslo 62.5% Bien, sigamos adelante y personalicemos los elementos del cuerpo Voy a definir con altura. El ancho va a ser del 100% En cuanto a la altura, voy a hacer que sea el 100% de la ventana gráfica Ahora es el momento de cuidar el envoltorio. Sigamos adelante y seleccionemos estos elementos. En primer lugar, definir su ancho. Voy a ponerla en tranvía. Quiero la misma altura para el envoltorio, ATM. Para eso podemos usar una de las propiedades del CS llamada relación de aspecto. Si lo colocamos en uno, entonces significará que la altura del envoltorio será tranvía. Pero si cambiamos el ancho, entonces la altura se cambiará en consecuencia. Bien. A continuación voy a establecer el color de fondo. Vamos a usar algunos antecedentes temporales. Voy a usar BB y también hacer que el elemento sea redondeado usando radio de borde 50% ¿bien? Después de eso voy a colocar el envoltorio en el centro perfectamente. Y lo voy a hacer usando posiciones. Necesitamos posición absoluta. Entonces tenemos que definir propiedades superiores e izquierdas. Voy a establecer ambas posiciones al 50% Entonces para colocar el elemento en el centro perfectamente, necesitamos usar transform con función translate. Y tenemos que pasar aquí -50% para las direcciones x e y. Bien, así que eso es todo. En cuanto a la envoltura, se coloca en el centro. Ahora voy a cuidar de la Tierra. Como saben, tenemos dos elementos diferentes, decir, las partes de día y de noche. Seleccionemos ambos elementos usando el nombre de clase común. En primer lugar, voy a definir el ancho. Hagámoslo 100% En cuanto a la altura, voy a utilizar de nuevo la propiedad llamada relación de aspecto con el valor uno. Después establece la posición en absoluto. También hacer que el elemento sea redondeado usando radio de borde 50% Ahora ambos elementos se colocan uno encima del otro en ese círculo. Ahora podemos definir los fondos para ambas partes. Seleccionemos el primero, definamos imagen de fondo. Definamos el camino de la imagen. Tenemos la carpeta llamada images, y tenemos que seleccionar Earth, JPG. Aquí tenemos la imagen de fondo. Esta es la parte ligera. Sigamos adelante y hagamos lo mismo para la parte también. En realidad, voy a duplicar este código. Cambiemos el nombre de la clase que necesitamos aquí. Y también cambiar el nombre de la imagen que necesitamos también. Ahora vemos aquí la imagen de fondo de la pieza. Ocurre porque ambos elementos tienen posición absoluta y la parte del día terminó por detrás de la noche uno. Lo siguiente que vamos a hacer es cortar la media parte de la noche. Para hacer eso, voy a usar una de las propiedades CSS llamada ruta de clip. Voy a insertar aquí los valores y después te mostraré donde puedes encontrar la información sobre esta propiedad. Necesitamos polígono, los valores serán los siguientes. Necesitamos cero dos veces, luego 50% cero, luego 50% 100% luego 0.100% Como puedes ver, se corta la media parte del Sigamos adelante y busquemos Clip Path en Google. Este es el sitio web donde puedes jugar con diferentes formas. Una vez que obtenga su forma necesaria, simplemente puede tomar el código CSS adecuado desde aquí y usarlo en su proyecto. Este es el sitio web muy útil y puedes visitarlo. Bien, sigamos adelante y empecemos a trabajar en la animación. Voy a crear fotogramas clave CSS con el nombre Tierra. Cualquiera vamos a manipular las posiciones de fondo. Tendremos solo dos pasos, de 0% a 100% Cambiaremos la posición del fondo exactamente por la misma distancia que tiene la imagen como ancho. Al 0% la posición de fondo va a ser cero y centro. Entonces al 100% la posición de fondo va a ser 192 m es el ancho de la imagen y luego el centro. Bien, sigamos adelante y apliquemos esos mosaicos a los elementos. Ambas partes tendrán la misma animación. Necesitamos aquí el nombre de la animación seguido de la duración, que va a ser de 25 segundos. Entonces quiero que la animación se ejecute infinitamente. Necesitamos infinito, y además la animación va a ser lineal, ¿bien? Entonces, como puedes ver, la animación funciona a la perfección y tenemos un bonito efecto de día y noche. Antes de terminar este video, voy a agregar algunas sombras a la tierra. Para eso, voy a usar antes pseudo elemento. Seleccionemos el envoltorio antes del elemento. En realidad, voy a darle a este elemento exactamente la misma forma que tiene el envoltorio. Definamos el contenido. Va a estar vacío. Entonces voy a poner posición en absoluto. También, voy a definir dentro de las alturas, hagamos las dos al 100% y luego usemos algún color de fondo temporal, BB. Como pueden ver, el elemento terminó detrás del envoltorio, No necesitamos eso, tenemos colocarlo frente a la Tierra. Para eso, voy a usar la propiedad índice Z y también hacer que el elemento sea redondeado. La propiedad del índice z va a ser diez. Aquí necesitamos un valor mayor que cero. cuanto al radio fronterizo, lo voy a poner en 50% Bien, vamos a deshacernos de este trasfondo de aquí. También, voy a deshacerme del fondo para el envoltorio también. Tendremos un par de sombras distintas, la que estará alrededor de la Tierra. Además de eso, tendremos dos sombras diferentes para las partes de noche y día. Usemos sombra de caja con los valores menos uno Ram, menos uno Ram, dos Ram, y el color cuatro. Entonces necesitamos una Ram dos veces dos Ram, y del mismo color. Ahora tenemos la sombra alrededor de la Tierra. En cuanto a las sombras dentro del elemento, vamos a insertar aquí. Inset ten M05 Ram y el color negro. Entonces necesitamos de nuevo insertarse menos 1m02m como el color. Voy a usar el 933. Bien, así que eso es todo. Finalmente se hace el proyecto. Espero que haya sido interesante y lo hayan disfrutado. Nos vemos la próxima vez. 8. Proyecto 5 - Flor: En este video, vamos a crear la flor con HTML y CSS puros. Aquí tenemos la versión terminada del proyecto donde se puede ver una flor regular con un par de pétalos y con un tallo. Bien, sigamos adelante y comencemos a crear este proyecto. He preparado una nueva carpeta en el escritorio llamada flor, que ahora mismo está vacía. Sigamos adelante y abramos esta carpeta en código VS y creamos nuestros archivos de trabajo para HTML y CSS. A continuación, abra el archivo HTML de índice y cree un documento HTML básico. Para eso necesitamos colocar aquí un signo de exclamación y luego golpear Top o Enter Bien, al principio, sigamos adelante y cambiemos el título. Va a ser flor, entonces voy a vincular el archivo CSS. Vamos a abrir enlace y especificar aquí el nombre del archivo CSS. Bien, finalmente, voy a ejecutar el proyecto al navegador usando un servidor en vivo. Además, coloquemos el editor y el navegador uno al lado del otro. Bien, sigamos adelante y comencemos a crear una marca HDML. Voy a abrir un tirón profundo con la flor de clase. Incluirá todo el contenido. A continuación, necesitamos otro tirón profundo, que envolverá los pétalos y también el círculo que se coloca en medio de la flor En general, tendremos 12 pétalos. Vamos a crearlos. Además de eso, necesitamos el círculo. Abramos, remolcador profundo con el círculo de clase. También, necesitamos otro tirón profundo fuera de los pétalos, que va a ser un tallo Bien, sentémonos sobre el marcado H mel. Sigamos adelante y comencemos a escribir CSS. En primer lugar, voy a crear algunos estilos de reset y default para cada elemento. Vamos a seleccionarlos usando un asterisco. Entonces deshazte del margen predeterminado y el relleno. Vamos a establecer ambas propiedades a cero. Además, voy a establecer el tamaño de la caja a la caja de borde. Bien, A lo largo del proyecto, voy a usar Ram como unidad de medida. Por defecto, una M equivale a 16 píxeles, y quiero convertir una M en diez píxeles. Para ello, tenemos que disminuir el tamaño de falla del elemento HM. Tenemos que hacerlo 62.5% este momento es el momento de comenzar a personalizar el envoltorio. Elemento Deve Estoy en la flor, definamos la altura. Voy a establecer al 100% En cuanto a la altura, va a ser el 100% de la ventana gráfica También cambia el color de fondo. Voy a usar aquí, valor RGB 236,232.226 Bien, eso es todo sobre la flor por ahora, sigamos adelante y cuidemos Estoy en el envoltorio, definamos con altura. Voy a establecer ambas propiedades en para dos Ram. Además, voy a usar aquí algún color de fondo temporal. Digamos verde. En realidad voy a colocar el elemento en el centro. Y para eso podemos usar los libros de lino de CS. Usemos display Flax, luego justifique el centro de contenido y un centro de líneas de artículos Bien. A continuación voy a seleccionar el pádel en sí. Definamos su dentro de la altura. Voy a ponerlos a los dos en 15 Carneros. Vamos a usar aquí algún color de fondo temporal. Digamos amarillo. Después de eso, voy a definir la posición de los pétalos. Vamos a establecerlo en absoluto. Necesitamos posicionar los elementos acuerdo con los elementos aparentes. Necesitamos posicionar relativo para los pétalos. Entonces definamos las propiedades superior e izquierda. Voy a ponerlos a los dos a cinco carnero. Bien, ahora vemos aquí solo un pétalo, pero todos los pétalos se colocan uno encima del otro. Y por eso vemos aquí solo uno de ellos. Después de eso, quiero cambiar la forma de los pétalos usando el radio del borde. Voy a hacer que el elemento sea redondeado por todos los lados excepto en la esquina inferior derecha. Vamos a establecer el radio del borde a 50% luego otra vez 50% luego cero, luego 50% Bien, después de eso, voy a sesgar los pétalos de acuerdo a ambas direcciones Quiero decir X e Y transforman sesgo. Los valores van a ser de 23 grados en ambas direcciones. Como se puede ver, los pétalos están sesgadas. Pero además de eso, vamos a necesitar girarlos si usamos aquí rotar la función con digamos 30 grados. Cambiará la forma del pétalo. Y no necesitamos eso. No necesitamos usar esas dos funciones simultáneamente. Para evitar este problema, voy a usar un pseudo elemento antes Crearemos pétalos con antes del elemento y los sesgaremos En cuanto a la función rotate, usaremos con elementos profundos. Seleccionemos pétalo con elemento antes. En primer lugar, definamos el contenido para que quede vacío. Entonces necesitamos definir ancho y alto. Voy a establecer ambas propiedades en la posición de conjunto de Al 100% absoluto y luego crear fondo. Usa tu función de degradado lineal con dos colores diferentes, quiero decir F y F. A continuación, voy a agarrar esos estilos de aquí y asignarlos al antes, al elemento. Además, deshagámonos de esos colores de fondo temporales. Todo bien. Después de eso voy a crear un pequeño efecto de sombra. Usemos sombra de caja con los valores 0.3 m, tres veces, y luego el color DD. Bien, Entonces los pétalos están personalizados, y ahora tenemos que rotarlos. Necesitamos seleccionar cada pétalo por separado y usar la función de rotar. Sigamos adelante y seleccionemos el primero. En realidad, no necesitamos rotar el primer pétalo. Pero de todos modos, voy a definir la función de rotar para ello. El valor va a ser cero. Duplicemos este código. Voy a rotar el segundo pétalo 30 grados. Como puedes ver, el segundo pétalo se gira, pero se gira desde el centro. Ocurre porque por defecto el origen de la transformación se establece en el centro. Y tenemos que cambiar, en realidad necesitamos cambiarlo por pedal en sí mismo y también para el elemento antes do también. El origen de la transformación va a ser abajo a la derecha. Bien, El problema está arreglado. Sigamos adelante y definamos una función girada para el resto de los pedales. La diferencia entre los valores de la función girada va a ser de 30 grados. Para el tercer pedal, necesitamos 60 grados. Entonces el siguiente va a ser de 90 grados. Para el quinto pedal, necesitamos 120 grados. Entonces el siguiente va a ser de 150 grados. Entonces para el séptimo pedal, va a ser de 180 grados. A continuación tendremos 210 grados. Para el noveno pedal, va a ser de 240 grados. Entonces tendremos 270 grados. Para el undécimo pedal, necesitamos 300 grados. Para el último elemento, va a ser de 330 grados. Todo bien. Ahora, como pueden ver, tenemos aquí un resultado mucho mejor. A continuación, te voy a llevar del círculo. Se va a colocar en el centro de la flor. Seleccionémoslo y definamos que está dentro de la altura. Voy a hacer los dos a cinco Ram. Entonces el color va a ser blanco. Cambiemos la posición, hagámosla absoluta. Para poder detectar el elemento, voy a establecer propiedades superiores e izquierdas, ambas a 50% así que necesitamos transformar Translate con -50% otra vez -50% Entonces voy a establecer el borde, va a ser 0.1 Ram sólido Y el color DDD también hacen que el elemento redondeado usando radio de borde 50% Bien, sea redondeado usando radio de borde 50% Bien, vamos sobre el círculo y antes de que nos encarguemos del tallo, voy a crear un ambiente de tres D. Y quiero rotar ligeramente la flor en tres espacios D. Para crear un entorno de tres D, necesitamos usar la propiedad llamada perspectiva. Vamos a establecerlo en 100 Ram. Entonces vamos a rotar la flor. Tenemos que transformarnos. Girar X con un valor de 40 grados. Bien, así que ahora podemos seguir adelante y personalizar el tallo. Vamos a seleccionarlo, y antes que nada, definamos esta posición. Hacer lo absoluto, Entonces necesitamos definir el ancho. Altura, El ancho va a ser dos. En cuanto a la altura, voy a hacerla 60 m. Vamos a definir el fondo. Vamos a utilizar la función de gradación lineal. La dirección de la transición de color va a ser de izquierda a derecha. Voy a usar aquí tres colores. El primero va a ser RGB, 14923592. Entonces usaremos solo el color verde. En cuanto a la tercera, necesitamos usar aquí la primera función RGB con los mismos valores. Bien, entonces aquí tenemos el tallo, pero como pueden ver, necesitamos cambiar la posición. Hagámoslo usando transformar, traducir la función Y, establecerla en 50% También además de eso, voy a rotar el tallo según el eje z siete grados. El tallo es girado. Pero nuevamente, necesitamos cambiar el origen de la transformación. En este caso, tenemos que hacerlo top. Vamos a establecer transformar el origen en la parte superior. Por último, necesitamos colocar el tallo detrás de los pétalos. Para eso, usemos la propiedad de índice z con menos uno. Bien, en realidad todo está hecho. Puedes agregar aquí algunos efectos o animaciones, y puedes desarrollar este proyecto por tu cuenta. Nos vemos la próxima vez. 9. Proyecto 6 - Animación con Atom: En este video, vamos a crear animación atom con HTML y CSS. El proyecto va a ser pequeño, pero creo que va a ser divertido e interesante. Aprenderás sobre algunos trucos y técnicas nuevas de CSS. Como puedes ver, tenemos aquí un átomo típico, que quizás hayas visto en tu clase de química o quizás te hayas topado con uno de los populares logotipos del editor. Me refiero al átomo. Tenemos aquí un par de círculos con bolas que se mueven alrededor de la bola principal. Sentémonos sobre el proyecto, sigamos adelante y empecemos a trabajar en él. He creado una nueva carpeta en el escritorio llamada Atom. Vamos a abrirlo en código VS y crear nuestros archivos de trabajo para HTML CSS. A continuación, abra el archivo HTML de índice y cree un documento HTML básico. Para eso, voy a colocar aquí un signo de exclamación y luego presionar Top o Enter En primer lugar, voy a cambiar el título. Va a ser Atom. Entonces vinculemos el archivo CSS. Vamos a abrir etiqueta de enlace, especifique aquí la ruta del archivo. Por último, voy a ejecutar el proyecto al navegador usando servidor en vivo. Coloquemos el editor y el navegador uno al lado del otro, así y comencemos. En primer lugar, voy a crear un marcado HTML. Vamos a abrir etiqueta profunda, que va a ser la envoltura. En general. Tendremos tres círculos y cada uno de los círculos tendrá una bola. Vamos a abrir, tirar profundo del círculo de clase, rodear uno, luego abrir otra etiqueta profunda Dentro del círculo, te necesitamos bola de clase uno. ¿Bien? Duplicemos este código y cambiemos los nombres de las clases. Necesitamos círculos. Me refiero al círculo dos y al círculo tres y también a la bola dos y a la bola tres. Bien, sentémonos sobre la marca HD. Ahora podemos empezar a escribir algunos CSS. En primer lugar, voy a crear algunos estilos de reset y default para cada elemento. Usemos un riesgo Aster. Voy a deshacerme del margen predeterminado y el relleno. Hagamos que ambos sean cero. Además, voy a establecer el tamaño de la caja a la caja de borde. A lo largo de este proyecto, vamos a utilizar Ram como unidad de medida. En este momento, una Ram equivale a 16 píxeles. Debido a que el tamaño de fuente del HTML es igual a 16 píxeles, quiero convertir una Ram en diez píxeles. Y para eso tenemos que disminuir el tamaño de fuente del elemento HTML. Tenemos que hacerlo 62.5% Bien, sigamos adelante respuesta para personalizar los elementos del cuerpo Vamos a seleccionarlo y definirlo con altura. Voy a establecer con el 100% En cuanto a la altura, va a ser el 100% de la ventana gráfica Además, cambiemos el color de fondo. Usemos tu valor RGB, 46518. Bien. A continuación voy a seleccionar el envoltorio, definir su ancho. Va a ser de 60 m. Entonces necesitamos la misma altura. Voy a usar una de las propiedades llamadas relación de aspecto. Con el valor uno quiere decir que si aumentamos el ancho de la envoltura, entonces también se incrementará la altura. Además, usemos un poco de color empacador temporal, digamos CC. Aquí tenemos el envoltorio, voy a colocarlo en el centro de la página. Para eso, usemos la cuadrícula CSS. Necesitamos rejilla de exhibición, colocar artículos en el centro. Bien, después de eso, voy a crear los círculos. Vamos a seleccionarlos usando el nombre de clase común. En primer lugar, definamos la posición. Voy a hacerlo absoluto. Vamos 40 Ram, necesitamos la misma altura. Vamos a utilizar de nuevo la relación de aspecto con el valor uno. Entonces voy a usar border ahora mismo con mayor ancho, digamos 0.5 Ram. Entonces este estilo va a ser rayado. Ese es el color. Usemos cero. Además, haz que el elemento sea redondeado usando radio de borde 50% Bien, aquí tenemos los círculos. Se colocan uno encima del otro, por eso vemos aquí solo un círculo. En realidad, ya no necesitamos este trasfondo temporal, vamos a deshacernos de él y luego coloquemos estos círculos. El centro de la envoltura. Usando de nuevo, la cuadrícula de C. Necesitamos la rejilla de exhibición y el centro de los artículos del lugar. Bien, ahora tenemos que colocar cada círculo en esta posición. Quiero decir, deberíamos rotarlas. Necesitamos colocarlos en un ambiente de tres D. Y para eso voy a usar una de las propiedades CSS llamadas perspectiva. Vamos a establecerlo en 100 Ram. Bien, después de eso, seleccionemos el primer círculo y lo rotemos según los ejes y y x. Necesitamos rotar el círculo uno de acuerdo a Y, x por 70 grados. En cuanto a la dirección x, va a ser de 40 grados. Como puede ver, se gira el primer círculo. Hagamos lo mismo para el resto de los círculos. Duplicemos este código. Cambia el nombre de la clase que necesitamos aquí. Gire x con el valor negativo -40 grados. Entonces otra vez, duplicar este código para el tercer círculo, necesitamos diferentes valores. Girar Y va a ser 180 grados. En cuanto a la rotación X, va a ser de 90 grados. Los tres círculos están girados, pero el tercero no es visible en este momento. Para que sea visible, necesitamos mirar el espacio de tres D desde un ángulo diferente. Para ello, podemos usar una de las propiedades de CS llamada perspectiva origen. Necesitamos cambiarlo de acuerdo a las direcciones x e y. El primer valor va a ser 76% En cuanto al segundo valor, voy a usar 27% Ahora creo que es un buen ángulo para mirar el proyecto y un tercer círculo es visible. Bien, ahora es el momento de seguir adelante y empezar a trabajar en pelotas. Cada círculo tendrá una bola. En primer lugar, para compartir también el entorno de tres D para las bolas, necesitamos usar el estilo transform donde el valor preserve tres D. Ahora podemos crear las bolas, seleccionémoslas usando una bola de nombre de clase común. Voy a definir el ancho, vamos a hacer que sea seis Ram. Entonces necesitamos la misma altura. Vamos a usar de nuevo la relación de aspecto con el valor uno. Voy a cambiar el fondo. En este caso, voy a usar gradiente radial. Se mezcla los colores desde el centro. El primer color va a ser RGB 13521424. Entonces el segundo color va a ser RGB 44, nuevamente, 44167 Necesitamos mezclar esos colores después del 70% vamos a usar aquí 70% también cambiar por el radio, hacer que el elemento sea redondeado. Eso es 72, 50% Bien, entonces tenemos aquí las pelotas. Y ahora los voy a rotar porque ahora mismo no se ven del todo bien. Necesitamos la misma rotación para la primera y segunda bolas. Vamos a seleccionarlos simultáneamente. Y rotarlos según la dirección blanca en -90 grados. cuanto a la tercera bola, necesitamos girarla de acuerdo a ambas direcciones, Y y X. Girar Y va a ser 90 grados, rotar X va a ser 90 grados también. Bien, así que ahora tenemos resultados mucho mejores, pero las bolas no se colocan correctamente. Tenemos que cambiar las posiciones. Vamos a establecer la posición en absoluto, entonces la posición superior va a ser menos tres rampa. En realidad los círculos deberían ir en el centro de las bolas. Necesitamos algunos cálculos para la posición izquierda. Vamos a usar la función calc. Necesitamos 50% menos tres Ram, que es la mitad del ancho de la bola. Bien, las bolas están posicionadas y ahora podemos empezar a trabajar en las animaciones. Vamos a mover todo el círculo y no la pelota. Sigamos adelante y usemos marcos clave CSS. Voy a crear fotogramas clave CS para el primer círculo. Llamemos uno al círculo de animación. Tendremos dos pasos diferentes. Al 0% necesitamos la posición por defecto que necesitamos para transformar, rotar Y. Con siete grados y rotar x 40 grados. Al 100% necesitamos las mismas rotaciones. Además, gira Z con 360 grados. Bien, sigamos adelante y apliquemos esos estilos usando la propiedad de animación. Necesitamos el nombre círculo uno. La duración va a ser de 2 segundos. Además, necesitamos ejecutar la animación infinitamente. Va a ser lineal. Como puedes ver, el círculo se mueve y la pelota se mueve con el círculo también. Pero en realidad eso no es lo que necesitamos de la pelota. Voy a ejecutar las animaciones para el resto de los círculos también, y luego solucionaremos ese problema. Sigamos adelante y copiemos este código de aquí y péguelo para el segundo círculo. Cambiemos el nombre. En este caso solo necesitamos hacer negativos los valores de las funciones rotate x, luego agarrar la animación. Cambiar el nombre. Bien, sigamos adelante y hagamos lo mismo para el tercer círculo también. En este caso, necesitamos aquí unos valores diferentes. Cambiemos el nombre entonces. Al 0% rotar y va a ser 180 grados. En cuanto a la rotación X, va a ser de 90 grados. Al 100% nuevamente, necesitamos las mismas rotaciones I, rotar Y y rotar X. Además, necesitamos agregar aquí rotar Z con el mismo valor Bien, entonces necesitamos la propiedad de animación con círculo tres. Bien, todos estos círculos se están animando y ahora podemos encargarnos de las bolas También necesitamos las animaciones para ellos. Durante la animación, necesitamos que las bolas se muestren con su anverso. Necesitamos girarlos, necesitamos rotarlos contra los círculos durante la animación. Las dos primeras bolas tendrán la misma animación. Usemos SSKeFrames. Para la bola de nombre, tendremos dos pasos. Al 0% necesitamos rotación de acuerdo a la y x por -90 grados. Al 100% necesitamos la misma rotación. Además, gire x con -360 grados. Después ejecutamos la bola de animación m 2 segundos, infinita y lineal. Ahora como pueden ver, tenemos aquí un resultado mucho mejor. Se utilizó aquí rotar la función x con -360 grados. En realidad siempre va compensar el movimiento del círculo. Bien, hagamos lo mismo para el tercer balón también. Tomemos este código de aquí y hagamos algunos cambios. Voy a cambiar el nombre, van a ser las dos. Entonces necesitamos rotar Y con 90 grados. Además, necesitamos la rotación según el eje X. Con el mismo valor, al 100% necesitamos rotar Y 90 grados. Después rotar X. Para mover la bola todo el círculo y también mantener la posición correcta, necesitamos girarla 450 grados porque ya está girada 90 grados. 90 grados más 360 grados serán 450 grados. Bien, usemos la animación. Necesitamos ambos 2 segundos cualesquiera, infinitos y lineales. Bien, Ahora todo funciona bien. Sólo tenemos que encargarnos de la pelota principal. Vamos a crearlo usando antes de pseudo elemento. Quiero decir antes del tercer círculo. Vamos a utilizar antes pseudo elemento ya que nos ayudará a gestionar el correcto orden de los elementos En primer lugar, voy a detener la animación para el tercer círculo y la pelota también para facilitar el proceso de trabajo. Después seleccione el círculo tres antes. Vamos a definir el contenido, hacerlo vacío. El ancho va a ser 12 Ram. Como necesitamos la misma altura. Utilizamos de nuevo relación de aspecto con el valor uno. El fondo va a ser, nuevamente, gradiente radial. El primer color va a ser el blanco. Necesitamos RGB 25053 veces. Entonces el segundo color va a ser, de nuevo, el valor RGB 55132146 Necesitamos mezclar esos colores después del 50% para que el elemento sea visible. Definamos posición, hagámosla absoluta. Aquí tenemos el elemento antes del palo. En realidad tenemos que hacerlo redondeado. Usemos radio de borde, 50% Necesitamos cambiar su posición. Vamos a colocarlo en el centro. Necesitamos posición izquierda 50% la parte superior 50% Para poder colocar el elemento en el centro perfectamente, necesitamos transformar traducir función -50% y -50% Ahora el elemento se posiciona correctamente y lo único que tenemos que hacer es girarlo Voy a rotar el elemento según eje x 90 grados. Bien, sentémonos sobre el balón principal. Vamos a correr hacia atrás la animación del tercer círculo. Como puedes ver, la bola principal también está rotando. Y no necesitamos eso. Tenemos que mantenerlo como fijo. Para eso, vamos a crear una nueva animación con el nombre bola principal. A vamos a tener dos pasos. Al 0% necesitamos la posición por defecto. Necesitamos traducir -50% -50% y rotar x 90 grados. En cuanto al 100% que necesitamos aquí, los mismos valores más rotar y -360 grados. Utilizamos aquí la misma técnica que utilizamos en los casos anteriores. Vamos a ejecutar el plan principal de animación, 2 segundos, infinito y lineal. Bien, ahora todo funciona bien. Antes de terminar este video, voy a hacer un par de cosas. Disminuyamos el ancho de los bordes, hazlo 0.1 Además de eso, voy a usar un tiempo de retardo para la animación del primer círculo. Usemos -1 segundo. En realidad, este valor negativo significa que la animación perderá el primer segundo y se ejecutará directamente desde el segundo segundo en la primera ejecución. Bien, finalmente terminamos con este proyecto. Espero que lo hayas disfrutado y hayas aprendido algunas cosas nuevas. Nos vemos la próxima vez. 10. Proyecto 7 - Helicóptero: En este video, vamos a construir un helicóptero con HTML y CSS. Como pueden ver, tenemos aquí un efecto volador. El helicóptero sobrevuela la ciudad, las palas se mueven. Todo este helicóptero se crea con HTML y CSS, y en realidad no es una imagen. Bien, eso es todo sobre el proyecto. Sigamos adelante y empecemos a crearlo. He preparado una nueva carpeta en el escritorio llamada Helicopter, en la que tenemos otra carpeta para las imágenes. Sigamos adelante y abramos esta carpeta y código BS y creamos nuestros archivos de trabajo para HTML y CSS. A continuación, abra el archivo HTML de índice y cree un documento HTML básico. Coloquemos aquí un signo de exclamación y luego golpeemos hacia arriba o Enter Bien, antes que nada voy a cambiar el título. Va a ser Helicóptero. Entonces vamos a vincular el archivo CSS, abrir la etiqueta de enlace y especificar aquí el nombre del archivo. Bien, finalmente voy a ejecutar este proyecto al navegador usando servidor en vivo. Coloquemos el editor y el navegador. Bien, sigamos adelante y comencemos a crear la marca HDML. Abramos la etiqueta profunda, que va a ser el contenedor. Entonces necesitamos otro remolcador de inmersión con el helicóptero de clase. Incluirá todas las partes del helicóptero. El primero va a ser plato, que incluirá principal. A continuación vamos a tener must, a continuación viene cockpit. Entonces tendremos esquís de aterrizaje. Tendremos dos patines de aterrizaje y tendrán nombres de clase comunes aterrizaje y también las clases individuales patín aterrizaje uno y patín de aterrizaje dos Bien, después de eso tenemos peine de cola. Entonces la siguiente parte va a ser aleta de cola. Por último, necesitamos aquí la pudrición de la cola. Bien, así que sentémonos sobre el marcado HTML. Sigamos adelante y comencemos a escribir algo de CSS. En primer lugar, voy a empezar a escribir algunos estilos de reset y default. Seleccionemos cada elemento usando un riesgo. Voy a deshacerme del margen predeterminado y el relleno. Vamos a establecer ambas propiedades a cero. Entonces también voy a establecer el tamaño de la caja a la caja de borde. A lo largo de este proyecto, vamos a utilizar Ram como unidades de medida. En este momento, una Ram equivale a 16 píxeles. Y quiero convertir una Ram en diez pixeles. Para eso, necesitamos disminuir el tamaño de fuente del elemento H demil, y tenemos que hacerlo 62.5% Bien, sigamos adelante y cuidemos los elementos del cuerpo Voy a definir su altura. El ancho va a ser 100% En cuanto a la altura, voy a hacerla 100% de la ventana gráfica y también cambiar el color de fondo Voy a usar aquí, verde claro. Bien, después de eso, voy a personalizar el contenedor. Vamos a seleccionarlo y definir su altura. El ancho va a ser de 150 Carneros de altura. Voy a hacer 80 Carneros. Cambiar el color de fondo. Voy a utilizar aquí el valor RGB 88179253. Bien, necesitamos colocar el contenedor en el centro de la página, y para eso usemos una cuadrícula CSS. Necesitamos mostrar propiedad con la cuadrícula de valor. Luego coloca los artículos en el centro. Bien, eso es todo sobre el contenedor por ahora, nosotros nos encargaremos de ello un poco más tarde. A continuación, voy a empezar a construir el helicóptero. adelante y seleccionemos el elemento deve envoltorio y definamos que está dentro de la altura El ancho va a ser 80 Ram. En cuanto a la altura, voy a hacerla 60 Ram. Y también cambia el color de fondo, hazlo blanco. A continuación voy a colocar el helicóptero en el centro del contenedor. De nuevo, voy a usar CSS grid. Necesitamos la rejilla de exhibición y el centro de los artículos del lugar. Bien, la primera parte que voy a crear es una pala. Vamos a seleccionarlo. Definir su con altura. El ancho va a ser de 40 Ram. En cuanto a la altura, voy a hacer dos Ram. Y también cambia el color de fondo, hazlo negro. Aquí tenemos el plato. Sigamos adelante y cambiemos su posición. Para eso, voy a usar posición absoluta. En realidad, necesitaremos posición absoluta para cada parte. Seleccionemos todos los desarrollos dentro del helicóptero. Establecer la posición dos absoluta. Posicionaremos los elementos acuerdo al desarrollo del envoltorio. Me refiero al helicóptero, necesitamos posición relativa para este elemento. Bien, cambiemos la posición de la cuchilla. Voy a establecer propiedad izquierda en 20 Ram. En cuanto a la posición superior va a ser 15 Ram. Bien, digamos de la cuchilla por ahora. En realidad usaremos unos tres efectos D para algunas de las partes del helicóptero. Volveremos a la cuchilla más tarde. A continuación tenemos el rotor principal. Definamos su dentro de la altura. El ancho va a ser cinco Ram. En cuanto a la altura, voy a hacer dos Ram. Cambiemos el color de fondo. este momento voy a usar el color rojo, pero luego lo cambiaremos también. Vamos a definir la posición izquierda, que sea 17.5 Ram Bien, sigamos adelante y personalicemos la siguiente parte que va a ser la cabina. En realidad, este elemento va a ser toda la cabina del helicóptero y no sólo la ventana. Definamos con altura. Voy a establecer el ancho a 20 Ram. Entonces la altura va a ser diez Ram. Cambiemos la posición. Vamos a establecer la propiedad superior a 18.5 Ram. Entonces la posición de la izquierda va a ser 30 Ram. También cambia el color de fondo, hazlo negro. Bien, ahora tenemos que encargarnos de la forma de la cabina. Se va a redondear y lo haremos usando radio de borde. La esquina superior izquierda va a ser 50% luego esquina superior derecha será 40% esquina derecha será 40% Necesitamos lo mismo para la esquina inferior. Bien, después de eso, voy a tomar de la cabina real en la que estoy. La ventana lo creará usando un elemento antes de establecer. Seleccionemos la cabina con antes de demandar al elemento. En primer lugar, necesitamos definir el contenido. Hagámoslo vacío. A continuación, voy a definir con y altura. El ancho va a ser ocho Ram. Entonces necesitamos altura, van a ser cinco Ram. Además, cambiemos el color de fondo, hagámoslo también, pongamos la posición en absoluto. Bien, ahora necesitamos cambiar ligeramente la posición del elemento y tenemos que hacerlo redondeado para que se ajuste a la cabina. Vamos a establecer la propiedad superior a 0.2 Ram. Y luego para que el elemento sea redondeado, voy a utilizar de nuevo radio de borde. Necesitamos el 100% luego cero, luego el 40% otra vez cero. Bien. Eso es lo de la cabina. A continuación voy a personalizar las parodias de aterrizaje. Como saben, tenemos dos parodias de aterrizaje, tienen un nombre de clase común Usémoslo y seleccionemos ambos elementos. En primer lugar, voy a definir la altura ganada. Vamos a poner con 223 Ram, entonces la altura va a ser diez Ram. También cambia el color de fondo. Voy a usar el color rojo. Entonces lo cambiaremos. Crearemos las parodias reales de aterrizaje usando fronteras. Necesitamos borde inferior con valores uno Ram sólido, el color va a ser negro. Entonces necesitamos borde dejado con valores uno Ram sólido. Transparente. También necesitamos frontera derecha, que tendrá los mismos valores. Por último, para cambiar la forma del elemento, usemos nuevamente el radio del borde. Los valores van a ser 002.5 Ram y cinco. Bien, ahora tenemos un resultado mucho mejor. En realidad ya no necesitamos este color de fondo rojo. Vamos a quitarlo. Después de eso, necesitamos posicionar los elementos en la parte inferior de la cabina. Entonces, seleccionemos Landing, Ski One. Define las propiedades superior e izquierda. La posición superior va a ser 22 Ram. En cuanto a la posición izquierda va a ser 26 Ram. Duplicemos este código, cambiemos el nombre. La primera posición va a ser 20.5 Ram. En cuanto a la posición izquierda va a ser 26.5 Ram. Bien, los kits de aterrizaje están posicionados y ahora tenemos que conectarlos a la cabina. Para eso voy a usar antes y después de los elementos. Seleccionemos ambos juntos. En primer lugar, necesitamos definir el contenido. Va a estar vacío. Entonces necesitamos ancho y alto. El ancho va a ser uno Ram. En cuanto a la altura, voy a ponerla en cinco Ram. Además, cambiemos el color de fondo, lo hagamos negro y fijemos la posición en absoluto. Bien, entonces ahora tenemos que cambiar las posiciones. En realidad ambos tendrán posición inferior establecida en cero. Pero además de eso, necesitamos definir una posición izquierda para cada elemento por separado. Seleccionemos parodias de aterrizaje antes de establecer la posición izquierda en ocho Ram Entonces voy a copiar este código. Necesitamos una, tenemos que establecer la posición let a 18 Ram. Bien, así que con las parodias de aterrizaje ya terminamos. Y la siguiente parte que vamos a personalizar es un peine de cola. De nuevo, voy a definir ancho y alto. El ancho va a ser 25 Ram, entonces la altura va a ser dos Ram. Y también cambia el color de fondo, hazlo negro. Bien, entonces aquí tenemos el cono de cola. Sigamos adelante y cambiemos su posición. Voy a establecer la propiedad superior a 22 Ram. Entonces la posición de la izquierda va a ser 47 Ram. Por último, voy a cambiar la forma de los elementos usando nuevamente el radio del borde. Aquí necesitamos los valores cero, 100% 100% y cero. Bien, sentémonos sobre la cola co, continuación tenemos la aleta de cola. Vamos a seleccionarlo y antes que nada definamos con altura. El ancho va a ser dos Ram, entonces la altura será ocho Ram. Nuevamente, necesitamos color de fondo negro. Bien, entonces aquí tenemos la aleta de cola. Sigamos adelante y cambiemos su posición. Definamos las propiedades superior y derecha. El primer puesto va a ser 19 Ram. En cuanto a la posición correcta, hagamos que sea 7.5 Ram. Finalmente, cambiemos la forma del elemento usando el radio del borde. Los valores van a ser 100% 00.100% Bien, entonces la aleta de cola está lista y ahora tenemos que encargarnos de la última parte del helicóptero, que es el rotor de cola Definamos ancho y alto. El ancho va a ser uno Ram. En cuanto a la altura, voy a hacer nueve Ram. Además, necesitamos cambiar el color de fondo. Hagámoslo negro. Entonces tenemos que cambiar la posición. Definamos las propiedades superior y derecha. La primera posición va a ser 18.5 Ram. En cuanto a la propiedad correcta, pongámosla en 6.5 Ram. Bien, antes de hacer volar el helicóptero, necesitamos personalizar el mástil que conecta la cabina a la pala. Seleccionemos este elemento. En primer lugar, definamos su dentro de la altura. Voy a establecer con un Ram, entonces la altura va a ser dos Ram. Después cambia el color de fondo, hazlo negro. Entonces cambiemos la posición que necesitamos. Propiedad izquierda con el valor 39.5 Ram, luego posición superior con el valor 17 Ram Bien, todas las piezas están personalizadas y ahora tenemos que hacer volar el helicóptero. Empecemos con la cuchilla. Como decíamos, necesitamos unos tres efectos D para la pala. Para ello, tenemos que crear un entorno de tres D. Para ello, necesitamos usar una de las propiedades del CS llamada perspectiva. Vamos a establecerlo en 100 Ram. Bien, después de eso, tenemos que girar la cuchilla. Para eso, voy a transformar con la función rotate x. Necesitamos rotar el elemento según la dirección x. El valor va a ser de 90 grados. Se gira la pala y ahora tenemos que girar el rotor principal. Pero antes de eso necesitamos compartir tres ambientes D para el rotor principal. Para ello, tenemos que asignar al estilo de transformación de pala con el valor preservar tres D. Ahora podemos rotar el rotor principal. Transformemos rotar x con el valor -90 grados a la derecha. Después de eso, voy a agregar una pequeña parte al rotor principal. Para lograr un efecto mucho mejor, necesitamos hacer que el rotor principal se vea como una cruz. Y lo voy a hacer usando el elemento antes. Seleccionemos el rotor principal con antes del elemento. En primer lugar, voy a definir el contenido, vamos a dejarlo vacío. Entonces necesitamos definir con y altura. Voy a hacer que ambas propiedades 100% Luego cambiamos el color de fondo. Voy a usar aquí algún color de fondo temporal. Digamos azul también. Fijemos la posición a absoluta. Aquí tenemos los cuatro elementos y lo voy a rotar. Vamos a transformar rotar y, El valor va a ser de 80 grados, ¿de acuerdo? Además de eso, también necesitamos un entorno de tres D para este elemento. Para eso, necesitamos usar el estilo de transformación para el rotor principal con el valor preservar tres D. Además, me voy a deshacer de este fondo blanco de aquí. Además de eso, voy a cambiar los colores para el rotor principal. Hagámoslo negro. Bien, ahora es el momento de animar la placa. Tenemos que rotar este elemento. Vamos a crear marcos clave CSS. El nombre va a ser Blade An en general tendremos dos pasos, 0% y 100% Al 0% necesitamos transformar rotar la función X con valor 90 grados. También gira Z con cero a lo largo de la animación. Necesitamos rotar los elementos según la dirección z, 0-360 grados, al 100% Necesitamos transformar rotar x con 90 grados y rotar Z con 360 grados Bien, los marcos clave están listos. Sigamos adelante y ejecutemos la animación. En primer lugar, necesitamos aquí el nombre de los fotogramas clave. Hoja cualquiera, entonces la duración va a ser punto 1 segundo. La animación debería correr infinitamente, así que necesitamos aquí infinito También la animación va a ser lineal. ¿Bien? Entonces como puedes ver, la pala con el rotor principal se está moviendo. Ahora necesitamos lo mismo para el rotor de cola también. Vamos a crear marcos clave dentro de un rotor de cola. Anim, necesitamos rotar el elemento según la dirección x, 0-360 grados Al 0% necesitamos transformar rotar x con cero. Entonces al 100% necesitamos transformar rotar x con 360 grados. Sigamos adelante y ejecutemos la animación. El nombre va a ser rotor de cola Anim. Entonces necesitamos el punto de duración 1 segundo. Nuevamente, infinito y lineal. Bien, el helicóptero está volando y ahora tenemos que cuidar el fondo del contenedor. Agreguemos aquí una imagen, necesitamos URL. Entonces carpeta llamada images, y tenemos que seleccionar Gng Aquí tenemos los antecedentes, pero no se ve bien. Tenemos que cambiar el tamaño del fondo. Voy a darle el mismo tamaño que tiene el contenedor. El tamaño de fondo tendrá dos propiedades, 150 Ram y luego auto. Ahora tenemos los mejores resultados. Pero como se puede ver, se repite la imagen de fondo. En realidad, necesitamos repetirlo sólo horizontalmente. Agreguemos aquí repetir x. Ahora la imagen ya no se repite, sino que tenemos que cambiar su posición. Tenemos que moverlo hacia abajo un 100% Vamos a definir posición de fondo con los valores 0.100% Bien, ahora el fondo se ve bien y ahora voy a agregarle animación Vamos a crear marcos de cielo con el nombre BGN. Tendremos dos pasos diferentes, 0% y 100% Durante la animación, necesitamos cambiar la posición del fondo al 0% Tendremos la posición por defecto 0.100% En cuanto al 100% la posición de fondo va a ser 150 me, cien por ciento Vamos a ejecutar la animación. Necesitamos el nombre BG Anim. Entonces la duración va a ser de 10 segundos. Nuevamente, la animación debería correr infinitamente. Además, debería ser lineal, ¿de acuerdo? Como pueden ver, el fondo se mueve y tenemos aquí un bonito efecto volador. En realidad, casi terminamos con este proyecto. Sólo necesito hacer un par de cosas. Voy a rotar ligeramente el helicóptero. Voy a girarlo de acuerdo a la dirección y. El valor va a ser -15 grados. Para que el proyecto sea más agradable, voy a cambiar la forma del contenedor Hagámoslo usando radio de borde. Aquí necesitamos 0.5 Ram y 100 Ram. Bien, así que eso es, finalmente con este proyecto, ya terminamos. Espero que lo hayan disfrutado y haya sido de ayuda. Nos vemos la próxima vez. 11. Proyecto 8 - Bicicleta: Bien, en este video vamos a construir un próximo proyecto que es una bicicleta. Como puedes ver, tenemos aquí una bicicleta típica. Se está moviendo las ruedas y los pedales están girando usando animaciones CSS Todas las partes se crean usando HTML. No utilizamos aquí ninguna de las imágenes. Bien, sigamos adelante y comencemos a construir el proyecto. He creado una nueva carpeta en el escritorio llamada Bicicleta, que en este momento está vacía. Vamos a abrirlo en código VS y crear nuestros archivos de trabajo para HTML y CSS. A continuación, abra el archivo índice mal y cree un documento pasic Ml Para eso, tenemos que colocar aquí un signo de exclamación y luego dar arriba o Enter En primer lugar, voy a cambiar el título. Va a ser bicicleta. Entonces vamos a vincular el archivo CSS. Abra el enlace, y especifique aquí el nombre del archivo CSS. Por último, voy a ejecutar el proyecto al navegador usando servidor en vivo. Luego coloca el editor y el navegador como, bien, ya estamos listos para comenzar a crear el proyecto. Voy a comenzar con el marcado HTML. Abramos el remolcador profundo con la bicicleta de clase. Incluirá todas las diferentes partes de la bicicleta. Empecemos con la rueda delantera del remolcador profundo. Este elemento contará con dos clases diferentes, una para los estilos comunes y la siguiente para los estilos individuales. Necesitamos rueda y rueda delantera. También tendremos rueda trasera. Duplicemos esta línea de código y cambiemos el nombre de la clase. A continuación viene la horquilla delantera. Este elemento incluirá a continuación, tendremos manillar, luego travesaño Después de eso tendremos frames, frame one, frame two. La siguiente parte se va a establecer tubo, que incluirá otro desarrollo. Entonces tendremos lata entonces encadenar pedales y niebla trasera Podemos así que eso es sentarse todas las partes están creadas y ahora tenemos que empezar a estilizarlas. En primer lugar, vamos a crear algunos estilos de reset y default. Voy a seleccionar cada elemento usando un asterisco. Vamos a deshacernos del margen por defecto y poniendo, voy a hacer que ambas propiedades sean cero. Además, voy a establecer el tamaño de la caja a la caja de borde. A lo largo de este proyecto, utilizaremos Ram como unidad de medida. Por defecto, una Ram equivale a 16 píxeles, y quiero convertir una Ram en diez píxeles. Para ello, tenemos que disminuir el tamaño de fuente del elemento HTML. Vamos a establecerlo en 62.5% Bien, sigamos adelante. Responder a trabajar en el elemento del cuerpo, voy a definir su dentro de la altura. El ancho va a ser 100% como altura del cuerpo. Voy a hacer que sea el 100% del puerto de vista. A continuación, voy a personalizar la bicicleta. Definamos su anchura y altura. El ancho va a ser 85 Ram, entonces la altura será 60 Ram. Además, voy a cambiar el color de fondo. Vamos a usar aquí algún color temporal. Bien. Ahora voy a asentir a la bicicleta y a la página Para eso, usemos la cuadrícula CSS. Tenemos que asignar a la cuadrícula de visualización del elemento del cuerpo y colocar los elementos en el centro. Bien, entonces la bicicleta está centrada y ahora voy a empezar a personalizar las diferentes partes de la bicicleta. Sigamos adelante y comencemos con las ruedas. Vamos a definir el ancho, va a ser 30 Ram. Entonces voy a establecer la altura el mismo valor y por lo tanto voy a usar una de las propiedades llamadas relación de aspecto. Tenemos que fijarlo en uno. En este caso, si aumentamos o disminuimos el ancho, entonces la altura se incrementará o disminuirá automáticamente. Bien, cambiemos el color de fondo, hazlo negro. Además, voy a hacer que el elemento sea redondeado usando radio de borde, 50% Siguiente, voy a encargarme de la posición. En realidad, necesitamos posicionar todas las partes individualmente. Es decir, necesitamos posicionarnos absolutos para cada elemento dentro de la bicicleta. Por lo tanto, seleccionemos cada desarrollo y asignemos a ellos la posición absoluta. Además de eso, tenemos que posicionar elementos de acuerdo a la bicicleta. Me refiero al elemento padre, vamos a asignarle posición relativa. Bien, a continuación definamos una posición inferior para las ruedas. Voy a ponerla a cero, entonces voy a definir la frontera. Vamos a establecer el ancho, que sea 0.5 Ram. La frontera va a ser rayada. Además, usemos el color negro. Como puedes ver, el borde no es visible, el color negro lo cubre. Para solucionarlo, necesitamos usar una de las propiedades llamadas clip de fondo con un cuadro de contenido de valor. Bien, sentémonos sobre la rueda ahora mismo. A continuación necesitamos crear esta parte gris dentro de la rueda. Lo haremos usando un pseudo elemento after. Seleccionemos Rueda con el pseudo elemento after. En primer lugar, voy a definir el contenido. Va a estar vacío. Vamos a establecer con 224 Ram. De nuevo, voy a usar relación de aspecto con el valor uno, luego usar algún color de fondo temporal. Digamos que el rojo también puso la posición a absoluta. A continuación, voy a hacer el elemento a su alrededor usando radio de borde 50% Además, voy a colocarlo en el centro de la rueda. Para eso podemos usar cuadrícula CSS, cuadrícula visualización y colocar elementos en el centro. Bien, después de eso, agreguemos un borde al elemento after. El ancho va a ser 9.5 Ram. El borde va a ser sólido y también te permite ver DDD de color Como puedes ver, el borde hizo que el elemento fuera más grande. Para arreglar eso, tenemos que usar el tamaño de la caja. Border box en realidad ya hemos definido esta propiedad en los estilos por defecto, pero no se aplica a pseudo elementos, así que necesitamos volver a usarla Bien, finalmente me voy a deshacer de este color de fondo rojo. Bien, ahora ambas ruedas se colocan juntas y voy a mover la rueda trasera hacia el lado derecho. Seleccionemos la rueda trasera y pongamos su posición correcta a cero. Voy a deshacerme del color de fondo de la bicicleta. Todo bien. A continuación voy a darle estilo a la horquilla delantera. En primer lugar, definamos la anchura y la altura. Ancho va a ser tres Ram. En cuanto a la altura, voy a hacerla 17 Ram. Y luego cambia el color de fondo, hazlo negro. Definamos la posición de los elementos. Vamos a establecer la propiedad inferior en 15 Ram. En cuanto a la posición izquierda, va a ser 16.5 Bien, después de eso necesitamos rotar la horquilla Necesitamos girarlo de acuerdo a la dirección Z. Necesitamos transformar, rotar Z con el valor de 20 grados. En realidad, se gira el tenedor, pero eso no es lo que queremos. Se gira desde el centro, porque el origen de la transformación se establece en el centro por defecto. Necesitamos cambiar transformar el origen. Y tenemos que hacerlo abajo a la izquierda. Bien, sigamos adelante y echemos un vistazo al proyecto terminado. Como puedes ver, el tenedor tiene una pequeña parte adicional abajo. Voy a crear esta parte usando antes del elemento suit. Seleccionemos la horquilla delantera, seguida del elemento before suit. En primer lugar, definamos el contenido, lo hagamos vacío. Entonces voy a definir ancho y alto. Vamos a establecer con 22m. La altura va a ser cinco Ram. Además, voy a usar aquí algún color de fondo temporal. Utilicemos de nuevo el rojo y luego fijemos la posición en absoluto. Aquí tenemos los elementos, tenemos que cambiar su posición. Vamos a establecer la propiedad bottom a cero. Entonces definamos la posición izquierda, hazla 0.5 Bien, finalmente necesitamos rotar los elementos. También tenemos que moverlo un poco hacia el lado izquierdo. Transformémonos entonces. Rota Z 30 grados. Tenemos que traducir función x con el valor menos uno m. Finalmente, cambiemos el color de fondo, hagámoslo negro. La siguiente parte que vamos a personalizar va a ser un tubo. Vamos a seleccionarlo y definir su ancho y alto. El ancho va a ser dos Ram. En cuanto a la altura, hagámoslo 12 Ram. Cambia el color de fondo, hazlo negro. Después defina las propiedades izquierda y superior. La posición izquierda va a ser 0.5 Ram. En cuanto a la primera posición, voy a hacerla -12 Ram. Al igual que la horquilla delantera, el tubo también tendrá una pequeña parte adicional. Me refiero a esta parte de aquí. Vamos a crearlo usando antes de pseudo elemento. Seleccionemos tubo seguido del pseudo elemento antes. En primer lugar, definir el contenido, hacerlo vacío. Entonces voy a establecer dentro de la altura, ambas a tres corridas, cambiar el color de fondo, hacerla negra. Entonces voy a cambiar la posición del elemento. Vamos a establecer la posición en absoluto, Luego use las propiedades left y top. La posición de la izquierda va a ser -0.5 corrida. En cuanto a la posición superior, voy a hacer que el 0.5 corra a la derecha. Digamos del tubo. Sigamos adelante y personalicemos la siguiente parte de la bicicleta, que será el manillar En primer lugar, voy a definir con altura. Vamos a poner con 28 Ram, entonces la altura va a ser dos Ram. Cambiemos el color de fondo, vuelve a usar el color negro. Entonces voy a definir las posiciones superior e izquierda. La propiedad superior va a ser 18 Ram. En cuanto a la posición izquierda, voy a hacerla 19 Ram. Bien, a continuación vamos a rotar los elementos transforman. Rotar la función Z con el valor 15 grados. Bien, echemos un vistazo al proyecto terminado. Como pueden ver, los manillares tienen algunas piezas adicionales que voy a usar de nuevo antes y después de elementos Cd. Seleccionemos las barras seguidas del elemento before Cd. Voy a definir el contenido, vamos a dejarlo vacío. Entonces voy a establecer con dos formas. Necesitamos la misma altura. Voy a utilizar de nuevo relación de aspecto con el valor uno. Después cambia el color de fondo, hazlo negro. A continuación, definamos la posición, hazla absoluta. Entonces voy a cambiar la posición de los elementos y también hacerlo redondeado. Vamos a establecer la propiedad superior a menos un Ram. Entonces la posición de la izquierda va a ser menos uno Ram. Y también necesitamos aquí radio de borde con el valor 50% Bien, sentémonos sobre los elementos antes. Vamos a encargarnos de la segunda parte. Voy a seleccionar manillares, seguido del elemento after Vamos a vaciar el contenido. Entonces voy a definir ancho y alto. El ancho va a ser 30 Ram, entonces la altura va a ser dos Ram. Cambiemos el color de fondo, hazlo negro. Además, necesitamos establecer la posición en absoluto. A continuación, definamos la posición izquierda y hagamos que sea -15.5 Ram. Después de eso, voy a rotar el elemento y tenemos que hacerlo ligeramente redondeado. Usemos transform rotate y. En este caso necesitamos rotar el elemento de acuerdo con el eje Y. El valor va a ser de -70 grados. También voy a usar radio de borde dos Ram. Bien, así que lo único que tenemos que hacer con respecto al manillar es rotar el elemento after s en un espacio de tres D. Para eso, voy a usar una de las propiedades llamadas perspectiva. Nos permite crear el entorno de tres D. Vamos a establecer esta propiedad, 250 Ram. Como puedes ver, eso es todo sobre el manillar. A continuación voy a encargarme del travesaño. Seleccionemos este elemento, y antes que nada, definamos con altura. Voy a establecer con 227 Ram. Entonces la altura va a ser 3.5 Ram. También cambia el color de fondo, hazlo negro. Entonces necesitamos definir las propiedades superior e izquierda. La posición superior va a ser 22 Ram. En cuanto a la posición izquierda, voy a hacerla 26 Ram. Después de eso, necesitamos rotar los elementos. Usemos transform rotate con el valor 20 grados. Nuevamente, el elemento se gira desde el centro y tenemos que cambiar el origen de la transformación. En este caso, tenemos que hacerlo a la izquierda arriba. Bien, finalmente cambiemos la forma de los elementos. Debe ser redondeado en el lado derecho. Voy a usar radio fronterizo. Los valores serán los siguientes. Necesitamos cero, 50% 50% y otra vez cero. Bien, con la parte de la cruz, ya terminamos. A continuación, tenemos que tomar aquí de los marcos. Seleccionemos el marco uno, definamos ancho y alto. El ancho va a ser 32 Ram. Entonces voy a hacer altura 3.5 Ram. Cambia el color de fondo, hazlo negro. Entonces voy a definir las posiciones. La propiedad superior va a ser 25 Ram. En cuanto a la posición izquierda, vamos a hacerla 26 Ram. A continuación voy a rotar el elemento. Transformemos rotar. El valor va a ser de 45 grados. Nuevamente, necesitamos cambiar el origen de la transformación. Transformemos el origen y hagamos que quede arriba a la izquierda. Por último, cambiemos la forma del elemento. Utilice nuevamente el radio de borde con el valor 0% 50% y nuevamente cero. Bien, así que veamos sobre el primer fotograma. Sigamos adelante y personalicemos el segundo. Seleccione el marco dos y defina de nuevo la anchura y la altura. En este caso, el ancho va a ser de 25 Ram. Entonces la altura será de dos m. Vamos a cambiar el color de fondo, hacerlo negro. Entonces voy a definir las posiciones superior e izquierda. La propiedad superior va a ser de 44 m. en cuanto a la posición izquierda, voy a hacerla 45 Ram. Según lo admitido, la parte del elemento no es visible, se coloca detrás del volante Así que sigamos adelante y arreglemos eso. Usando la propiedad del índice Z, voy a establecerla algún valor mayor que cero. Digamos diez. Bien, sigamos adelante y nos ocupemos de la siguiente parte, que va a ser un tubo. Definamos con en altura. El ancho va a ser tres Ram. Entonces voy a hacer altura 18.5 Ram. Cambiemos el color de fondo, hazlo negro. Voy a cambiar las posiciones del elemento. La propiedad superior va a ser 30 Ram. Entonces necesitamos posición izquierda, va a ser 47 Ram. Además, voy a rotar el elemento. Transformemos rotar Z con valor 15 grados, ver arriba del tubo. Si echamos un vistazo al proyecto terminado, verá que el tubo tiene dos partes adicionales. De nuevo, voy a usar antes y después pseudo elementos. Seleccionemos tubo seguido del pseudo elemento antes. En primer lugar, definamos el contenido, lo hagamos vacío. Entonces voy a definir el ancho. Van a ser dos Ram. Entonces necesitamos altura, que será de 11 Ram. Cambiemos la posición, hagámosla absoluta. Entonces voy a establecer el color de fondo en negro. Entonces definamos las posiciones superior e izquierda. La propiedad superior va a ser -11 Ram. En cuanto a la posición izquierda, voy a hacerla 0.5 Ram. Bien, entonces veamos sobre la primera parte. Sigamos adelante y nos ocupemos del segundo. En realidad, voy a duplicar este código. Cambiemos antes a después. Entonces voy a cambiar el ancho. Va a ser 2.5 Ram. La altura va a ser 1.5 Ram. Necesitamos aquí, de nuevo en color para que sea negro. Cambiemos las posiciones superior e izquierda. La posición superior va a ser menos tres Ram. En cuanto a la posición izquierda, voy a hacerla 0.25 Ram. Bien, sigamos adelante y personalicemos el asiento. Definamos con la altura. Voy a hacer ancho 12 Ram. Ahora la altura va a ser de tres Ram. También cambia el color de fondo, haz negro. Entonces necesitamos cambiar las propiedades superior e izquierda. La posición superior va a ser -12 Ram. Entonces la posición izquierda será menos seis Ram. A continuación, voy a rotar el asiento. Transformémonos. Girar con el valor -12 grados. Además, necesitamos cambiar la forma del asiento. Usemos radio de borde con los valores 20% luego uno Ram dos veces, y 80% Bien, sentémonos sobre el asiento siguiente. Yo voy a encargarme del pack fork. Definamos con la altura. Voy a hacer con dos Ram, entonces la altura va a ser 25 Ram. Cambiemos el color de fondo, hazlo negro. Además, necesitamos cambiar las posiciones izquierda y superior. La posición izquierda va a ser 60 Ram. Entonces la propiedad superior va a ser 26 Ram. Además, necesitamos rotar los elementos. Simplemente transformemos la rotación Z con el valor -55 grados como se considera La parte de la horquilla trasera no es visible, se coloca detrás del volante. Necesitamos volver a usar la propiedad del índice Z. Vamos a ponerla en diez. Bien, Como se concedió, la mayor parte de la bicicleta está construida. A continuación tenemos que encargarnos de la manivela. Definamos con y altura. Voy a establecer ambas propiedades en diez Ram. Después cambia el color de fondo, hazlo negro. Además, necesitamos hacer que el elemento sea redondeado usando el porcentaje de radio de borde. Entonces cambiemos la posición de la manivela. Definamos las propiedades superior e izquierda. La posición superior va a ser 40 Ram. En cuanto a la posición izquierda, voy a hacerla 40 Ram también. A continuación, agreguemos el borde a la manivela. El ancho va a ser 0.3 Ram. El borde estará discontinuo y además definirá el color, Hazlo de nuevo negro, Como puedes ver, el color de fondo cubre el borde Tenemos que volver a usar. Clip de fondo con cuadro de contenido de valor. Bien, sentémonos sobre la manivela. Sigamos adelante y cuidemos los pétalos. Seleccione estos elementos definir dentro de la altura. El ancho va a ser 1.5 Ram. Entonces la altura será de 17 Ram. Cambiemos el color de fondo, hazlo negro. También cambia la posición del elemento. Necesitamos usar propiedades superiores e izquierdas. La posición superior va a ser 37 Ram. En cuanto a la posición let, voy a hacerla 44 Ram. Bien, a continuación vamos a rotar el elemento. Voy a hacerlo ligeramente redondeado. Usemos transformar Rotar Z con el valor -12 grados. También necesitamos bordear radio 0.5 Ram. Bien, como puedes ver en el proyecto terminado, necesitamos adherir los pétalos reales, esas dos partes. Nuevamente, usemos antes y después. Ver los elementos. Ambos elementos tendrán algunos estilos comunes. Voy a seleccionar a ambos juntos. Vamos a definir el contenido, hacerlo vacío. Entonces necesitamos definir w y altura. El ancho va a ser cinco, entonces la altura será 1.7 Ram. Cambia el color de fondo, hazlo negro. Además, necesitamos establecer la posición en absoluto. Entonces definamos la posición izquierda. Va a ser -1.8 Ram. Por último, voy a hacer que los elementos sean redondeados. Utilice radio de borde con el valor 0.3 m. En este momento, ambos elementos se colocan juntos. Necesitamos definir las posiciones por separado. Seleccionemos pétalos antes y definamos la posición superior. Haz que corra 0.2. En cuanto a los pedales, después de que necesitamos establecer la propiedad inferior, 2.2 ejecutar Bien, eso es todo con los pétalos, ya terminamos. Y la última parte que necesitamos personalizar es una cadena. Definamos con la altura. El ancho va a ser 31.5 Ram. Entonces la altura será 8.5 Ram. También necesitamos frontera. Hagámoslo 0.5 Ram, negro sólido. Y luego definir la posición de la cadena. El primer puesto va a ser 41 Ram. En cuanto a la posición let, voy a hacerla 40.5 Ram Bien, a continuación tenemos que hacer la cadena redondeada. Entonces usemos radio de borde con los valores cinco Ram, 50% 50% nuevamente cinco Ram. Por último, necesitamos hacer visible toda la cadena porque ahora mismo está parcialmente oculta. Usemos contra el índice con el valor diez. Bien, finalmente hemos terminado de construir la bicicleta, y ahora tenemos que encargarnos de las animaciones. Sigamos adelante y comencemos con las ruedas. Necesitamos girarlos 360 grados. Vamos a crear marcos clave. Voy a llamarlo bicicleta Anim. En realidad, necesitaremos los mismos marcos clave para todas las partes que se moverán. En este caso, tendremos dos pasos. Al 0% necesitamos definir la propiedad transform con la función rotate y el valor va a ser cero. Al 100% necesitamos rotar el elemento en -360 grados. Sigamos adelante y ejecutemos la animación. Necesitamos el nombre de los marcos clave. Bicicleta Anim entonces la duración va a ser de 5 segundos. La animación debería ejecutarse infinitamente. Además, va a ser lineal, ¿verdad? Como continúan, las ruedas están girando y ahora tenemos que hacer que la manivela y los pétalos funcionen. En realidad, como ya dije, vamos a necesitar los mismos marcos clave. Solo necesitamos definir la propiedad de animación. Lo único que tenemos que cambiar aquí es la duración. Van a ser 10 segundos para ambos elementos. Quiero decir, la manivela y los pedales. Como se puede ver, la manivela y los pedales están girando. Lo único que tenemos que hacer es ejecutar la animación para los elementos del antes y el después del traje. Pero en este caso deben girarse en direcciones opuestas. Para ello, necesitamos agregar aquí un valor adicional, reversa. Bien, así que ya está, hemos terminado de trabajar en la bicicleta, espero que haya sido interesante y servicial. Pasemos al siguiente proyecto. 12. Proyecto 9 - Habitación 3D: Bien, es momento de construir nuestro próximo proyecto, que va a ser una sala de tres D. Como pueden ver, tenemos aquí una habitación en tres D espacio. Hay una mesa en el centro de la habitación, y tenemos una carta sobre la mesa. Si hacemos clic en el botón, leemos más tarde, entonces llegaremos a la mesa y la letra rotará. Si volvemos a hacer clic en el botón, entonces nos moveremos hacia atrás. Bien, sentémonos sobre este proyecto. Sigamos adelante y empecemos a crearlo. Preparé una nueva carpeta en el escritorio llamada Sala Tres D, que ahora mismo está vacía. Sigamos adelante y lo abrimos en código VS y creamos nuestro índice de archivos de trabajo del estilo HTML CSS y scripts. Este proyecto utilizará un poco de script Java. Vamos a abrir el índice del archivo HDL y crear un documento HDML básico Para eso, voy a colocar aquí un signo de exclamación y luego presionar Tab o Enter Antes que nada, cambiemos el título. Va a ser tres sala D, luego vincular los archivos CSS y Java. Abra la etiqueta de enlace y especifique aquí el nombre del archivo. En cuanto al archivo script, voy a abrir script y especifico el nombre del archivo Gels en el atributo source. Bien, así que ahora voy a ejecutar el proyecto al navegador usando servidor en vivo. Además, coloquemos el editor y el navegador como, bien, al principio voy a crear el marcado H ml Vamos a abrir el remolcador profundo que va a ser la habitación dentro de la habitación, tendremos dos elementos diferentes El primero va a ser el botón. Vamos a abrir la etiqueta de botón con la clase BTN con la letra de lectura de texto En cuanto a la segunda, va a ser la mesa. Dentro de la mesa, tendremos un par de elementos diferentes. El primero va a ser la letra. Abramos H, etiqueta de tres encabezamientos con la letra de clase. Insertemos aquí algún texto ficticio. A continuación tendremos tres patas de la mesa. Abramos la etiqueta con la pata de la mesa de clase. También, necesitamos aquí otra mesa uno. Duplicemos esta línea de código dos veces y luego cambiemos los nombres de las clases. Bien, finalmente necesitamos aquí piso. Abramos la etiqueta con el piso de clase. Bien, así que el marcado HD mal está listo y ahora es el momento de comenzar a escribir algo de CSS En primer lugar, voy a crear algunos estilos de reset y default. Seleccionemos cada elemento usando un asterisco. Voy a deshacerme del margen predeterminado y el relleno. Vamos a establecer ambas propiedades a cero. Además, voy a establecer el tamaño de la caja a la caja de borde. A lo largo de este punto, usaremos Ram como unidad de medida. Por defecto, una Ram equivale a 16 píxeles, y quiero convertirla en diez píxeles. Que tenemos que disminuir el tamaño de fuente del elemento HTML. Hagámoslo 62.5% Bien, estamos listos para personalizar la habitación En realidad, creo que será mejor si ocultamos el botón en la letra por un tiempo porque voy a crear la tabla. Comentemos ambos elementos, después voy a seleccionar una habitación. En primer lugar, definamos con la altura. Voy a establecer el ancho al 100% En cuanto a la altura va a ser el 100% de la ventana Después cambia el color de fondo, hazlo negro. Bien, a continuación voy a encargarme de la mesa. En primer lugar, definamos su dentro de la altura. Voy a establecer ambas propiedades a 60 y luego voy a cambiar el fondo. En este caso, utilizaremos una función de gradiente radial. Nos permite crear una transición de color desde el centro del elemento. Voy a insertar dos colores distintos, ambos serán valores RGBA La primera línea va a ser de color blanco. Necesitamos 25053 veces, entonces la opacidad 0.9 cuanto al segundo color va a ser 3819123, y la opacidad va a ser 0.9 Bien, Siguiente vamos a hacer la tabla redondeada y también crear el redondeada y Vamos a establecer el radio del borde en 50% y luego crear el borde inferior con valores dos sólidos. El color va a ser RGB 153,233.253 Después de eso, voy a colocar la tabla en el centro de la página Para eso, usemos una cuadrícula CSS. Necesitamos la rejilla de exhibición y el centro de los artículos del lugar. Bien, la mesa está centrada. Y ahora voy a rotarlo. Además, quiero mover la mesa dentro de la habitación más profundo. Antes de hacer eso, tenemos que crear un entorno de tres D para eso. Voy a usar la propiedad llamada perspectiva. Vamos a establecerlo en 100 Ram. Después de eso, voy a rotar la mesa. Usemos la propiedad transform. Necesitamos rotar la mesa según el eje x. El valor va a ser de 70 grados. Además, necesitamos mover la mesa según el eje z. Traduzcamos Z con el valor diez Ram. Bien, se gira la mesa. Y ahora tenemos que cuidar las piernas. Como sabes, las tres patas tienen una pata de mesa con nombre de clase común. Vamos a seleccionarlo y definir con y altura. El ancho va a ser tres Ram. En cuanto a la altura, voy a hacerla 35 Ram. También cambia el color de fondo. Usemos tu valor RGBA 29113116 y la opacidad 0.8 Bien, aquí tenemos las tres patas, pero como puedes ver, necesitamos cuidar cuidar Vamos a establecer la posición en absoluto. Después defina las propiedades superior e izquierda. La posición superior va a ser 30 Ram. En cuanto a la posición izquierda, voy a ponerla en 28.5 Ram Bien, así que ahora necesitamos personalizar cada pierna por separado. Sigamos adelante y comencemos con el primero. Necesitamos rotar la pierna de acuerdo a las X y Z Xs. Antes de rotar la pierna, también necesitamos compartir un espacio de tres D para la pierna. Para ello, necesitamos usar propiedad llamada transform style con el valor preservado, tres D. Bien, Después de eso podemos rotar la pata. Seleccionemos la pata uno de la mesa y luego usemos transformar rotar x con el valor -60 grados, rotar con el valor 40 grados. Bien, así como se puede ver se gira la pierna. Pero se gira desde el centro porque por defecto el origen de la transformación se establece en el centro y necesitamos cambiarlo y hacerlo superior. Bien, ahora tenemos un resultado mucho mejor. A continuación, voy a hacer la pierna redondeada, así que usemos radio de borde, cinco Ram y uno Ram. Entonces voy a agregar un borde en el lado derecho y también en la parte inferior. Vamos a usar el borde derecho con los valores 0.3 Ram solid. El color RGB, 388587. Duplicemos esta línea de código y cambiemos la frontera, justo a la parte inferior del borde. Bien, sentémonos sobre el partido de ida. Sigamos adelante y nos ocupemos del segundo. En realidad, voy a duplicar este código. Cambiemos el nombre de la clase. Van a ser dos. El valor de la función rotar Z será negativo. También, voy a cambiar los valores del radio del borde. Necesitamos un Ram y cinco Ram. Por último, en lugar de la propiedad del derecho fronterizo, necesitamos aquí frontera izquierda. Bien, el partido de vuelta está listo. Sigamos adelante y personalicemos el tercero. Duplicemos nuevamente el código, cambiemos el nombre de la clase. Necesitamos aquí la pata tres de la mesa. En este caso, solo necesitamos rotar los elementos según x x. Y el valor va a ser -140 grados El radio fronterizo va a ser uno Ram. En lugar de fondo fronterizo, necesitamos frontera, ¿verdad? Bien, veamos sobre las piernas, y en realidad la mesa está lista. A continuación, voy a ocuparme de la palabra. Seleccionemos este elemento y antes que nada definamos con en altura. Ahora mismo voy a hacer el piso un poco más pequeño y luego cambiaremos esos valores. El ancho y la altura van a ser de 60 Ram. Como saben, el piso se parece a la pizarra del pecho. Y lo vamos a crear usando una de las funciones llamadas gradiente cónico repetido Esta función pertenece a la propiedad de imagen de fondo. Mezclaremos dos colores diferentes y manejaremos la alineación de las celdas usando algunos grados. El primer valor de esta función define la dirección de las celdas. Voy a pasar aquí desde 90 grados. A continuación tenemos que especificar el primer color. Va a ser negro. Y necesitamos aquí cero grados y 90 grados. En realidad, esto creará una celda negra. A continuación, necesitamos especificar el segundo color, que va a ser 333. Me refiero al color gris. También necesitamos aquí 90 grados y 180 grados. Después de eso, necesitamos especificar el tamaño de las celdas. Necesitamos usar el tamaño de fondo, y los valores van a ser diez Ram. Nuevamente diez Ram. Como pueden ver, aquí tenemos las celdas, y se ven como una pizarra de pecho Como puede ver, las celdas se repiten. Sucede porque por defecto la propiedad background repeat está establecida para repetir. Si lo cambiamos y no lo hacemos repetir, entonces solo tendremos cuatro celdas porque la función cónica repetitiva se ejecuta una vez y crea celdas en el eje x e y Bien, vamos a deshacernos de la propiedad de repetición de fondo A continuación, voy a hacer que el piso sea redondeado. Vamos a usar radio de borde con el valor 50% Entonces voy a establecer la posición en absoluto. Tenemos que mover el piso abajo. Usemos transform translate Z con el valor -23 Ram. Bien, en realidad ya podemos aumentar el tamaño del piso. Cambiemos los valores del ancho y alto, hazlos 160. Bien, después de eso necesitamos colocar el piso en el centro de la habitación. Para eso, voy a usar CSS Caja de lino, necesitamos mostrar lino Entonces justifica el centro de contenido y un centro de líneas de artículos. Bien, después de eso, agreguemos algún efecto de sombra. Además, voy a esconder la parte del piso que está fuera de la habitación. Usemos sombra de caja. Necesitamos la sombra dentro del elemento que necesitamos usar aquí en St menos cinco, menos cinco, luego diez Ram. Y el color negro también necesitamos aquí nuevamente intra cinco Ram, diez Ram, y el color negro para poder ocultar el piso que está fuera de la habitación, necesitamos usar desbordamiento oculto. Bien, eso es. El piso y la mesa ambos están listos y ahora podemos encargarnos del fondo y de este último. Ahora mismo están escondidos. Vamos a seguir adelante y hacerlos visibles. Vamos a seleccionar la parte inferior define la altura. Voy a establecer ambas propiedades en 15 Ram. Luego cambia el color de fondo. También cambia el color del texto. Usemos el valor RGB 252357. Bien, Siguiente voy a cambiar la posición del fondo. Vamos a establecer la posición en relativo, luego definir las propiedades superior e izquierda. El primer puesto va a ser diez Ram. En cuanto a la posición izquierda, voy a hacerla -40 Bien, después de eso, voy a cambiar la forma del fondo. También le voy a agregar un borde. Cambiemos la forma del elemento usando los valores de radio de borde serán 50% dos veces, luego 0.50% En cuanto al borde, voy a hacer que sea 0.3 Ram El color va a ser RGB 252357. Bien, después de eso, sigamos adelante y personalicemos el texto de la parte inferior. Voy a aumentar el tamaño del teléfono, vamos a hacer que sea dos Ram, luego transformar el texto en mayúsculas. Además, voy a crear algún espacio entre las letras, que sea 0.2 Ram. Entonces voy a aumentar la altura de la línea. Hagámoslo 1.5 Por último, cambia el tipo del cursor, hazlo puntero. Bien, el botón está personalizado. A continuación voy a encargarme de la carta. Vamos a seleccionarlo. Y antes que nada define dentro de la altura. Voy a establecer con 215 Ram, entonces la altura va a ser 25 Ram. Cambiemos el color de fondo, hazlo blanco. A continuación voy a crear el espacio dentro de la letra. Hagámoslo usando relleno. Vamos a colocarlo en dos Ram en la parte superior, uno Ram en el lado derecho, dos Ram en la parte inferior y uno Ram en el lado izquierdo. Cambiemos el color, hazlo 555. También usa un poco de efecto de sombra. Usa sombra de caja con el valor 00.1 Ram y el llamador AAA Todo bien. Ahora es el momento de cuidar el teléfono, de la carta. En realidad, voy a usar uno de los teléfonos de Google. Sigamos adelante y visitemos el sitio web de Google Phones. Voy a buscar un teléfono llamado guión de baile. Seleccionemos el primer estilo, luego haga clic en Importar, tome la URL y péguela en el archivo CSS. Bien, ahora podemos definir la familia telefónica. Vamos a asignar a bailar guión cursivo, luego cambiar el tamaño del teléfono, hacerlo 1.5 Por último, voy a crear un poco de sangría Usemos texto en abolladura con valor 0.5 Ram. Bien, así que todo está listo. Y ahora podemos hacer que este botón funcione. Una vez que hacemos clic en él, tenemos que movernos dentro de la habitación, llegar a la mesa, y la letra debe rotar. Para eso, voy a usar un poquito de Javascript. Tenemos que agregar un oyente de eventos al botón con un evento click En primer lugar, voy a seleccionar abajo. Vamos a consultar el método selector. Necesitamos especificar aquí el nombre de la clase, BTN. Después tenemos que agregar agregar oyente de eventos a la parte inferior con click event Y también tenemos que pasar aquí una función de devolución de llamada que se ejecutará una vez que hagamos clic en el botón Voy a agregar una nueva clase a la mesa. Luego usando esta clase, definiremos nuevos estilos en CSS los cuales necesitamos agregar al elemento al hacer clic. Ahora tenemos que seleccionar mesa. Vamos a utilizar de nuevo el método selector de consultas. El nombre de la clase va a ser tabla. Después de eso, necesitamos usar una propiedad llamada class list que nos da todas las clases que tiene el elemento. Ahora voy a usar uno de los métodos llamados togal. En realidad, este método nos permite agregar una clase al elemento si no lo tiene y eliminarlo. Si la tiene, el nombre de la clase va a ser, digamos cambio. Bien, sentémonos sobre el Javascript. Volvamos al archivo CS y seleccionemos tabla con un cambio de clase. Necesitamos rotar la mesa según x, xs. Además, necesitamos moverlo de acuerdo a las direcciones y y z que necesitamos aquí. Girar x valor de función 80 grados, luego traducir Y, el valor va a ser 30 Ram. Y también traducir Z con valor diez Ram. Una vez que haga clic en el botón, luego nos moveremos dentro de la habitación, pero como pueden ver, tenemos que suavizar este efecto. Para eso, voy a usar transición. Aquí necesitamos transformarnos. Y la duración 2 segundos, ahora tenemos un resultado mucho mejor. Pero como puedes ver en el siguiente click, ya no tenemos un efecto suave. Necesitamos otra transición como la predeterminada para la tabla. Ahora todo funciona bien. En realidad, creo que necesitamos rotar la mesa un poco más de acuerdo a la x x. ahorita se gira 70 grados. Cambiemos el valor y hagamos 80 grados. Bien, creo que es mucho mejor. Sigamos adelante y cuidemos la carta. Seleccionemos Cambio de Clase seguido de la letra. Voy a rotar letra según x x. El valor va a ser -80 grados según se considere Este último está rotando, pero está rotando desde el centro. Necesitamos cambiar el origen de la transformación. Va a ser el fondo. Ahora el problema está solucionado y tenemos que hacer que la rotación sea más suave. Vamos a usar de nuevo la transición. Tenemos que transformarnos. La duración va a ser de 1 segundo. También, necesitamos aquí un poco de tiempo de retraso. Van a ser 2 segundos como la mesa. Necesitamos otra transición como la predeterminada. Bien, ahora todo funciona bien. Lo único que quiero hacer es agregar un tiempo de retardo para la mesa una vez que retrocedamos de ella. Agreguemos aquí 1 segundo. Bien, así que eso es todo. Todo funciona a la perfección con este proyecto, ya terminamos. Espero que haya sido interesante y hayas aprendido algunas cosas nuevas. Nos vemos en el próximo proyecto. 13. Proyecto 10 - Swing 3D: Bien, es momento de crear nuestro último proyecto en este curso. Va a ser un swing de tres D. Como pueden ver, tenemos aquí un par de columpios en un espacio de tres D. Están balanceándose. Y también tenemos aquí una bolita que se está moviendo de un columpio a otro. Crearemos esos efectos con animaciones CSS y tres transformaciones D. Bien, eso es todo sobre el proyecto. Sigamos adelante y empecemos a construirlo. He creado una nueva carpeta en el escritorio llamada Three D Swing, que ahora mismo está vacía. Vamos a abrirlo en código VS. Crea nuestros archivos de trabajo para HTML y CSS. Después abre el índice del archivo HDL y crea un documento HDML básico Coloquemos aquí un signo de exclamación y luego golpeemos Top o Enter Cambiemos el título. Voy a insertar aquí tres D Swing, luego vincular el archivo CSS, abrir la etiqueta de enlace, y especificar aquí el nombre del archivo CSS. Bien, finalmente, voy a ejecutar el proyecto al navegador usando un servidor en vivo. Además, coloquemos el editor y el navegador así. Bien, estamos listos para construir el proyecto. En primer lugar, voy a comenzar con el marcado HTML. Abramos el remolcador profundo, que va a ser el contenedor A continuación, voy a crear el swing. Abramos de Tu con el swing de clase. Columpio uno Dentro del columpio, tendremos un par de elementos diferentes. Tendremos cuatro círculos. Abramos el tirón profundo con el círculo de la clase y el círculo uno Entonces voy a duplicar esta línea de código tres veces y cambiar los nombres de las clases. También tendremos dos cuerdas. Vamos a abrir etiqueta con la cuerda de clase y cuerda uno, Luego duplique esta línea de código y cambie el nombre de la clase. Bien, en general vamos a tener seis columpios. Pero ahora mismo creo que seremos mejores si creamos solo uno. Una vez que lo personalicemos, entonces nos encargaremos del resto de ellos. Bien, eso es todo sobre la marca HDML. Por ahora, sigamos adelante y comencemos a escribir CSS. En primer lugar, voy a crear algunos estilos de reset y default. Seleccionemos cada elemento usando un asterisco. Va a deshacerse del margen predeterminado y el relleno. Vamos a establecer ambas propiedades a cero. Además, voy a establecer el tamaño de la caja a la caja de borde. A lo largo de este proyecto, utilizaremos Ram como unidad de medida. Por defecto, una Ram equivale a 16 píxeles y quiero convertirla en diez píxeles. Para ello tenemos que disminuir el tamaño por defecto del elemento H timul Vamos a fijarlo en 62.5% Bien, continuación tomemos del contenedor Voy a definir la altura wen. El ancho va a ser del 100% En cuanto a la altura, voy a hacer que sea el 100% de la viewport Entonces voy a cambiar el fondo del contenedor. En este caso, voy a usar una función de degradado radial Si echamos un vistazo al proyecto terminado, verás que la transición de color de negro a azul comienza en la esquina superior izquierda de la página. En primer lugar, necesitamos precisar este lugar. Voy a usar sitio más cercano al 5% 10% En realidad, esos valores porcentuales son como las coordenadas. Después de eso, vamos a especificar los colores. El primero va a ser de color negro. Usemos RGB con ceros. En cuanto al segundo color, va a ser azul. Usemos RGB 115488. Bien. Lo último que tenemos que hacer con respecto al fondo es aumentar la transición de color. Y para eso, agreguemos aquí 1,000% Bien, sentémonos sobre el contenedor Por ahora, sigamos adelante y nos ocupemos del columpio. En primer lugar, definamos con la altura. Voy a establecer con 242 Ram, entonces la altura va a ser 20 Ram. También cambia el color de fondo. Voy a usar RGBA valor 2621691 y la Opacidad 0.7 Aquí tenemos el swing, y necesitamos colocarlo en el centro de la página Para eso, voy a usar CSS Flexbox. Necesitamos Display Flex. Entonces justifica el centro de contenido y un centro de líneas de artículos. Bien, ahora voy a rotar el columpio y luego le daremos una forma de tres D. En realidad, voy a rotar el columpio de acuerdo a las tres direcciones. Me refiero a x z e y x. Así que a medida que transformas luego rotas la función x, el valor va a ser de 70 grados. Entonces necesitamos rotar Z eran el valor -40 grados. Finalmente, rote y cinco grados. Bien, el elemento está girado. Como dije, voy a darle al columpio una forma de tres D. En primer lugar, necesitamos crear un entorno de tres D para eso. Voy a usar perspectiva con valor 150 Ram. Voy a crear una forma de tres D usando elementos de CD antes y después y necesitamos compartir un espacio de tres D con ellos también. Para eso voy a usar la propiedad llamada transform style con el valor preserve tres D. Bien, a continuación vamos a seleccionar un swing con un elemento antes. En primer lugar, definamos los contenidos, hazlo vacío. Entonces voy a definir la anchura y la altura. El ancho va a ser uno Ram como altura de poli. Voy a hacerlo al 100% También cambia el color de fondo. Voy a usar aquí el color B4b 65 también establecer la posición en absoluto Bien, aquí tenemos el elemento antes del palo en el lado izquierdo del columpio. Sigamos adelante y lo rotemos. Transformar rotar Y con valor 90 grados. El elemento se gira, pero como se puede ver, se gira desde el centro. Necesitamos cambiar el origen de la transformación. Usemos transform origin y hagámoslo a la izquierda. El lado izquierdo está listo. Sigamos adelante y cuidemos el anverso. Voy a seleccionar swing con después de ver el elemento. Vamos a definir el contenido, hacerlo vacío. Entonces voy a establecer la altura a un Ram. Entonces el ancho va a ser 100% Cambiar el color de fondo, voy a usar aquí el color dos, C seis. También cambia la posición, hazla absoluta. Bien, aquí tenemos los elementos después. Como puede ver, necesitamos cambiar la posición. Se debe colocar frente al columpio. Definamos la propiedad de fondo y la hagamos cero, ¿bien? A continuación, voy a rotar los elementos. En este caso, necesitamos girarlo acuerdo a la dirección x. Vamos a establecer la función de rotación x a 90 grados. Como se puede ver, como el antes se sienta el elemento, necesitamos cambiar el origen de la transformación. Aquí va a ser fondo. ¿Todo bien? Como puedes ver, el columpio tiene una forma de tres D. A continuación, voy a tomar aquí de los círculos, me refiero a esos detalles que se colocan en esquinas del columpio. Vamos a seleccionar círculo definir dentro de la altura. Voy a establecer ambas propiedades a tres Ram y luego cambiar el color de fondo. Voy a usar aquí C5757. A continuación, voy a hacer que el elemento redondeado usando radio de borde con el valor del 50% Después de eso, voy a cuidar las posiciones de los círculos. Fijemos la posición a absoluta. Entonces voy a definir las posiciones por separado para cada círculo. Empecemos por el primero. Voy a definir propiedades superiores e izquierdas. Pongamos ambas posiciones a un Ram. Entonces voy a duplicar este código cambiar el nombre de la clase. También necesitamos aquí posición derecha en lugar de izquierda. A continuación viene el tercer círculo como duplicado de nuevo el código cambia el nombre de la clase. En este caso, necesitamos posiciones inferiores a la derecha. Entonces fijemos la posición para que el último círculo va a ser el cuarto. Necesitamos abajo e izquierda. Bien, los cuatro elementos están posicionados. A continuación, voy a crear esos elementos blancos que se colocan encima de los círculos. Los crearemos usando antes del elemento suit. Seleccionemos círculo seguido del elemento before suit. En primer lugar, definamos el contenido. Necesitamos que esté vacío. Entonces voy a establecer con altura, ambos a 1.8 Ram. Luego cambia el color de fondo. Voy a usar aquí 988. También establece la posición en absoluto. Aquí tenemos los elementos antes. Vamos a seguir adelante y hacerlos redondeados. Y también necesitamos colocarlos en el centro de los círculos. Usemos radio de borde, hazlo 50% Entonces para colocar los elementos en el centro, voy a usar cuadrícula CSS. Necesitamos la rejilla de exhibición y el centro de los artículos del lugar. Bien, ahora para crear un efecto más agradable, voy a mover los círculos blancos un poco hacia arriba en un espacio de tres D. En primer lugar, necesitamos compartir un ambiente de tres D con el elemento antes. Para eso voy a usar transform style con el valor preserve tres D. Entonces para mover los elementos hacia arriba, voy a transformar traducir la función Z con valor 0.3 m. Muy bien, veamos los círculos de salida. Sigamos adelante y cuidemos las cuerdas. Selecciónelos usando un nombre de clase común. Voy a definir ancho y alto. Vamos a establecer la altura a 40 Ram y el ancho va a ser 0.3 Ram. Además, voy a establecer el color de fondo en blanco. Aquí tenemos las cuerdas y tenemos que encargarnos de las posiciones. Fijemos la posición a absoluta. Entonces voy a definir posiciones para cuerda uno y cuerda dos por separado. Empecemos con el de cuerda. Voy a definir propiedades superiores e izquierdas. El primer puesto va a ser diez Ram. En cuanto a la posición izquierda, voy a hacerla 2.5 Ram. Duplicemos este código, cambiemos el nombre de la clase. Necesitamos cuerda dos en lugar de posición izquierda. Necesitamos aquí la posición correcta. Bien, las cuerdas están posicionadas, y a continuación voy a girarlas y también moverlas un poco hacia arriba. Transformémonos. Traducimos el valor de la función Z va a ser de 20 m. Entonces voy a rotar el elemento según los ejes x e y. El valor de la función rotate x va a ser de 90 grados. Entonces necesitamos rotar y con el mismo valor. Ahora mismo, las cuerdas se giran desde el centro. Y necesitamos cambiar el origen de la transformación. En este caso, tenemos que fijarlo a la cima. Bien, las cuerdas están listas, me refiero a las partes superiores y ahora necesitamos crear las piezas adicionales abajo. Y lo voy a hacer usando antes y después hacer elementos. Seleccionemos la cuerda con antes de que los elementos definan el contenido, necesitamos estar vacíos. Entonces voy a definir ancho y alto. El ancho va a ser 0.3 Ram. En cuanto a la altura, voy a hacerla 23 Ram. Voy a usar años en color de fondo temporal, digamos rojo, para luego establecer posición en absoluto. Aquí tenemos los elementos antes. Tenemos que cambiar las posiciones. Quiero decir, tenemos que moverlos hacia abajo y también necesitamos rotarlos. Transformemos la función de traducir y. El valor va a ser -23 Ram. Y también necesitamos rotar la función Z con valor 21 grados. Los elementos se rotan desde el centro. Y tenemos que cambiar el origen de la transformación. En este caso debería ser de fondo. Bien, eso es todo, sobre el antes del elemento. Cambiemos el color de fondo, hazlo blanco. Para crear la segunda parte, vamos a duplicar este código. Tenemos que cambiar antes a después. Y también necesitamos cambiar el valor de la función rotate. En este caso, necesitamos aquí un valor negativo. Bien, finalmente el swing está listo y ahora tenemos que crear la animación. Antes de eso, voy a cambiar ligeramente la posición del columpio. Fijemos la posición a absoluta. Entonces voy a definir la posición superior. Hagámoslo 50% a lo largo de la animación. Moveremos el swing según el eje y. Quiero decir horizontalmente en un espacio de tres D. Vamos a crear marcos de cielo. Voy a llamarlo Swing An vamos a tener un par de pasos diferentes. En cada paso, cambiaremos el valor de la función translate y. Además de eso, necesitamos especificar la rotación actual del elemento en cada paso. Empecemos con el 0% voy a agarrar la rotación actual de aquí. Vamos a agregar la función translate y. El valor en el primer paso va a ser de 100 m. A continuación viene 20% Vamos a copiar transformar propiedad el valor de la función translate y. En este caso te voy a insertar 21 Ram. Entonces viene 25% el valor va a ser 27 Ram. Entonces al 35.40% tendremos aquí los mismos estilos. Vamos a insertar aquí Transformar y cambiar el valor de la función translate Y va a ser cero. Al 50% el valor va a ser -60 Ram. Después viene 55% voy a cambiar el valor y hacerlo -55 Ram Entonces al 65.70% el valor va a ser -84 Ram. Por último, al 100% necesitamos ocultar el columpio. Voy a en algún valor superior, digamos -800 Bien, los fotogramas clave están listos Ahora podemos ejecutar la animación. Seleccionemos el swing uno. Necesitamos insertar aquí el nombre de la animación. Columpio anim, entonces la duración de la animación va a ser de 20 segundos. Tenemos que ejecutar la animación infinitamente. Además, definamos la función de sincronización de animación. Voy a elegir aquí está adentro hacia afuera. Como puedes ver, el swing se mueve y la animación funciona bien. Quiero hacer aquí un par de cosas. En primer lugar, quiero cambiar el origen de la transformación. Vamos a ponerla a la cima. Además, al inicio de la animación, estamos llegando aquí las barras de desplazamiento. Para arreglar eso, necesitamos usar overflow ten. Bien, el primer swing está listo. Se está animando. Duplicemos el primer swing en el archivo H tm. Cambia el nombre de clase que necesitamos aquí, Swing dos, entonces voy a duplicar este código en CSS. Cambiar el nombre de la clase. Además, voy a agregar aquí un tiempo de retardo, pero con un valor negativo necesitamos -4 segundos. Significa que los primeros 4 segundos de la animación se perderán para el segundo swing. Bien, todo funciona perfectamente de la misma manera. También voy a crear otros tres columpios. Duplicemos este código tres veces. Cambiar los nombres de las clases de tres a cinco. Después también duplique la animación en el archivo CS. Cambiar los nombres de las clases, y también tenemos que cambiar los tiempos de retraso. Necesitamos -8 segundos, luego -12 segundos y -16 segundos. Bien, todos los columpios se mueven bien, y ahora tenemos que encargarnos de la pelota, lo que hace que el proyecto sea más divertido para la pelota, voy a crear un swing adicional Sigamos adelante y dupliquemos el swing una vez más, luego inserte aquí, un tirón profundo con la pelota de clase Aquí tenemos un nuevo swing que no se mueve estos momentos porque no tenemos la animación para ello. Ahora voy a personalizar el balón. Vamos a definir el ancho, que sea siete Ram. Entonces necesitamos la misma altura. Voy a usar aquí propiedad llamada relación de aspecto con valor uno. Y luego cambiemos el fondo. En este caso, voy a usar una función de gradiente radial. Necesitamos mezclar dos colores. El primero va a ser RGBA 159-23-8156 y la opacidad 0.9 En cuanto al segundo color, va a ser 3116, va a ser 3116 159-23-8156 y la opacidad 0.9 En cuanto al segundo color, va a ser 3116, y la opacidad 0.8 Bien. A continuación, voy a cambiar la posición de la pelota, y también tenemos que hacerla redondeada. Vamos a establecer la posición en relativo, luego definir las propiedades izquierda y superior. La posición izquierda va a ser 15 Ram, entonces la posición superior va a ser diez Ram. Además, usemos aquí radio fronterizo 50% ¿bien? Después de eso, necesitamos rotar la pelota. Necesitamos girarlo acuerdo a ambas direcciones x e y. La función rotar X va a ser de 90 grados. En cuanto al valor de la función rotate y, voy a hacerla 40 grados. Nuevamente, necesitamos cambiar el origen de la transformación porque ahora mismo la pelota se gira desde el centro. Vamos a establecer transformar el origen en la parte superior. Bien, finalmente agreguemos un poco de efecto de sombra a la pelota. Usa sombra de caja con los valores 00.2 Ram en la llamada de 333 Bien, así que ya está, La pelota está lista y ahora tenemos que encargarnos de la animación. Crearemos la animación para el sexto swing. Entonces eventualmente ocultaremos ese columpio recién creado y mostraremos solo la pelota. Vamos a crear S key frames. Voy a llamarlo swing seis y solo tendremos tres pasos al 0% que necesitamos de nuevo, la rotación actual del swing, al igual que los fotogramas clave anteriores, moverá los elementos según el eje y. Voy a añadir aquí traducir y función, y el valor va a ser cero. Entonces sumar 50% necesitamos mover el elemento por 30 m. En cuanto al último paso, quiero decir 100% necesitamos de nuevo traducir Y cero. Bien, sigamos adelante y ejecutemos la animación. Seleccione swing seis, el nombre de la animación. Columpio seis, Anum, la duración va a ser de 4 segundos. Entonces necesitamos aquí un tiempo de retardo con nuevo valor negativo -1 segundo. La animación va a ser infinita. También, necesitamos aquí flexibilizar. ¿Bien? Como pueden ver, el columpio se mueve ahora. Tenemos que ocultarlo. Tenemos que esconder todo excepto la pelota. Sigamos adelante y ocultemos todos los desarrollos en el swing seis excepto el balón. Vamos a balancear seis. El entonces necesitamos usar pseudo clase. Tenemos que especificar aquí el nombre de la clase, Paul. Para ocultar los elementos, voy a usar opacidad cero ¿Bien? A continuación, voy a ocultar los elementos del antes y el después. Seleccionemos swing seis con antes y después también. Usa nuevamente la opacidad cero. Por último, voy a hacer transparente el color de fondo del columpio. Eso es. Hemos terminado de trabajar en este proyecto. Todo funciona a la perfección. Espero que hayan disfrutado de este proyecto, y fue interesante al terminar este proyecto, nuestro curso ha terminado. Espero que haya sido el curso adecuado para ti, y aprendas algunas cosas nuevas sobre esas dos tecnologías, decir, el HTML y el CSS. El curso fue relativamente avanzado. Si tuviste algún problema para entender y seguir los videos, te recomiendo verlos de nuevo, probar el código e intentar crear proyectos similares por tu cuenta. Todo bien. Te deseo todo lo mejor. Buena suerte. Adiós.