Cómo crear efectos Shadow CSS

1. Introducción: Ahora nadie puede disputar que una buena Sombra Sombra puede acentuar tu diseño y sutiles formas insatisfactorias. Pero el uso de la configuración estándar en la mayoría de los constructores de páginas dará lugar tanto a resultados limitados como a sombras que se ven un poco Samy, en el video de hoy, te voy a mostrar cómo podrías muy rápida y fácilmente comienzan a crear sombras más únicas y , a menudo, más avanzadas. El normalmente se ve genial, pero en realidad se ve mucho más realista, interesado, cool. Vamos a indagar y echar un vistazo a los resultados hacia los que trabajamos hoy. Entonces, como hemos establecido, las sombras sueltas pueden ser bastante geniales, pero también son bastante limitadas. Si estás usando una herramienta como elemental o cualquier cosa en la que uses cualquiera de las configuraciones predefinidas. Entonces es agradable tener una forma más flexible de hacer estas cosas, además de poder hacer algunas cosas más avanzadas. Déjame mostrarte rápidamente los tres ejemplos que te voy a mostrar en el video de hoy, pero hay opciones casi ilimitadas en las que podrías llevar esto en cualquier dirección que quieras para apilar diferentes efectos uno encima del otro. Todo se hace a través de CSS prácticamente para que puedas ser tan creativo como quieras. Basta con patearlo echando un vistazo a cómo creamos esta primera sombra paralela. Y esto es realmente lo más sencillo del lote. Se trata de un look más realista en sombra con un aclarado proveniente de la parte superior. Tenemos una sombra más larga y verás que naturalmente se cae bastante bien, pero solo tengan que aguantar conmigo porque sí se ve mucho más realista. Entonces, ¿cómo haríamos esto? Lo que vamos a usar un poco de CSS personalizado, y también vamos a usar un recurso en línea gratuito que le permite configurar visualmente, modificar y obtener todo de la manera que desee y luego simplemente tomaese código. No obstante, si te sientes cómodo haciendo esto manualmente, por todos los medios, haz eso. 3. Brumm: Entonces el primer tipo que vamos a estar usando es AF link estará en la descripción. Para que puedas comprobar esto por ti mismo. Ahora bien, esta es una gran manera de poder visualmente configurar y crear y ajustar y obtener exactamente el tipo de efecto de sombra paralela que deseas usando este recurso gratuito. Entonces tenemos este pequeño bloque de código y está usando el selector de CSS shadow box. Así que puedes ver que hay todos los diferentes ajustes que se están utilizando en esta configuración en particular donde tenemos todos estos controles en el lado derecho, que nos permiten realmente afinar y configurar esto. Entonces podemos elegir la capa de sombras y este tipo de apila cuántas capas de sombra hay para crear un aspecto más realista en efecto. Generalmente, cuantas más capas tengas, más realista que efecto va a aparecer. Como pueden ver, podemos arrastrar estos hacia arriba como lo hacemos nosotros. Nuestras definiciones de sombra-caja aumentan. Lo mismo ocurre con las capas reales de nuestra sombra. También podemos ajustar la transparencia final para que puedas ver si queremos hacer una sombra mucho más fuerte, puedes aumentar esto fácilmente como nos parezca. Ahora obviamente no querrías enloquecer con esto. Pero podrías estar usando algo que está sobre un fondo más oscuro y usar una transparencia más clara simplemente no lo muestra. Para que puedas hacer eso. También puedes revertir eso si quieres revertir el Alfa y puedes ver que simplemente voltea el sombreado a la dirección opuesta. Incluso se puede ajustar la curva de la transparencia real que se está utilizando. Verás a medida que ajustamos esto, se hace más fuerte en las ubicaciones. Podemos suavizarla si queremos ajustar todas estas, ajusta tu transparencia. Ajusta tus capas de transparencia hasta obtener el efecto exacto que deseas. Como te digo, sí tienes unos controles realmente buenos dentro de estos constructores de páginas. Y uso Elementor como ejemplo, pero hay muchos otros creadores de páginas que te dan esta funcionalidad. Pero no se meten tan profundos como esto nos permite. Una vez hecho eso, entonces vas George, distancia vertical, que puedes ajustar, puedes ver que podemos aumentar la distancia vertical para que podamos hacer que parezca que la fuente de luz está más fuerte en la parte superior y podemos ajustar nuestra transparencia para hacerla aún más fuerte de nuevo, aumentar o disminuir el número de capas de sombra. Para que podamos conseguir que esto se vea lo más realista que podamos. Entonces vamos a tirar un poco de eso hacia atrás. Entonces tienes de nuevo, la curva que te permite ajustar esa distancia vertical final. Se puede ver a medida que nos ajustamos que cambiamos el aspecto real de la propia sombra. Y se puede ver que tenemos este tipo de representación visual de estos bloques en el fondo que es un poco show en el fall off que vamos a crear. Es una sombra mucho más fuerte en la parte inicial donde son mucho más rápidos, se caen hacia el final. Lo mismo va para la fuerza de golpe final. Se puede ajustar eso y se puede ver si llevamos eso demasiado lejos, empezamos a conseguir este efecto de look de caja loco. Tomemos eso de nuevo para que siga siendo bastante realista. Y otra vez, tienes tu fuerza azul. Esta es tu área más enfocada en el lado derecho y el decaimiento va hacia el lado izquierdo. Y de nuevo, podemos ajustar esta curva para crear un look mucho más realista en sombra hasta que estemos realmente contentos con eso. Entonces tienes por fin, puedes reducir la propagación de ahí. Entonces esto es una especie de apretar la sombra por lo que parece que la luz es más de la parte superior brillando hacia abajo y por lo tanto los bordes no son tan en sombra. Pero la parte media es, de nuevo, como digo, se puede controlar y ajustar la transparencia de todos estos para conseguir un efecto de aspecto realmente cool. Una vez que estés contento con eso, tenemos que tomar eso más y luego en nuestro creador de páginas en aplicar esto a través de CSS. Ahora puedes usar esto dentro de tu tema si lo deseas. Solo necesitas asegurarte de que usando una clase CSS o ID. Y luego lo asocias con el elemento en particular que deseas, ya sea una imagen, si se trata de una caja, a lo que quieras configurarlo se aplica. Así que una vez que tengamos eso, vamos a tomar este pequeño bloque de código como copiar eso. Volvamos a brincarnos en elemental. Y como dije, solo estoy usando elemental este ejemplo. No es necesario que te acerques a la opción CSS personalizado. Y se puede ver que ya tengo las opciones dentro de esto. Deshagámonos de eso por completo en este momento. Ahora con eso eliminado, quiero aplicar esto a la imagen que tenemos aquí, que es, como pueden ver, esto es lo que se seleccionó. Entonces lo que tenemos que hacer cuando se trata elemental es que vamos a empezar esto con selector. Y esto solo dice dos elementos o este es el ítem específico que quiero apuntar con este CSS. Ahora porque queremos adjuntar este estilo a la imagen, sólo vamos a poner la etiqueta HTML para imagen, que es IMG. Abra nuestros corchetes, cierre nuestros corchetes. Y ahora hemos enviado el selector CSS para agarrar esa imagen y hacer lo que tengamos que hacerle. Entonces con eso en su lugar, menos solo pegue ese código dentro de ahí. Se puede ver que ahí está nuestra sombra. Hemos creado ese look más realista en sombra y lo aplicamos específicamente a esta imagen directamente dentro de elemental. Pero puedes usar las herramientas que quieras. También podrías entrar y puedes seleccionar diferentes elementos y puedes asignar sus propias clases CSS. Y probablemente podrías asignar esto a través tu personalizador real para tu tema. Y entonces puedes aplicar esto como y cuando quisieras. Solo te estoy mostrando esto porque quiero mostrarte cómo interactúa el código con el propio ítem. Entonces así es como podemos crear esta sombra de aspecto más realista usando este recurso gratuito en línea y punto f Echemos un vistazo ahora a la siguiente opción. Entonces vamos a volver. Y la siguiente que queremos es esta opción de sombra paralela más flexible. Hemos visto cómo agregar esto a una imagen. ¿ Qué tal si realmente quieres configurarlo en el contenedor en sí? Por lo que puedes ver que tenemos esta sección y queremos aplicarle una sombra paralela. Entonces aquí adentro tenemos un título y tenemos algún texto. Vamos a seleccionar esta sección en particular. Vamos a volver a lo avanzado y volver a nuestro CSS personalizado. Entonces volvemos a hacer lo mismo, vamos a hacer selector. Pero en lugar de poner IMG o algo así para el elemento HTML, lo vamos a dejar en blanco. Y simplemente lo vamos a poner en el corsé rizado, cerrar el corsé rizado. Así que ahora hemos apuntado a esta sección en particular y podemos aplicar el estilo CSS a eso. Así que he creado una ligera variación en lo que creamos antes. Voy a copiar esto y vamos a volver a brincar y simplemente pegar eso en nuestro selecto el área. Y puedes ver que hay nuestra a nuestra sombra paralela aplicada a esa sección. Por lo que tienes una enorme cantidad de flexibilidad. No te limitas a aplicarlo únicamente a elementos HTML. Todavía puedes aplicarlo dentro del elemental parecido a una herramienta al contenedor en sí. Y que eso se envuelva en torno a varios elementos diferentes, como digo en este ejemplo, tenemos el título, tenemos algún texto debajo de él. Podemos agregar cualquier otra cosa que queramos a esto. Podemos decir, vamos a caer. No lo sé. Digamos que vamos a dejar caer una imagen ahí dentro. Y solo escogeremos una imagen y simplemente la vamos a hacer estallar por dentro. Ahí. Ahí vamos. Entonces si hacemos un poco de espacio para esto ahora, solo para que tengamos suficiente espacio para ver, todo simplemente pondrá unos 100 pixeles de relleno por ahí. Se puede ver que se está aplicando nuestra sombra paralela para contar todo el contenedor. Tan bastante chulo. Ahora que ya hemos visto cómo hacer eso. 6. Usa otra forma de crear sombra: ¿ Qué tal algo un poco más avanzado? Ya puedes ver que tenemos este logo de ACF. Ahora bien, si te dijera que esta sombra paralela era parte del PNG o SVG, probablemente pensarías que eso suena bastante razonable. Sin embargo, no lo es. Todo se hace a través de CSS. Entonces lo vamos a hacer, te voy a mostrar cómo puedes usarlo. Otro recurso en línea para hacer precisamente eso. Y cómo conseguimos la diferencia entre el box-shadow y otro selector CSS. Entonces echemos un vistazo a eso siguiente. Entonces así es como vamos a configurar las cosas. Se puede ver si elimino este pedacito de código, estamos de vuelta a lo que deberíamos empezar, que es simplemente básicamente un PNG transparente. Si ponemos un fondo de color diferente aquí, verán exactamente a qué me refiero. Entonces sólo diremos, allá vamos. Ahí está tu PNG transparente. Entonces solo pondré un poco de color ahí para que vean lo que estoy haciendo. Ahora. Tenemos que hacer es apuntar esa imagen dentro de esa área. Entonces vamos a volver a hacer lo mismo. Vendremos a nuestro CSS Personalizado. Podemos seleccionar esta área. Podemosseleccionar esto. En realidad no importa de qué manera quieras ir sobre hacerlo. Voy a volver a entrar y vamos a seleccionar un como lo hemos hecho antes. Img, como lo hicimos antes. Queremos seleccionar solo la imagen y abriremos y cerraremos esos corchetes. Entonces tenemos las cosas arregladas. Así que ahora vamos a usar una variante ligeramente diferente. Hemos visto sombra-caja. Esta vez en realidad vamos a estar usando drop-shadow. La sombra paralela respeta la forma de las imágenes PNG y SVG. Entonces aquí es donde si tienes un PNG con transparencia o un logo SVG por ejemplo, y quieres aplicar una sombra paralela. Esta podría ser una forma realmente genial de hacerlo. Ahora te voy a mostrar solo un ejemplo realmente sencillo, pero recomendaría echar un vistazo a este sitio. Dejaré caer un enlace en la descripción, que entra en mucho más detalle sobre lo que puedes hacer, cómo puedes configurar las cosas y todo ese tipo de cosas realmente útiles. Entonces lo que vamos a hacer es que vamos a tomar esto un poco de código que dice que hay un filtro que se está aplicando, un filtro CSS. Y vamos a estar usando Drop Shadow y luego tenemos todas las opciones después. Entonces el offset, la transparencia, los colores que se usan, todo ese tipo de cosas. Entonces sólo copiaremos esto como lo hemos hecho antes. Volveremos a brincar. Tenemos nuestro centro selecto. Digamos que si no estás usando elemental, puedes configurar esto para apuntar a ese objeto específico muy fácilmente. Entonces simplemente se cayó ahí dentro y boom, ahí está nuestra sombra aplicada. Respetando la forma real de la imagen PNG, el contenido de la misma e ignorando la transparencia a su alrededor. Por lo que si quisieras, podrías ajustar fácilmente el offset. Entonces digamos que vamos a poner eso a uno. Y se puede ver que establece el offset hará lo mismo en el siguiente valor. Pon eso en dos, y ahora tenemos un efecto mucho más fuerte. Podemos ajustar otros valores por etapas. Vamos a poner eso a uno y se puede ver que ahora reduce el azul. O podríamos poner esto en algo así como, digamos solo ocho. Obtenemos un azul mucho más suave, entonces se pueden ajustar los otros valores. Entonces podemos decir que queremos poner esto a uno y se puede ver que ahora realmente lo reducimos o aumenta la transparencia, lo hace mucho menos evidente. Puedes ajustar estos, puedes configurarlos, obtenerlo exactamente lo que quieras. Juega hasta que tengas el efecto exacto con el que estés contento. Pero puedes ver que esta es una muy buena manera de no dañar para editar imágenes, pero aún así aplicarles cosas como sombras desplegables. Efecto realmente cool. Y eso es solo algunas de las cosas que puedes hacer con CSS usando este tipo de técnicas que hemos cubierto hoy. Pondré todos los enlaces a todos estos diferentes sitios que han demostrado. Para que puedas probar esto por ti mismo. Ahora creo que puedes estar de acuerdo que esas sombras se ven mucho más convincentes que las estándar de pantano que probablemente hemos estado usando para absolutamente. Las edades siempre han sido hasta la próxima vez. Cuídate.