Haz que tu sitio web se destaque con animaciones web, HTML y CSS

1. Introducción: ¿ estás mirando un poco de singularidad e individualidad en tu propio sitio web o aplicación Web en sí? Entonces este es el curso para ti. Hola, soy Sheila Brennan, un frente de desarrollador Web. En los últimos años, ha habido muchos avances en las tecnologías de navegadores Web que permiten más creatividad y cómo los sitios web están bien diseñados y desarrollados. En este curso, estaré buceando en varias técnicas que puedes usar usando solo HTML y CSS para agregar más interés visual a tu página web. Se recomienda cierta familiaridad con HTML y CSS, pero no absolutamente necesaria ya que estaré explicando conceptos a medida que avanzamos. Este curso es ideal para freelancers dentro de estafadores que buscan construir experiencias más efectivas para los clientes. Si bien las técnicas que estarán cubriendo son ideales para las páginas de inicio y las páginas de destino, podrían aplicarse con la misma facilidad en un simple sitio de bloques. ¿ Estás listo para sumergirte y aprender algunas de estas técnicas? Entonces empecemos 2. Introducción a CodePen: en este video, vamos a hablar de cope in, que estará usando para el resto del curso. Si ya tienes una cuenta de pluma de código, siéntete libre de saltarte este video y Elsie en el siguiente. Si no lo haces, todo lo que tienes que hacer es ir a sobrellevar terminó Io Haz clic en este inscribirte para obtener enlace gratis, creando cuenta y luego estarás bien para ir. Te veré el próximo. 3. Gradients de fondo: En este primer video, vamos a repasar cómo puedes usar los INTs Grady de fondo para agregar más interés visual a secciones de tu página, alguien para empezar por crear un bolígrafo. Y luego repasemos un par de ajustes de lápiz. Estaré usando estos a lo largo del resto del curso para cada hembra que voy a hacer es en esta meditando para que si termino las consultas de medios en mi CSS para cambiar diversas propiedades como tamaños de fuente, eso se reflejará con precisión en la pluma. Si cambio mi navegador por CSS, voy a elegir esta opción normalizar para minimizar las diferencias entre navegadores y cómo las cosas se renderizan y guardan cerca. Y entonces podemos empezar en nuestro cada uno a la boca. Voy a aprovechar el auto completo de cope en Aiken, apenas hit periodo que bajo mi nombre de clase hit tab y se auto complete. Y luego por cada etiqueta, va a ser salir afuera, y eso va a ser todo por todo el html para esta primera lección, y luego voy a estar agregando un poco de HTML. Estos estilos. Estos se aplicarán también para el resto de lecciones, modo que si crezco la pantalla con al menos 800 píxeles para sótano se van a aumentar 18 píxeles, por lo que todos los frentes de la página crecerán un poco. Y entonces sigamos adelante y escojamos un frente. Se puede tirar y justo desde la empresa. Usando estas opciones de activos, solo tendrás que hacer clic en el tanque de enlace de copia Tengo realmente pre seleccionado frontal de los teléfonos de Google . Todo lo que necesitas hacer es golpear, más en el que quieras, y luego en este cajón, copiarás y pegarás la etiqueta de enlace. He seleccionado frente calma y tiempo, así que me voy. Pondrás tu etiqueta de enlace de elección justo aquí. Incluso está cerca ahora. En realidad podemos en nuestra familia de frente para que veamos que apareció esa diversión. No, tenemos algunas fuentes de reserva también. Y luego vamos a prepararnos. Nuestras variables CSS estarán usando esas a lo largo. El curso es, bueno, es una buena manera es valores establecidos y luego reutilizarlos. Pero tengo que tipeas en todo el asunto otra vez de estas maneras, y tengo unos colores verdes. Bueno, voy a usar RGB para las canoas marinas, códigos hexagonales como el blanco que depende de ti. Y luego empecemos a configurar nuestra sección de héroes, que es la única sección que estará creando en este show video 400 pixels hombres con. Y luego vamos a establecer el color de fondo para usar la variable que acabamos de crear Sweet. Funciona, y luego vamos a tener que esto sea un contenedor de rejilla y sólo lo estamos haciendo para el diseño . Te mostraré por qué en segundos también vamos a agregar una consulta de medios para que pantallas más anchas, vamos a hacer más grande al héroe en cuanto a altura. De acuerdo, entonces estamos bien ahí. Y ahora en nuestros estilos de tagline, estamos en un dedo del pie del Senado. Espera para que realmente podamos verlo. Y luego vamos a configurar un tamaño divertido y un peso de 400 solo para que vaya por defecto una negrita para todas tus etiquetas de encabezado. No queremos negritas para que puedas leer mejor el texto. Y también estoy ajustando el espaciado de letras solo por gusto personal. Y luego vamos a establecer margen de auto, que es una forma de hacer que esto como elemento de cuadrícula esté centrado. Y eso se ve bien. Y luego voy a copiar de nuevo esta consulta de medios, y voy a aumentar el tamaño de la fuente en pantallas más anchas. Vamos a ir a cinco. Rim Ram es una unidad relativa que estará usando que está tomando en cuenta ese tamaño de fuente base que establecemos aquí. De acuerdo, así que ahora vamos a hacer es y en nuestro radiante eso se ve un avioncito. Entonces vamos a ir a uni usar CSS Cranie en Ohio. También puedes usar este año. Yo el punto com más codicioso es realmente bueno también. Simplemente no tienes tanto control sobre los colores. Entonces me voy. En realidad he pre seleccionado ingrediente. Pero todo lo que harás es crear los colores que quieras aquí para tus diversos las paradas en esto, y luego copiarás y pegarás ese radiante. Voy a y en mi ingrediente a agregar estos a la sección de héroes aquí mismo. Asegúrate de deletrearlo bien, y tenemos nuestro primer codicioso lo. Y voy a mostrar cómo en realidad se pueden capas agregando en un segundo ingrediente. ¿ Acabas de venir un separado ellos? Entonces eso se ve un poco diferente, y luego, pero sigue buscando un poco avión. Añadamos una espalda en la imagen detrás de eso. He pre seleccionado esta imagen de unspool ash dot com. Estos son fáciles porque puedes usarlos sin tener que hospedar la imagen en algún lugar. Sólo asegúrate de notar ¿cuáles son las ideas en la imagen? Porque así es como lo usarás. Y entonces Así terminemos eso en. Vamos, tenemos tu L. Y ahí vamos. Podemos ver por defecto. repetirán las imágenes de fondo. Vamos a decirle que no se repita, y vamos a poner cubierta lateral de fondo. Y ahí vamos. Podemos ver cómo es fácil colocar los ingredientes de Becker encima de una imagen para agregar un poco interés y también hace que el texto sea más fácil de leer. Ya verás si corté los INT de Grady. Es un poco más difícil leer el texto versus tener ingrediente ahí dentro, y también te permite agregar elementos de tu paleta de colores en los ingredientes y tener un aspecto más uniforme en la página. 4. Texto héroe animado: en este video, vamos a estar hablando de cómo podemos usar animaciones CSS y aplicarlas al dedo del pie del texto de la sección de héroe . Agrega un poco de diversión e interés visual. Las animaciones CSS son una forma de transitar las propiedades CSS entre dos estados diferentes. puede controlar si se repiten varias veces o simplemente se ejecutan una vez si corren hacia adelante o hacia atrás si tienen una función especial de flexibilización, que básicamente es una forma de agregar un efecto diferente. Por ejemplo, de rebote versus un fundido en frente a un ligero y y luego también podemos establecer una duración que determine por cuánto tiempo se ejecutará la animación. Y eso pueden ser cinco segundos, un segundo o entramos en milisegundos. Los marcos clave son la magia que se estará configurando en CSS. Esto nos permite decirle al navegador qué propiedades deben ser en ciertos puntos de la animación, y el navegador manejará todos los valores medios que no estaban declarando directamente. Y lo verás en nuestra demo. Muy bien, vamos a empezar con nuestra pluma creada previamente, así que estamos usando las lecciones anteriores trabajos terminados donde tenemos ah obtener texto fuera y lo primero que vamos a hacer es crear los marcos clave los cuales determinarán cómo animar este texto, y podemos llamarlo como queramos. Voy a llamarlo desvanecerse porque va sólo vamos a estar usando un cambio en opacidad y la posición del texto. Entonces eso es un poco descriptivo sobre hacer. Y luego sólo voy a declarar algunos valores porcentuales, por lo que 0% el texto estará oculto. Y luego vamos a playa transformada, que es algo bastante poderoso en términos de animación. Podrías hacer mucho con transform y animarte a ir a Indian es un gran recurso. vistazo a sus muelles y tienen mucho buen ejemplo ahí también. Voy a ir con un traductor tres D, que está cubierto en su documentación. Básicamente sólo voy a cambiar la posición vertical del texto, así que es bastante simple. Por lo que para empezar, tenemos nuestro valor 0%. Entonces, a mitad de la animación, vamos a hacer un ligero cambio de opacidad. El texto se hará visible y voy t solo podría transformar valor cero. Ahí vamos a ir 20% y luego sólo voy a agregar 100% de valor y eso va a la peste con uno. Entonces el Texas realmente visible, y no vamos a hacer más transformación, así que voy a poner eso en nada. Por lo que ahora tenemos configurado nuestro marco clave de animación CSS. Ahora todo lo que necesito hacer es aplicar esto a nuestro lema y depende de ti. A veces estos son mejores. Sólo aplicó unas pantallas más anchas, dependiendo de dónde lo que estés haciendo con la animación, para este ejemplo, solo lo voy a aplicar todos los anchos de pantalla. Voy a ir de punto por un segundo. Eso está en esta animación se ejecutará para y luego se alimentarán. Ese era el nombre del marco clave que creé, y ya lo puedes ver tomando efecto. Y entonces nos vendría bien la temporada. Esa es una de las funciones de flexibilización comunes a usar. Entonces eso fue eso. En primer lugar, veámoslo. Va a correr hacia adelante. No se va a repetir. Esto es sólo porque estoy cambiando los valores. Se lo está volviendo a ejecutar, y luego algo bueno que hacer es que vamos a estar haciendo más de esto a medida que entramos en depuración y se puede ver. Es una buena manera de si opto, dar click en Mac o hacer clic derecho y hacer inspeccionar. Realmente puedo indagar en cuáles son mis valores para la animación que Aiken los cambie según sea necesario y ya verás aquí puedo cambiar. Podría sólo Dewey. Si hago clic en esto en herramientas para sordos cromados, puedo ajustar los valores en vista previa cómo se ven. Entonces para este ejemplo, voy a ser un poco más elegante y usar un cúbico ocupado una función. He preseleccionado algunos valores, algunos flacos. Copiar esos dentro y ahí vamos. Es un poco más sutil. Sólo recargado. Obtén otro vistazo, y esa es una manera fácil de agregar un poco de interés visual en. No usaría demasiado esto, pero para algo como una página de aterrizaje o un héroe de página principal, definitivamente es algo a considerar usar 5. Shapes de CSS: en este video, vamos a cubrir cómo puedes usar las formas CSS para agregar interés visual en cómo dispones el texto . En realidad puedes usarlos para alinear texto con una forma para que tengas un aspecto personalizado. Entonces vamos a empezar con nuestro HTML. Vamos a decir que esto es como si vamos a usar esto para una sección de biografía de empleados, así que esa va a ser nuestra principal tive. Y luego dentro de aquí, vamos a tener etiqueta de artículo con la biografía real, y luego vamos a tener el nombre del empleado. Los de son ficticios. Por supuesto, puedes poner lo que quieras dentro aquí y luego para el vamos a tener una foto de avatar , que es la cosa. Nos vamos a usar una forma CSS, pero voy a estar jalando imágenes de este sitio. Particulares son dot cc. Ya tienen imágenes de personas que podemos usar. Voy adelante y seleccioné algunos específicos donde puedes hacer click en esta imagen es y navegar si quieres ser específico en cuáles. Entonces voy a usar el tanque de imagen y esta es la imagen 16. También voy a agregar clase a esto para poder darle estilo, y ahí está nuestra ficticia Gina, y luego voy a hacer es agregar etiqueta de injerto de cabello. Vamos a agregar algo de texto, que estaremos envolviendo alrededor de la forma para que puedas poner lo que quieras aquí también. Y vamos a conseguir otro párrafo. Es más fácil ver este efecto si tienes más texto versus solo tener no vas a poder verlo realmente. Si es sólo un par de líneas, está bien, y entonces vamos a empezar con nuestros estilos. Vamos a usar el plato es un color, y entonces eso realmente debería hacerlo. Terminemos en nuestra tipografía receptiva que hicimos en el resto de la clase hasta ahora. Entonces el financiamiento base será de 60 píxeles, y crecerá para este de hacerlo un poco diferente, Um, o ajustando las fuentes a partir de 700 píxeles, y vamos a hacerlo 20 píxeles, que es mostrando aquí en este momento porque estoy en una pantalla más amplia con y luego se puede agregar en nuestro zorro siguiente paso, se puede pasar por el proceso de agregar un Google Funt directamente desde cope in como hablamos . Basta con copiar la etiqueta de enlace. He preseleccionado un frente de Google llamado Catamarán, así que me aseguraré de mi metaetiqueta y luego dijo Cameron aquí. Y también puedes agregar tu familia de fuentes como CSS Muy negrita. Por lo que definitivamente recomiendo si vas a estar reutilizándolo. De acuerdo, entonces ahora tenemos catamarán cargando. Se ve mejor, y también voy a estar ajustando en la altura de línea para mis párrafos. Está un poco apretado ahora mismo. Eso es algo que también quieres considerar ajustar unas consultas de medios diferentes. Se puede tener, ah, altura de luz más ajustada como valor menor de Mobil. De acuerdo, ahora vamos a trabajar en nuestros empleados bios, y vamos a poner de Max con para que no van a ser así por qué y lo centraré que se está haciendo aplicar. Eso se ve bien. Y luego agregaremos nuestros bioestilos empleados individuales para eso. Aquí es donde vamos a empezar a agregar el que vamos a limitar inicialmente el ingenio al 80% de esos 1200 píxeles. Entonces las cosas se vuelven aún más estrechas y además enviando eso y solo el relleno inferior está bien marcado por el margen, porque voy a estar agregando una segunda biografía y quiero que tengan algo de espacio entre ellos. Entonces vamos a reutilizar esa consulta de medios de antes este 700 pixel uno. Y voy Teoh, ajusta la mezcla con para que en pantallas más anchas, sea aún más limitado solo para mantener razonable la longitud de línea. Las líneas pulmonares del cliente son más difíciles de vencer. Oops, me refería al 50%. Está bien. Está bien. Entonces esto es una parte de vamos a añadir CS interior, esa oveja. Tengo una clase de foto aplicada a la foto. Voy a estar declinando un ancho en eso. Y queríamos ser un círculo. Algo usado radio de frontera del 50%. Ahora es un círculo, y entonces voy a estar usando flotadores aquí, que es una técnica más antigua. Pero fueron geniales para este uso en particular. Y ahora estamos flotando a la izquierda. Se puede ver que el texto sigue siendo una especie de caja alrededor del círculo. Por lo que vamos a añadir nuestra forma CSS. Ella una oveja afuera círculo y ahí lo tenemos. Podemos ver que el texto ahora se alinea muy fuertemente con esa forma de círculo. Pero en realidad quería tener un poco de espacio para respirar, así que voy a añadir digamos 25 píxeles y eso se ve bastante bien. Y solo para mostrar un uso repetido de esto, vamos a sumar en un segundo empleado, esto depende totalmente de ti. Creo que se verá más completo. Estamos sumando en Ted. Um , básicamente reuso la bio. Todo lo que hice fue cambiar la foto y el nombre en el pronunciamiento. Para que puedas ver cómo definitivamente podrías crear algo interesante con esto. Y esto es algo que definitivamente va a funcionar. De acuerdo, verdad. Navegadores antiguos y no soportan esto también. Simplemente ignoraremos esto para que se vean más. Simplemente se van a ver cuadradas, lo cual también está totalmente bien. En cuanto a cómo el texto, aquellos si soportan radio de frontera, aún ven el círculo. En realidad no se ve muy mal, pero esto le da un poco extra 6. Boces de anglos: en este video, voy a cubrir cómo puedes usar bordes angulares en secciones de tu página para agregar algún interés visual . Vamos a estar reusando parte del código de la primera lección la sección de héroes. Entonces me van a haber conocido. Attagirl. Y luego voy a Teoh el mismo frente, el mismo fondo de Google que usamos ahí. Y ahora voy a y mi mercado para la sección de héroes. Todo lo que he hecho eso es diferente ya que agregué una clase cada uno también, que estará usando para estilizar. Y luego sigamos adelante y agreguemos nuestras variables CSS, que son las mismas que usamos antes en nuestra consulta HTM ill media responsive está bien basado tamaño de fuente. Entonces todo esto es de antes un oleaje y vamos a sumar en nuestra sección de héroes también estilos que usamos en esa primera escucha. Entonces ahora tenemos algo apareciendo, lo cual es bueno, y sumemos nuestros estilos H one los cuales se aplicarán a ese lema. También queremos que esto sea de espera y aún no hemos agregado nuestros estilos de clase corporal, así que podemos hacer eso ahora estaremos configurando nuestra fuente ahí dentro, lo cual es una locura que hicimos antes también. Y vamos a estar usando algunos otros encabezamientos también. Entonces voy a agregar un poco de estilo para aquellos que solo mínimo no quiero, um, um, margen top sobre ellos, ya que eso va a afectar el diseño. Y mientras estoy aparece realmente dedo del pie, agrega todos mis estilos de etiquetas HTML en la parte superior. Voy a t o este para asegurarme de que las imágenes no excedan nuestro ancho del navegador, que es algo que verás en todas partes. Es bueno usar. De acuerdo, entonces ahora tenemos nuestra sección de héroes. Es cuadrícula de exhibición como lo hicimos antes. Tenemos nuestro tagline. Démonos un poco más de espacio aquí, ¿de acuerdo? Voy a estar usando una H dos clases. Bueno, así que sólo voy a y en los estilos. Y luego voy a copiar los estilos de tagline que vienen de la primera lección también. Eso lo centrará porque está usando su hijo de cuadrícula. Y tiene un margen de auto aquí mismo. Por lo que ahora tenemos nuestra primera sección hecha. Y luego en la siguiente sección, que será nueva, estaremos agregando esos bordes angulados. Entonces voy a copiar y pegar algunos html sólo por el bien del tiempo. Para una segunda sección, va a ser nuestra tienda y e notó. Estoy sentado el color blanco para que ni siquiera podamos ver eso. OK, sí, ya tenemos color blanco. Eso sólo se aplica al tagline. Y luego necesitamos 1/3 de sección solo para que sea un poco el borde angular. Entonces voy a añadir una tercera sección muy sencilla. Eso serán eventos que hice sacando todas estas imágenes de la ceniza virgen. Entonces esa es una buena opción como mencioné antes. Entonces ahora solo necesitamos agregar son algunos de estilo para esta sección de tienda solo para que podamos obtener un aspecto más realista de cómo funcionaría esto. Entonces voy a agregar Estamos reutilizando un contenedor tive en estos esta segunda y tercera sección, y lo haremos en vez de mezclarnos para eso. De acuerdo, hemos hecho. Entonces voy a añadir algunos estilos para la sección nuestra tienda, que es un poco más en la segunda sección en la que estamos trabajando. Um, voy a estar usando posición relativa porque lo necesitaremos más adelante, así como un índice C para los bordes angulares, así que por eso está ahí. Y luego agreguemos en algunos estilos más detallados de tienda. Esto está separado de los bordes angulares, y no es importante. Entonces sólo voy a copiar eso en por el bien del tiempo. Realmente puedes poner lo que quieras en esta sección. Sólo estoy haciendo un diseño de tres columnas con CSS Grid que es Onley un solo cometas apilados en móvil y luego a 100 pixels va a tres viene y luego vamos a sumar en Nuestra sección de eventos es, Bueno, no hay demasiados estilos para eso. Entonces y puedes poner lo que quieras en esta sección está bien, solo esa Ah, tercera sección para poder mostrar con precisión los bordes angulares. Y ahora puedes empezar a añadir esos bordes cuando voy a estar usando es una buena referencia. Es este artículo sobre cómo hacer los bordes con transformaciones? En sus ejemplos se mencionaban SAS, que solo estaban usando CSS, pero es el mismo enfoque general que estos cubiertos aquí mismo en este artículo. De acuerdo, entonces vamos a estar agregando para adaptarse a elementos a la sección de detalles de la tienda, y eso es lo que va a permitir para esos bordes angulares así que vamos a subir a almacenar detalles, detalles, y ahí es donde solo voy a copiar y pega esto en porque una vez que se empieza porque es una especie de mucho. Y entonces te explicaré. Enviémoslo de vuelta en color inicialmente, aunque a Blanco. Y entonces estaremos instalando ser alegatos. Y esto es para el borde duro primero, y se puede ver que no es tan difícil de configurar. Por lo que a veces requiere algún finagle ing. Qué hay en estas secciones, el valor máximo que podría necesitar. Te ajustas así como la altura, pero el Vergis usando posición absoluta y el padre se posiciona relativo y la magia está askew. Entonces ese es ese ángulo que se está aplicando 3.5 grados. Y luego vamos a hacer lo mismo por esa imagen de fondo. Muy similar. Vamos a taza e, usan el mismo color de fondo, y luego lo único que va a cambiar es que esto se va a sentar abajo porque estamos sentados abajo de cero. Entonces está por debajo del borde inferior del que padres, que es el div de nuestra tienda. Entonces ahora tenemos nuestros bordes en ángulo y luego una cosa más que quería mostrar aquí es que en realidad podrías usar una imagen de fondo. Eso es algo así como un patrón repetitivo y que también funcionará con el borde angular. Entonces voy a agregar eso en no y luego agregarlo a nuestros dos pseudo elementos. Y también lo voy a agregar a los padres. Esto waas algo que pude generar en línea. Hay toneladas de generadores SPG petr. Entonces eso es definitivamente me acabo de dar cuenta de que tenía esto a la sección equivocada. Entonces definitivamente es algo a considerar usar, um, buscar nuestra tienda. Y ahí lo tenemos. Tenemos bordes angulados así como un poco de extra. Y definitivamente es algo que puedes hacer cuando incluso estás usando un patrón de repetición, solo puedes asegurarte de aplicar el mismo patrón a ti también. Por lo que demandan elementos en esa sección y estás bien para ir 7. Filtros de CSS: en este video, vamos a cubrir cómo puedes usar filtros CSS para agregar interés visual en Photoshopped like effects todo el CSS. Por lo que el HTML que estamos usando es muy sencillo. Es sólo vamos a tener la sección de héroes y eso es todo. En nuestro lema estará Explorer. Y luego sigamos adelante y asegurémonos de la configuración de la pluma cómo tenemos la respuesta de la etiqueta de minuto Y voy a agregar la fuente para que haya pre seleccionado solo un fondo de Google. Entonces que en y eso es todo para enseñar a cortar Muy sencillo. Y voy a agregar siguiente ¿Realmente las variables CSS hacen blanco? Se va a usar la taquigrafía. Si los todos los personajes son la misma letra, solo puedes escribir el 1er 3 y luego voy a configurar. Vamos a usar esto más adelante como nuestra configuración de filtro CSS. Voy a estar usando un invert del 20% que verás más adelante y como lo hemos estado haciendo antes , vamos a añadir nuestros estilos HTML. También voy a establecer un color de fondo en el momento de emisión que se necesita debido a un bug con filtros CSS. Actualmente en lo que vi su cromo y Firefox. Por lo que necesitamos tener este Aker y conjunto de colores. No puede ser transparente. ¿ De acuerdo? Y luego solo vamos a sumar nuestros estilos corporales para esto. Vamos a estar usando pre seleccionada una imagen de fondo puedes usar lo que sea que quisieras estar tirando eso desde el splash como lo hemos estado haciendo desde hace ya. Y estoy en un usado las propiedades de fondo de escena que hemos estado usando. Vamos a ordenar eso. ¿ De acuerdo? No, me acabo de dar cuenta de que estamos duplicando esto. No quiero 100% de cobertura, y luego vamos a tener este beat una altura completa de la tú parte armonías ah, 100 VH con apenas el 100% de la altura. Y luego vamos a poner un color para que el texto aquí espere. Y aún no despejamos a nuestra familia de frente. Entonces lo hará ahora, Y esto también va a ser un elemento de cuadrícula, y luego la única otra sección es la Somos la única sección de esta página. Va a ser de altura completa, y ese va a ser un contenedor flex. No sólo voy a copiar y pegar en mis valores flex para ahorrar tiempo. Es solo configurarlo en la dirección del peine Y entonces también estamos,ya sabes, ya sabes, centrándonos por todo el texto. Y debido a que el cuerpo es una rejilla elementos podemos hacer margen de auto otra vez al centro están hormigueo. Entonces vamos a hacer es y en los estilos de tagline voy a ir con un no son peso de 600. Empezaremos con el tamaño de fuente de cuatro amigos para unidades relativas. Voy a sólo el espaciado de letras solo por preferencia personal. Hacer las cosas un poco más juntas. Y luego para pantallas más blancas, vamos a tener el lema mucho más grande. Nos vamos a ir con 10 habitaciones. ¡ Boom! Es grande. Y entonces el único de Italia puso el filtro. Entonces vamos a poner el filtro CSS en el cuerpo, Ted. Entonces echa un vistazo a lo que tenemos ahora. Esto es sin filtros. Esto es solo con nuestro estilo en su lugar. Es una especie de contraste e con el fondo tiene muchos colores oscuros y luego espera. Y entonces nuestro texto es puro filtro blanco. Vamos a estar suministrando nuestro filtro invertido en azul. Ese es el resultado de eso. Básicamente invierte los colores, pero sólo en un 20%. Entonces es algo sutil, pero en realidad hace que parezca más cohesivo. Um, y definitivamente podrías ajustar estos valores según sea necesario. Si abro el debug you en mis herramientas de desarrollo, esa sería una buena manera de echar un vistazo a esos valores, y podrías jugar con otros filtros. Podrías hacer gran habilidad. Entonces eso es todo blanco y negro lo que podrías hacer. Hay toneladas de casa, así que definitivamente recomiendo jugar con los de ver lo que te gusta en lo que se ve bien realmente dependerá de lo que tengas en la página también, para que puedas ajustar la opacidad. Ahí está estas son muy poderosas, y te ayudo a dar una oportunidad y mostrar que estoy fuera. 8. Modos de fusión de CSS: y este video, vamos a repasar cómo puedes usar los modos de mezcla de mezcla en CSS para agregar efectos como tienda de fotos y también estaremos construyendo en lo que hicimos en la lista anterior. Entonces vamos a configurar nuestro HTML. Vamos a terminar con el responsable en una etiqueta, y voy a estar usando los estilos basados en escena como las lecciones anteriores. Entonces va a terminar en ella fondos y quiero una copia y pegar en el 20 bit de marcado que usamos porque eso es todo lo que vamos a usar en este bolígrafo también. Y estaremos usando variables CSS similares a lo que hicimos antes. Vamos a usar la espera en. También vamos a usar negro este, y son mezcla mezcla baja que va a estar usando. Lo estaremos enviando a superposición. Pero hay igual que con los refugios. Hay toneladas de opciones y después el final, daré la opción de aplicar el filtro que utilizamos en las lecciones anteriores. Tendremos eso disponible también. Entonces podemos configurar nuestros estilos html base que tenemos, pero hemos estado usando tan pieza de cocina que y similar a los filtros CSS. En realidad hay un bug en chrome. Esto parece ser Crumb on Lee. Necesitamos establecer un color de fondo en la etiqueta HTML. No puede ser transparente. De lo contrario, no verás aparecer ninguno del modo de mezcla. Entonces eso es eso. Entonces voy a reutilizar los estilos corporales que utilizamos en la lección anterior. Estaremos usando la misma imagen de fondo y también el mismo estilo de un héroe. Entonces voy a copiar hace en este contenedor bien todavía flex y en realidad con pone implícito que es 100% con. Entonces tenemos a nuestro héroe, mismos estilos antes. Y luego vamos a reutilizar el tigre en estilos, oficina Wells, copiar y pegar. Eso está bien, y luego para éste, no voy a poner el texto en el centro sólo porque por legibilidad se estaban aplicando los efectos . Hace que sea difícil leer encima del cuarto trasero, así que es por eso que eso es ligeramente diferente a la anterior. Escucha, y luego aquí es donde voy a aplicar el modo de mezcla mixta. Se va a ir en la sección de héroes, y es un poco sutil, pero se puede ver cómo el fuego. Quitarlo. Tenemos texto negro porque ese es el color predeterminado del texto. Y luego cuando aplico el modo de mezcla, apenas empieza a mezclarlo con el fondo. Es un tipo de efecto interesante, y hay muchas opciones para esto es, bueno, con las que podrías jugar. Si entras en modo de depuración, podrías hacer inspeccionar, y luego puedes jugar con C. Dijimos que es una variable CSS por lo que solo puedes jugar. Lo siento. Eso está mal. Queremos jugar con humor mixto de sangre para que puedas ponerlo a ello podría ser más fácil. Sólo lo dijo directamente aquí. De acuerdo, impulsado y héroe etiqueta color quemado pantalla hace que básicamente desaparezca. El suministro de oro se ve bastante parecido al negro. Aquí hay muchas opciones, así que es divertido jugar con eso. Y luego la otra cosa que quería mostrarle a Waas. Si queremos, también podríamos aplicar ese filtro CSS que usamos en la lista anterior. De esa forma se puede ver que se pueden utilizar los filtros CSS junto con el modo mezcla de mezcla al mismo tiempo y obtener aún más opciones, y voy a proporcionar un enlace para pluma de código que creé donde se cantata va entre los dos y establecer diferente combinaciones y ver cómo se ve eso. Y también quería mostrar que podías intentar sentarte un color de fuente diferente si ponemos el blanco aquí . Ese también es un efecto interesante en se puede ver cómo hay como combinaciones ilimitadas podrías hacer así que definitivamente espero que esto te inspire a probar algunas de estas. Incluso si solo estás usando el filtro o en el modo mezcla de mezcla de forma individual, todavía tienes toneladas de opciones, y definitivamente es puede proporcionar mucho interés visual, así que pruébalo. 9. Extra: animación de SVG y parte I: y estos dos próximos videos, vamos a hablar de SPG y cómo podemos animar elementos de archivos SPG con solo CSS. Si no estás tan interesado en SPG, siéntete libre de saltarte a Thies para considerarlos como videos bonus, y puedes pasar a la siguiente la lección final después de eso. Entonces, ¿qué es SPG? SPG es escala de gráficos electores, y lo bueno de ellos es que son nítidos en todos los tamaños de pantalla, incluyendo pantallas retina y pantallas no retina. Se pueden animar con sólo CSS como vamos a dio. También se pueden animar con JavaScript, e incluso son múltiples formas de usarlos. Puedes usarlos con la etiqueta de imagen de Justin como una imagen normal. También puedes incrustarlos directamente en tu HTML, lo cual vamos a estar haciendo para dar más control sobre el estilo para que sean bastante potentes. Y con el fin de crear Edit S P G's, definitivamente recomiendo software de edición vectorial como Adobe Illustrator o hay muchos libres por ahí está bien, creo que escape. Así que siéntete por ti, dedo del pie, echa un vistazo a tu alrededor. De acuerdo, empecemos con nuestra fase uno de nuestro video SPG bones y esta primera fase, vamos a estar preparando los activos que estarán utilizando para la segunda fase cuando los llevemos a Copan. Lo que vamos a hacer es usar este paisaje gratuito Winter Mountain, P y G, y luego lo vamos a recortar un poco, y un ilustrador creará un SPG que se sienta encima de él. Y luego agregaremos nuestras estrellas e ilustrador. Y luego traeremos todo en el Copán y animaremos a las estrellas. Y como todo es del mismo tamaño, escalará hacia arriba y hacia abajo con el navegador con dos. Por lo que puedes descargar esta imagen desde aquí para empezar. Ya lo he hecho. Voy a crear un nuevo documento en Illustrator. Puedes usar cualquier software de edición vectorial que tengas. Voy a ir con 2000 píxeles por 9 60 píxeles largos para mi documento, porque a eso le escalé la imagen en la montaña. Pero puedes usar cualquier tamaño de rectángulo que quieras. Entonces voy a hacer file place. Voy a traer la imagen de la montaña, y voy a mostrar cómo se podría elaborar la imagen directamente aquí en Illustrator. Entonces voy a hacer basura. Entonces va a auto seleccionar lo que piensa que debería caer. Pero voy a anular eso. Voy a golpear el candado para mantener la relación de aspecto. Voy a ir a 2000 píxeles y golpear, aplicar, y luego sigue siendo un poco demasiado alto. Entonces realmente hago cultivo otra vez. Se empieza la selección automática de una anulación. Eso y luego me fui sin aislar esta relación de aspecto porque sólo íbamos a estar frotando espacio vacío ahora. Entonces voy a bajar a igualar el tamaño de nuestra tabla aproximadamente, um y entonces sí aplicaremos. Por lo que ahora nuestra imagen de montaña está lista. El monte. Es bueno nombrar tus capas. Voy a trasladarlo al aeropuerto. Entonces vamos a crear una nueva capa para nuestras estrellas. Y primero, vamos a crear un rectángulo solo para asegurarnos de que la capa de estrellas tenga las mismas dimensiones que esta foto. En realidad puedo escribir lo alto aquí, y luego se crea el rectángulo, y eso sólo lo alinearé con la imagen. Y ahora que tenemos eso realmente lo va a ocultar para que podamos ver qué estamos haciendo. Las estrellas para las estrellas. Voy a usar un relleno negro y trazo transparente. Y luego voy a estar usando la herramienta estrella, y voy a estar creando estrellas en tres tamaños diferentes de estrella, como un signo normal desde el zoom de su Vemos mejor. Entonces eso va a ser como el tamaño normal. Después usaremos estos nombres de capas más adelante para peinar. Entonces solo estoy llamando a esa estrella. Y luego crearemos una estrella un poco más grande que será nuestra de tamaño mediano. Llamaremos a ese plato estrella mediano y luego crearemos una estrella de otro tamaño una más grande. Se va a llamar que comenzó, y luego voy a hacer es copiar y pegar para crear más de estos. Y mantendré los mismos nombres de capa que usarán más adelante. Si quieres continuar por tu cuenta, siéntete libre. Voy a acelerar el resto del video. Pero primero voy a explicar cómo vamos a estar exportando estos activos para las estrellas que vamos a hacer. Asegúrese de que tenemos el rectángulo visible para va a hacer selección de exportación de archivos y luego tenemos el correcto ha establecido. Uno se ve bien. SPG es un formato y asegúrate de que este objeto ideas dicen poner ganancias porque de lo contrario los nombres de capas no estarán en la SPG. Y eso lo necesitamos para peinar. Y harás activo de exportación y luego similar para la imagen de montaña. Si lo recortas, tendrás que exportar eso también. Podemos hacer exportación para pantallas. Se me olvidó, Teoh en realidad solo quiero empezar alto las estrellas para que no te confundas. También lo hacen exportación de archivos para pantallas y seleccione nuestro puerto uno que contendrá nuestras montañas. Y PNG es el formato uno X está bien y aeropuerto de exportación. Y ahora sólo voy a seguir creando estrellas. Así que siéntete libre de quedarte mirando. Puedes ralentizarlo si es necesario, o de lo contrario te veré en el siguiente video de la fase dos y estamos listos. 10. Extra: SVG, animación y parte II: Muy bien, Ahora estamos listos para empezar a usar nuestros activos en compañía. Tan sólo un paso más voy a hacer, que es opcional. Voy a optimizar mi SPG mediante el uso de esta herramienta en línea llamada SPG org. Es gratis usar lo único que quiero asegurarme de que no tengo trazado de ruta fusionado porque eso va a cambiar. Las estrellas subyacentes reales que queremos mantenerlas son caminos separados. Entonces mientras cocines, marca y se ve algo como esto y ves las estrellas aquí dentro, estás bien para ir. Voy a descargar eso desde ahí, y entonces estaremos listos para trabajar en su pluma. Ya empecé una nueva pluma aquí, y he agregado en la meditativa que hemos estado usando. Y también agregué guión de baile, que es un Google Funds. Y agregué, se basan estilos html que hemos estado usando así como este estilo de imagen responsive. Tan solo para asegurarnos de que la imagen escale apropiadamente y ahora podemos trabajar en nuestro HTML. Vamos a tener una clase div de héroe, y luego voy a tener un contenedor para sostener mis imágenes de héroe. Y entonces ahora es el momento de usar realmente esa SPG. En realidad vamos a copiarlo y pegarlo en su totalidad. Entonces voy a abrirla y controlar un o como sea que elijas a un selecto todo y luego copiar y luego pegar. Y lo único que quiero hacer es añadir una clase de estrellas. Y mientras estoy aquí cuando cambiaste el título a estrellas también y luego voy a quitar este primer camino, que era ese rectángulo porque ya no lo necesitamos. Entonces nuestro SPD está configurado y en ese mismo div, voy a incluir nuestra imagen. Puedes sentirte libre de hacer referencia a los enlaces de lápiz que proporcioné. Usa mi imagen si quieres o puedes. Si tienes cuenta co print pro, puedes subir tu propio archivo directamente a Copan. De lo contrario puedes hospedarlo en un servicio de imágenes como parpadeo O incluso podría funcionar desde Dropbox. Entonces voy a estar usando mi vamos a ver qué hacen cierran basura de montaña. Entonces tengo los tuyos disponibles sólo voy a pegar aquí. Siempre es bueno enviar una etiqueta de nota. Entonces ahora tenemos nuestras montañas y nuestras estrellas para que podamos empezar mientras estoy aquí. Yo sólo voy a añadir el resto del HTML. Es sólo un eslogan. Y ahora terminamos con HTML. Aparte de lo que veo, olvidé agregar nuestra clase, que necesitará su estilo en la imagen que va a ser una clase de montañas. Y ahora definitivamente tenemos algo de estilo que hacer. En primer lugar, voy a copiar y pegar en algunas variables CSS que estarán usando incluyendo nuestra fuente. Y ahora podemos seguir adelante y empezar a sumar en nuestros estilos. Voy a estar usando algún estilo que apilar la imagen, ella, la imagen de montaña y nuestra SPG Va a ser posición lto. Vamos a utilizar algunos valores de posicionamiento margen que queda de dama del 100%. Y esta es solo otra forma de apilar las cosas uno encima del otro. Ahora que podemos, vemos que están apiladas y también voy a armar algún fondo en la sección de héroes , que va a ser por defecto a azul y al lado de voy Teoh Así que esas imágenes de héroe sí lo hicieron. Voy a agregar algunos estilos ahí sobre lleno de oculto solo para asegurarme de que todo cabe dentro que es nuestro contenedor caiga dentro de cero solo asegura. Había una brecha entre la imagen de la montaña y el borde del puerto de vista. Entonces eso se deshace de eso porque normalmente no podemos usar display black, pero no queremos usar eso en este diseño en particular. A continuación, voy a agregar por tagline estilos y voy a agregar en algunas consultas de medios solo dedo del pie aumentar los lados porque se ve un poco pequeño en el escritorio que se ve bien. Y luego se puede ver que son SPG necesita algo de estilo. Las estrellas siguen usando su oscuro Phil, Y queríamos ser Esperar para que solo podamos usar la propiedad de relleno para cambiar eso y altura del 100% y ahorrar. De acuerdo, entonces ahora es el punto donde vamos a sumar en nuestras animaciones estelares. Voy a estar usando unos fotogramas clave diferentes solo por alguna variación. Pero definitivamente podrías simplemente crear uno de estos y usarlos para todas tus estrellas. Entonces este 1er 1 es para las estrellas de tamaño regular, y solo está cambiando la capacidad en diferentes puntos de la animación en. Entonces las estrellas más grandes obtendrán estos marcos clave. Entonces es solo cambio de opacidad, pero solo valores de propiedad ligeramente diferentes en diferentes momentos. Y luego para las estrellas medianas, tengo hasta una diferente. Entonces solo quería agregar mucha variación, pero definitivamente no tienes que hacer eso. Y luego vamos a sumar las animaciones para que estemos usando estos fotogramas clave. Por lo que necesitamos usar los atributos de datos y selectores R. Por lo que esto será para las estrellas más pequeñas. Y voy a ir cuatro segundos tienda la clave de animación, francamente, estrella centelleante, va a estar relajando para la flexibilización. Estoy en un inicio retardado it para la primera corrida por 0.2 segundos solo por alguna variación más. Se va a repetir para siempre, ir en direcciones alternas y en realidad correr hacia atrás. Y ahí se puede ver que ya está surtiendo efecto. Y la copia esto y vamos a dio una cosa similar. Pero para las estrellas medianas, vamos a ir con tres segundos. Es bueno variar estos eventos solo por algún interés más. hecho de que la naturaleza es también tiene mucha varianza. Vamos a ir con cuatro segundos de retraso ahí y no vamos a usar el revés y luego vamos dirigir son estas estrellas y voy a usar dos segundos ahí y eso va a conseguir los grandes, grandes marcos clave estrella. Y también vamos a ir hacia atrás en eso otra vez, sólo por variación, y se puede ver que eso ya está sucediendo. Ahora estoy las cosas repitiendo y se ve bien, y sólo hay otro conjunto de marcos clave que voy a agregar. Y eso es para la sección de héroes, el color de fondo. Decidí que también quería eso . Cambio. Se va a empezar con el azul que ponemos, y luego se va a ir a un azul más oscuro y luego a un azul aún más oscuro, y vamos a aplicar eso al hallazgo de nuestra sección de héroes. Vamos a ir con registro perezoso en fotogramas clave, que acabo de crear. Voy a fijar una duración de. Eso es algo que necesitaba. Se puede jugar con los valores seguro. Voy a ir con dos segundos de retraso si yo la primera corrida tal vez sale por un tiempo, y entonces hemos estado en su lugar también, y se puede ver cómo se podría hacer mucho con estas sutiles animaciones armadas. Es algo bastante único. Espero que esto te inspire a probar algunas animaciones con SPG y definitivamente considera estratificarlas con un PNG para opciones de estilo adicionales. 11. Consideraciones de el sitio: y por último, en este video, quería cubrir algunas consideraciones a tener en cuenta a la hora de usar cualquiera de las técnicas que cubrimos en este curso. En primer lugar, algunas pautas para animaciones que querrás evitar agregar en animaciones que interfieran con la capacidad de tus usuarios para interactuar con tu sitio. Entonces, por ejemplo, un sitio de bloques que no quieres tener alguna animación larga que está volando por toda la pantalla. Eso está haciendo difícil para los usuarios leer tus postes de sangre o en sitios de un minorista algo que va a dificultar que un usuario pase por el flotador de cheques. También querrás establecer tus duraciones de animación apropiadamente, así que normalmente, esto sería medio segundo o menos así que algo corto que no va a correr para siempre y distraer al usuario y luego, en términos de rendimiento, las mejores propiedades para enemigo nuestra capacidad y transformar esas dan el rendimiento más sin problemas. Y si buscas más información al respecto, proporcionaré algunos enlaces y el recurso es en términos de estilos. Tendrás que asegurarte de que el texto sea legible cuando tengas mucho que hacer debajo del texto. Obviamente, definitivamente hay una posibilidad. El texto no va a ser tan legible. Por lo que quieres asegurarte de tener en cuenta tu color de fuente, tu color de fondo y cualquier granulado y suministrado también. Aziz. Los colores de la imagen que estás usando y el frente que estás usando Debes considerar usar una herramienta de contraste de color al seleccionar la paleta de colores para tu sitio. Esto incluirá el uso de colores para fondos y para Fox, y proporcionaré algunos enlaces para eso también. Y luego, cuando estés usando propiedades CSS más nuevas, incluyendo los modos de mezcla de filtros CSS de cuadrícula CSS, querrás tener en cuenta el soporte del navegador que puedes usar. ¿ Puedo usar el dedo del pie de dot org? Busca cuál es el soporte del navegador y luego asegúrate de proporcionar algunos retrocesos para los rousers mayores para que aún tengan una buena experiencia. Leslie. Se desea optimizar sus imágenes. Puedes usar imagen Optima Fear en Mac. Puedes usar herramientas basadas en Web, y te proporcionaré algunos enlaces más. Asegúrate de dar ese paso extra solo para evitar que tus usuarios esperen para siempre descargando enormes imágenes en tu sitio, y espero que eso haya sido útil 12. Conclusión: has completado el curso. Enhorabuena y gracias por tomar esta clase. Espero que te vayas con algunas técnicas nuevas que puedas utilizar en tu próximo proyecto Web , donde estás mirando un poco de intereses visuales para el proyecto de clase, tomarás dos o más de las técnicas que aprendimos en esta clase y aplicarlos en su propio proyecto Web. Además, estar proporcionando un cope en que podría usarse como punto de partida si no tienes un proyecto actual . Si te gusta que tu envío de pluma de código se añada a la colección de clases que estaré creando en Copan, avísame. Gracias de nuevo y nos vemos la próxima vez.