Transcripciones
1. Introducción: Hola, soy Aga y he creado unas clases de CSS súper creativas para ti. Si te gustaría convertirte en un CSS Harry Potter, el momento es ahora. En mis ejercicios vas a jugar con filtros
CSS como escala de grises, contrastes, saturación, pero también para aplicar realmente bonito efecto zuo rasgado solo en un par de líneas de código usando modos de mezcla CSS. Si tu curioso, bueno, puedes hacer sólo con CSS para conseguir en photoshop, u otro editor de gráficos. Por favor quédate conmigo. Las clases están destinadas a personas que ya han leído algunas líneas de código. Pero si no estás familiarizado con CSS, yo encarecidamente, te recomiendo que veas mis otras clases. Adiós, nos vemos en mis clases.
2. HERRAMIENTAS: Hablemos de herramientas que vamos a utilizar en estas clases. En primer lugar, vamos a utilizar nuestro navegador web favorito. Normalmente uso Chrome, también
podemos usar Firefox. Vamos a usar mucho DevTools. ¿ Cuáles son DevTools? Estas son herramientas para desarrolladores web, y están incorporadas directamente en todos los navegadores. Me gusta mucho usar DevTools en Chrome, pero tal vez tengas diferentes preferencias. Veamos cómo podemos lanzarlos y qué es lo que realmente hay dentro. Tenemos el Chrome abierto, hacemos clic derecho, “Inspeccionar” y bang, tenemos las DevTools abiertas en nuestro lado derecho de la ventana. Lo que puedes ver aquí, es todo el código, HTML de nuestra página web está aquí, tenemos abierto este sitio web de Skillshare. Simplemente puedes comprobar qué parte del código es responsable del diseño. Por caso, si quieres saber en el código dónde está la navegación, solo
tienes que hacer clic en esta flecha y simplemente navegar hasta ella. Ahora bien, ya sabes que esta pieza de código se encarga de renderización de la navegación. Aquí, tenemos estilos, por lo que podemos llegar al archivo CSS. Podemos volver a los elementos, por lo que nuestro código HTML, y ver qué estilos se aplican aquí. Por ahora, podría parecer complicado, pero no te preocupes, te lo explicaré todo paso a paso. Si te gustaría tener esta ventana en otra posición, puedes decidir si debe ser de abajo a izquierda o tal vez debería estar en una ventana separada. También podemos abrir DevTools en Firefox. La regla es la misma, click derecho, “Inspeccionar Elemento” y se puede ver la ventana de las DevTools, que forman parte del navegador Web Firefox. De nuevo, tenemos el código HTML, tenemos CSS. También podemos cambiar la posición de las DevTools. Por caso, arrástralos a la derecha. Otra cosa que necesitamos tener, es un editor de código. Te recomiendo usar Atom. Puedes descargarlo gratis desde la página web, atom.io y está disponible para macOS y Windows. A lo mejor como otros editores de código como Sublime Text. Siéntase libre de usar lo que se adapte a sus necesidades. Asumiendo que vamos a usar, navegador
web, el DevTools y editor de código.
3. Filtros de CSS + ejercicios: En esta lección, vas a aprender sobre los filtros CSS. Los filtros CSS nos ayudan a lograr efectos al igual que en Photoshop, como desenfoque, ajuste de contraste o cambio de color. Los filtros CSS disponibles son desenfoque, brillo, contraste, drop shadow, escala de grises, tono-rotar, invertir, opacidad, saturar y sepia. Abra la carpeta de filtros CSS y luego haga clic en el índice HTML. Esta es la página web donde vamos a hacer el ejercicio de filtro CSS. Tenemos las imágenes que requieren un poco de modificaciones, como modificación del brillo o contraste, puedes sentirte libre de hacer lo que quieras. Te voy a mostrar mi forma de realzar estas fotos. En primer lugar, vamos a lanzar las herramientas de desarrollo. La forma más rápida es usar el atajo con un teclado o hacer clic con el botón derecho para inspeccionar. Como se puede ver, tenemos código HTML para el, para estos dos picos. Y vamos a aplicar filtros CSS. Estoy escribiendo filtro, y digamos que me gustaría aumentar el contraste. Si escribo 1, esto significa que el estado no cambia. Si escribo 1.1, significa que el contraste se incrementa en 10 por ciento. Si escribo 0.9, significa que el contraste se disminuye en 10 por ciento. Hagamos que el contraste se incremente en un 20 por ciento, y nos gustaría agregar brillo al igual que otros que nada ha cambiado. Pero aumentémoslo en un 20 por ciento. La foto está más oscura ahora mismo. Para poner la imagen en una vibra más de la vieja escuela, también
voy a usar filtro saturado. Vamos a combinar todos esos filtros libres, y estoy escribiendo saturar y me gustaría
aumentar la saturación en un 30 por ciento, digamos. Escribo 1.3. Como se puede ver, la imagen se ve reforzada ahora. A lo mejor la saturación un poco más. Ya puedes ver que la imagen tiene una palabra clave diferente. Por supuesto que podemos cambiarlo en Photoshop, pero en CSS es mucho más fácil si no tienes ya Photoshop abierto. Voy a copiar el código y pegarlo en el editor Atom. Busco el selector izquierdo en CSS, estoy pegando, guardando y referirme a la página para que pueda ver que la imagen [inaudible] se guardan. Lo que voy a hacer ahora mismo es aplicar el efecto hover. Me gustaría tener esta imagen borrosa porque es como la imagen que está detrás de la imagen con las ondas, así que voy a aplicar capa de filtro de desenfoque. Para el desenfoque necesitamos definir el valor en píxeles. Por ejemplo, me gustaría que la imagen se difuminara por cuatro píxeles y al pasar el ratón, me gustaría desenfocar la imagen. Vamos a copiar el código y pegarlo en nuestro editor Atom, en nuestro archivo CSS. Y al pasar el mouse, así que estoy escribiendo ahora la pseudo-clase, me gustaría tener los mismos valores así que necesito copiarlos, no para restablecer y desenfocar, cero. Comprobemos el efecto. Yo estoy refrescando la página y si paso el rato, el desenfoque se ha ido. Se puede hacer toneladas de diferentes efectos. Jugar pseudo-clases, jugar con filtros, con otras imágenes. Te recomiendo encarecidamente que solo vayas audaz y experimentes con ellos. Tu tarea es aplicar filtros a esta imagen y al fondo también. Para el fondo, funciona igual. Simplemente aplicamos filtro, por ejemplo, invierte 0.8 o saturar 1.5. En el próximo ejercicio, te
voy a mostrar algo de magia con filtro de sombra de gota.
4. Filtro CSS: sombra de la sombra: Esta parte vamos a jugar con el filtro Drop-shadow. Para drop shadow, necesitamos definir cuatro valores. El primero se desplaza en el eje x, el segundo está en el eje y, tercero está definiendo cómo se va a extender el desenfoque, por lo que el radio de desenfoque y el último es el color. Ahora echa un vistazo a la sombra en la práctica. Estamos abriendo carpeta drop shadow e índice HTML. Este es el sitio donde vamos a implementar el filtro drop shadow. Abramos herramientas de Dev como siempre y aquí vamos a aplicar filtro a esta imagen. Estoy escribiendo filtro drop shadow y primer offset en x. digamos, cinco píxeles, offset en y, digamos 10 píxeles, el radio de desenfoque, digamos, cero y el color, por ahora, probémoslo con blanco. Tenemos la sombra. Lo que es lo más cool de drop shadow en la propiedad filter es que en realidad aborda la forma del archivo PNG. Tenemos el expediente que tiene transparencia. Tenemos la imagen que se corta, se puede ver la forma de la mano y las hojas y su mejor usar filtro porque aborda la forma. Si aplicamos Box-shadow en su lugar, verás que el efecto es un poco diferente. Escribamos 10 píxeles del desplazamiento, 10 píxeles del desenfoque y el color blanco
también y se puede ver aquí el efecto es bastante extraño. Mandemos la transformación, para que no se rote. El caso es que box-shadow funciona solo cuatro cajas, así que no importa si has cortado imagen y guardado en archivo PNG, trata tu imagen igual que la rectangular; por lo que ha establecido altura y ancho. Puede diferenciar las formas dentro de la imagen. Lo que es genial de la sombra filter-drop es que en realidad respeta esto Podemos tener combinaciones realmente geniales y efectos realmente bonitos. Lo que realmente me gusta de drop-shadow es que también podemos usar RGBA, para que podamos cambiar el canal alfa del color, que
significa que podemos cambiar es transparencia, así que vamos a tener color negro, así que son 000 y si lo harías así, cerrando. Tenemos el color negro pero si agregamos el cuarto valor, que está en el canal alfa, el canal de transparencia, digamos 50 por ciento, se
puede ver que hay transparencia pasando, lo cual es impresionante. A lo mejor vamos a tener un 30 por ciento y vamos a desenfocarlo un poco. A lo mejor no tanto. A lo mejor por cinco píxeles. A lo mejor vamos a tenerlo un poco en las partes inferiores de la imagen. Esto es realmente interesante de hecho porque parece una cosa 3_D, por lo que tu sitio web ya no es plano y puedes jugar mucho con él gracias a la propiedad de filtro de sombras. Te recomiendo encarecidamente que lo revises y que apliques tus propias ideas y soluciones. Lo último que quiero mencionar aquí es que también podemos jugar con el filtro drop shadow usando animaciones CSS. Como puedes ver, la cosa es muy simple, solo
tenemos que aplicar animación, la animación de fotogramas clave que cambia la posición de desplazamiento para x e
ySi miramos en el código, verás que tenemos los fotogramas clave, animaciones drop shadow o para el primer fotograma, tendremos algunos tipos de valores y para el último ha aumentado el offset para el eje x y también la mayor difusión del desenfoque. Tengo mucha curiosidad por lo que vas a lograr mezclando todas estas propiedades como el filtrado y las animaciones, así que avísame poniendo tu trabajo en la sección de proyectos. La última parte de esta clase es, nos vamos a centrar en los modos de mezcla CSS. Es cosa súper emocionante. Entonces, por favor quédate conmigo.
5. Modos de fusión de CSS (introducción: Este es el momento de empezar a jugar con los modos de mezcla. Los modos de mezcla CSS nos permiten mezclar elementos con los elementos detrás de él. Podemos usar el modo mix blend, donde mezclamos el elemento y ese elemento detrás de él. Para el modo de mezcla de fondo, definimos la mezcla entre la imagen de fondo de los elementos y su color de fondo. [ inaudible] podría estar familiarizado con los modos de mezcla. Por ejemplo, en Photoshop donde puedes aplicar ese amigo afecta en la capa D. Por ejemplo, podemos tener terapia o modo de mezcla de superposición o luz de pin. Esto significa que nuestra imagen de la capa dos se mezcla, se mezcla, la capa que tiene detrás de ella. Es por ello que podemos lograr estos increíbles colores. Como puedes ver aquí, tenemos la lista completa de los modos de mezcla disponibles en Photoshop. El bello modo de mezcla CSS es que tenemos el mismo disponible en color. Comprobemos cómo mezcla CSS modos, palabra y práctica. Tenemos la imagen a la izquierda. Es simple etiqueta IMG. Estoy aplicando el modo de mezcla mixta. El primer ejemplo que queremos comprobar como color. A continuación, tenemos quemadura de
color, esquivar color, oscurecer, diferencia ,
exclusión, luz dura, tonalidad, que es muy loco, heredar para que no cambie nada. Aclarar inicial, luminosidad, multiplicar, normal, superposición, saturación, pantalla, luz suave, unset. Podemos jugar con los colores cambiando el color de fondo del padre de ese elemento IMG. Lo haremos azul y lo cambiaremos a exclusión. Tendremos tal resultado. Para hacer más fuerte el efecto, podemos aplicar escala de grises agregando filtro CSS. Gracias a ello, veremos que los colores fueron limitados porque nuestra imagen ahora está en escala de grises por lo que conseguimos solo los niveles tienen colores grises. En el ejercicio aparte, vamos a experimentar con modos de mezcla para crear el efecto de tono dual. Podría estar familiarizado con ello a partir del producto spotify.
6. Efecto duotone: En este ejercicio final, vamos a crear un efecto duotono. El efecto más fino que queremos lograr con los modos de mezcla CSS, es éste el que puedes ver a la izquierda. Me recuerda el efecto duotono, conocido por Spotify. Espero que estén familiarizados con ello. Entonces empecemos a hacer el experimento. Vamos a abrir modos de mezcla duotono carpeta, y Flash índice HTML. Aquí es donde vamos a implementar efecto duotono. Abramos las herramientas Def, e inspeccionemos el código. Hay un par de cosas que hay que hacer, para crear el efecto duotono. En primer lugar, vamos a aplicar el color de fondo al contenedor, que es padre de nuestra imagen. En nuestro caso, es selector de imagen izquierda de clase de imagen. segundo es aplicar una propiedad de modo mezcla mezcla a la imagen, y hacer la escala de grises de la imagen, y tomar el resto de todos para contrastar. Para maximizar el efecto duotono es necesario tener la imagen en escala de grises. Lo último sería crear un pseudo elemento con un color de fondo, por lo que tendremos los dos colores mezclados juntos. Un color que se va a tomar del contenedor padre, y el segundo que se va a tomar del pseudo contenedor. Vamos a aplicarlo por color rojo. Digamos que primero queremos azul. Así es como vamos a ver el color azul, en cambio así. Ahora podemos ver la imagen, agregaremos el modo mix blend, y como puedes ver, la imagen se mezcla con el fondo azul. Pero ahora también tenemos que crear la pseudo clase. Primero vamos a copiar el código e implementarlo en nuestro CSS. Por lo que busco contenedor de imagen izquierda, hice en fondo. Estoy agregando modo mix blend por ahora. Podemos usar aligerar, y también queríamos aplicar filtro, para hacer la imagen en escala de grises. Estoy escribiendo, filtrar escala de grises 1, y también podemos aumentar el contraste un 30
por ciento [inaudible]. Vamos a refrescar la página, y se puede ver que se obtiene el fondo, podemos cambiar, este es el fondo en el contenedor padre, y el individuo consiguió el
aligerar, el modo mezcla mezcla aplicado, y un filtro de escala de grises. También podemos cambiar el modo de mezcla de mezcla a cualquier otro. Voy a sugerir ir ir con oscurecer en lugar de aligerar, porque vamos a usar el aligeramiento para el pseudo elemento. Hablando de pseudo elemento, por supuesto necesitaremos crearlo. Estamos creando el pseudo elemento para el contenedor padre de la imagen, así que en nuestro caso, es la imagen izquierda. Así es como se ve pseudo elemento, y es muy importante definir el contenido, para tener el pseudo elemento generado. Se puede vaciar, al igual que lo hice aquí, y por supuesto definiendo el tamaño de la misma, así que altura y anchura. Tenemos la posición absoluta, Tab cero, cero
izquierdo, y ahora podemos aplicar el color de fondo. Solo estoy agregando a alguien, solo uno al azar, y el modo mezcla mezcla. Como se mencionó anteriormente, voy a aplicar oscurecido. Entonces vamos a guardar, y refrescar la página. Algo ha cambiado. Alguien no fue la mejor opción, así que podemos intentar usar los colores de los amigos. Veamos qué imagen está aquí. Yo sugeriría ir con un rojo, para el contenedor padre, y para, después de dos clase, el azul. Perdón por cambiarlo, eso es experimento. Después estoy pegando este color y para el contenedor padre rojo uno. Yo soy refrescante, y este es el efecto final. Por supuesto, podemos tratar de estar más locos con él, y por ejemplo agregar pantalla, o cualquier otra que se adapte mejor a tus necesidades. Pero así es como básicamente se puede hacer el efecto duotono, mezclando los colores del contenedor padre, con un pseudo elemento aplicado al mismo.
Aga Naplocha, Creative coder & designer
