A pesar de las tendencias de diseño varían cada año, se puede contar con el uso de efectos de sombra como elemento básico de caja de sombra y la sombra base para contribuir positivamente a la estética de un sitio web. Puede usar sombras paralelas para crear efectos agradables y bellamente renderizados sin parecer cursi.
Echemos un vistazo más de cerca a la propiedad de sombra paralela de CSS .
drop-shadow () es un efecto CSS que muestra una sombra alrededor de la forma de un objeto especificado. Aquí está la sintaxis para aplicar una sombra de CSS .
Syntax: filter: drop-shadow(offset-x offset-y blur-radius color);
Hay una amplia gama de funciones de filtro que incluyen desenfoque () , brillo () y sombra paralela () .
offset-x determina la distancia horizontal y offset-y determina la distancia vertical. Tenga en cuenta que los valores negativos colocan la sombra a la izquierda ( desplazamiento-x ) y arriba ( desplazamiento-y ) del objeto.
Los dos últimos parámetros son opcionales. Puede especificar el radio de desenfoque de la sombra como una longitud. De forma predeterminada, está establecido en 0. No puede tener un radio de desenfoque negativo.
El color de la sombra se especifica como. Si no ha especificado un color, sigue el valor de la propiedad de color .
Es posible que ya sepa que box-shadow hace el trabajo bastante bien. Entonces, puede pensar, ¿por qué necesitamos sombras paralelas? Existen numerosos casos en los que la función drop-shadow () es un salvavidas. Echemos un vistazo a algunos de ellos:
A diferencia de una sombra de caja , puede agregar una sombra paralela a formas no rectangulares. Por ejemplo, tenemos un SVG o PNG transparente con una forma no rectangular, por ejemplo, una estrella. Aquí, agregar una sombra que corresponda al objeto en sí se puede completar con una sombra de cuadro o una sombra paralela . Considere ambos escenarios:
HTML
CSS
.star-img img { display: inline-block; height: 15em; width: 25em; } .box-shadow { color: red; box-shadow: 0.60em 0.60em 0.2em; } .drop-shadow { filter: drop-shadow(0.60em 0.60em 0.2em); }
Salida :
Al comparar ambos efectos, es evidente que una sombra de caja da una sombra rectangular; tampoco importa si la imagen es transparente o ya posee un fondo. Por otro lado, la sombra paralela le permite crear una sombra que se adapta a la forma de la imagen en sí.
Los factores limitantes son que la función drop-shadow () acepta todos los parámetros de tipo excepto la palabra clave insertada y el parámetro de propagación .
Hay varios casos en los que es posible que deba construir componentes superponiendo ciertos elementos. Si está usando box-shadow , enfrentará el problema de tratar de proyectar una sombra de la manera correcta. Así es como funciona al agrupar una imagen y un componente de texto:
HTML
Live in the moment
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas porro quo nam odit, non debitis, facilis eligendi ea labore obcaecati ut quia asperiores. Modi, corrupti commodi quisquam ex numquam incidunt.
CSS básico
body { padding: 5em 1em; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } h2 { font-size: 2rem; } p { font-size: 0.8rem; } .parent-container { display: flex; flex-direction: column; height: 17rem; width: 50em; } .image-container img { width: 15em; position: absolute; z-index: 1; top: 2em; left: 1.5em; } .text-container { color: rgb(255, 236, 236); background-color: rgb(141 0 35); width: 30rem; padding: 3rem; align-self: flex-end; position: relative; }
Ahora, aplique la caja de sombra y sombra base para ver la diferencia.
.drop-shadow { filter: drop-shadow(0.4rem 0.4rem 0.45rem rgba(0, 0, 30, 0.5)); } .box, .box img { box-shadow: 0.4rem 0.4rem 0.45rem rgba(0, 0, 30, 0.3); }
Producción:
Como puede ver, la sombra de cuadro se aplica a cada elemento individualmente, mientras que la sombra paralela los agrupa a ambos y aplica la sombra.
Puede utilizar la propiedad clip-path para recortar una determinada región que determina qué partes de una imagen o elemento deben mostrarse. El filtro de sombra paralela nos permite crear una sombra paralela en el elemento recortado aplicándolo al padre de ese elemento:
HTML
CSS
.parent-container { filter: drop-shadow(0rem 0rem 1.5rem maroon); } .clipped-element { width: 50em; height: 50em; margin: 0 auto; background-image: url(smiling-girl.jpg); clip-path: circle(50%); background-size: cover; background-repeat: no-repeat; }
Producción:
Hemos recortado el 50% de la imagen con una ruta circular. Por lo tanto, el filtro de sombra paralela se aplica solo a la parte visible de la imagen. ¿No es asombroso?
Como comentamos anteriormente, la sombra paralela no es compatible con el parámetro de propagación . Esto significa que la creación de un efecto de contorno no sería posible usando la función drop-shadow () porque se mata en todas partes. También, se hace que diferentes efectos de sombra de la caja-sombra y sombra de texto (con los mismos parámetros). Puede sentir que las diferencias entre la sombra de cuadro y la sombra paralela se reducen al modelo de cuadro CSS . Uno lo sigue y el otro no. He aquí un ejemplo:
HTML
Every MUO article will bring you one step closer.
Every MUO article will bring you one step closer.
Every MUO article will bring you one step closer.
CSS básico
body { padding: 5em 1em; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } .parent-container { width: 72rem; } p { font-size: 3em; font-style: bold; }
Aplicar efectos de sombra
.drop-shadow { filter: drop-shadow(0.5em 0.5em 0.1em #555); } .box-shadow { box-shadow: 0.5em 0.5em 0.1em #555; } .text-shadow { text-shadow: 0.5em 0.5em 0.1em #555; }
Producción:
Se puede ver que la caja de sombra da una, sombra más oscura más pesada que la sombra de texto y las sombras paralelas . Además, hay una ligera diferencia en el posicionamiento de la sombra entre la sombra de texto y drop-sombra . Sin embargo, es posible que prefiera diferentes efectos de sombra según sus necesidades.
La función de sombra () es compatible con todos los navegadores modernos, excepto los navegadores más antiguos como Internet Explorer. Aunque no es algo que obstaculice seriamente la experiencia de usuario, puede agregar una consulta de características con una reserva de sombra de cuadro .
La popularidad de box-shadow es bastante obvia debido a la multitud de casos de uso. Sin embargo, la función drop-shadow () está muy infrautilizada. Esperamos que experimente con diferentes efectos de sombra e intente implementar la sombra paralela en sus proyectos futuros.
Las pseudoclases agregan una gama completamente nueva de funcionalidades a CSS y su repertorio de desarrollo web personal. Obtenga más información sobre ellos para convertirse en un desarrollador web más competente y eficiente.
Si bien puede usar una calculadora gráfica en su computadora, el intérprete del lenguaje de programación Python puede funcionar como una calculadora de escritorio. Es una broma de ejecución tan popular en la comunidad de Python que se menciona en el tutorial oficial. Así es como puedes usar Python como calculadora.
Como programador, debe enfrentar desafíos para sobrevivir y construir algunas maravillas en el campo del desarrollo o la programación. Por lo tanto, si está buscando aprender un lenguaje de programación avanzado para mejorar sus habilidades profesionales, Java es uno de los mejores prospectos que existen.
Aprender un nuevo lenguaje de programación como Python se vuelve fácil si tiene una hoja de ruta completa que detalla qué conceptos aprender como principiante y cómo progresar más para alcanzar el siguiente hito. Incluso los programadores intermedios deberían repasar con frecuencia sus conceptos básicos para construir una base sólida para ellos mismos.
Hoy en día, es una práctica común crear un sitio web o una aplicación que ajuste su interfaz de usuario según el navegador o el dispositivo. Hay dos enfoques para lograr este objetivo. La primera implica la creación de diferentes versiones de su sitio web o aplicación para diferentes dispositivos. Pero es ineficiente y puede provocar errores impredecibles.
Trabajar con números es una parte integral de la programación. Todos los lenguajes de programación brindan soporte para manipular números de muchas formas diferentes. En este artículo, aprenderá a encontrar el número total de dígitos en un entero utilizando enfoques iterativos, basados en registros y basados en cadenas.
Los contenedores son muy beneficiosos para el desarrollo, la implementación y la administración de software en un entorno virtual. Docker es útil en el proceso de contenedorización, pero no es la única plataforma que existe. Si está buscando algunas alternativas a Docker, no busque más. Esta lista muestra algunas alternativas de Docker eficientes y ricas en funciones para usar en su próximo proyecto.
SQL vs. NoSQL: ¿Cuál es la mejor base de datos para su próximo proyecto?
Incrustar servicios de terceros en sus publicaciones de WordPress es una forma emocionante de cautivar el interés de un visitante. El contenido incrustado también proporciona señales visuales que facilitan el escaneo. WordPress ha facilitado la adición de este tipo de contenido.
Node.js es un entorno de ejecución de JavaScript que le permite ejecutar JavaScript fuera de los navegadores web, lo que lo convierte en una opción popular para desarrollar todo tipo de aplicaciones. Parte de su popularidad se debe a la gran cantidad de paquetes de NPM que existen para facilitar la experiencia del desarrollador.
La solidez es el lenguaje de programación utilizado por los contratos inteligentes en la cadena de bloques Ethereum. Es un lenguaje de programación orientado a objetos de tipo estático.
Las insignias de GitHub pueden aumentar la legibilidad de un repositorio al proporcionar a los usuarios una forma rápida de capturar las métricas del repositorio. Las insignias se pueden incrustar en su README.md para aclarar la importancia y la necesidad de su proyecto a otros desarrolladores. Como resultado, los lectores obtienen una idea muy rápida del repositorio al verificar las insignias adjuntas.
Los días de celebración internacional son una buena forma de reconocer los asuntos sociales, los días históricos y las respectivas carreras. El Día Internacional de los Programadores celebra el papel que desempeñan los programadores para mejorar la vida cotidiana. El mundo civilizado en el que vivimos es producto del arduo trabajo de los programadores.
Ya sea una consulta de base de datos o resultados de operaciones matemáticas, el método de formato de cadena de Python ofrece una forma más dinámica y atractiva de presentar resultados a un usuario.
A principios de este año, Microsoft lanzó la versión preliminar de Visual Studio 2022 en el salvaje mundo de la programación. ¡Estas son buenas noticias! Es un IDE extremadamente popular, pero debido a una puesta a punto o tal vez incluso una revisión, dado el ritmo de cambio en el ecosistema DevOps en el que prospera.
Las métricas de software son medidas que se utilizan para cuantificar varios aspectos de su software. Estos aspectos pueden variar desde el costo, la calidad y la eficiencia del equipo de desarrollo.
Como usuario de Windows, probablemente al menos una vez se haya encontrado con las palabras .NET Framework. Es un marco de software desarrollado por Microsoft que le permite crear y ejecutar programas C #, C ++, F # y Visual Basic. La última versión de .NET es 4.8, pero es posible que su computadora necesite una versión anterior de .NET (como .NET 3.5) para ejecutar algunas aplicaciones.
Si es un desarrollador de Python, puede beneficiarse enormemente de la variedad de marcos disponibles. Si bien algunos marcos son más adecuados para grandes ecosistemas, otros se especializan en cumplir objetivos de desarrollo específicos. Siga leyendo para conocer las características básicas, los usos y las diferencias entre dos marcos de Python: Flask y CherryPy.
A muchos programadores les encanta resolver problemas matemáticos complicados utilizando código. Ayuda a agudizar la mente y mejorar la capacidad de resolución de problemas. En este artículo, aprenderá a encontrar los cuadrados y cubos perfectos de n dígitos más pequeños y más grandes utilizando Python, C ++ y JavaScript. Cada ejemplo también contiene una salida de muestra para varios valores diferentes.
Ejecutar Python desde la terminal a menudo es inevitable. Sin embargo, si acaba de instalar Python en Windows 10 por primera vez, ejecutarlo a través de la Terminal de Windows solo es posible si se agrega a la variable de entorno Windows PATH.
La declaración if es la fuerza impulsora de la programación lógica. Como resultado, una mejor comprensión de Pythons es una adición significativa a sus habilidades de programación de Python.
Si bien puede usar una calculadora gráfica en su computadora, el intérprete del lenguaje de programación Python puede funcionar como una calculadora de escritorio. Es una broma de ejecución tan popular en la comunidad de Python que se menciona en el tutorial oficial. Así es como puedes usar Python como calculadora.
Como programador, debe enfrentar desafíos para sobrevivir y construir algunas maravillas en el campo del desarrollo o la programación. Por lo tanto, si está buscando aprender un lenguaje de programación avanzado para mejorar sus habilidades profesionales, Java es uno de los mejores prospectos que existen.
Aprender un nuevo lenguaje de programación como Python se vuelve fácil si tiene una hoja de ruta completa que detalla qué conceptos aprender como principiante y cómo progresar más para alcanzar el siguiente hito. Incluso los programadores intermedios deberían repasar con frecuencia sus conceptos básicos para construir una base sólida para ellos mismos.
Hoy en día, es una práctica común crear un sitio web o una aplicación que ajuste su interfaz de usuario según el navegador o el dispositivo. Hay dos enfoques para lograr este objetivo. La primera implica la creación de diferentes versiones de su sitio web o aplicación para diferentes dispositivos. Pero es ineficiente y puede provocar errores impredecibles.
Trabajar con números es una parte integral de la programación. Todos los lenguajes de programación brindan soporte para manipular números de muchas formas diferentes. En este artículo, aprenderá a encontrar el número total de dígitos en un entero utilizando enfoques iterativos, basados en registros y basados en cadenas.
Los contenedores son muy beneficiosos para el desarrollo, la implementación y la administración de software en un entorno virtual. Docker es útil en el proceso de contenedorización, pero no es la única plataforma que existe. Si está buscando algunas alternativas a Docker, no busque más. Esta lista muestra algunas alternativas de Docker eficientes y ricas en funciones para usar en su próximo proyecto.
SQL vs. NoSQL: ¿Cuál es la mejor base de datos para su próximo proyecto?
Incrustar servicios de terceros en sus publicaciones de WordPress es una forma emocionante de cautivar el interés de un visitante. El contenido incrustado también proporciona señales visuales que facilitan el escaneo. WordPress ha facilitado la adición de este tipo de contenido.
Node.js es un entorno de ejecución de JavaScript que le permite ejecutar JavaScript fuera de los navegadores web, lo que lo convierte en una opción popular para desarrollar todo tipo de aplicaciones. Parte de su popularidad se debe a la gran cantidad de paquetes de NPM que existen para facilitar la experiencia del desarrollador.
La solidez es el lenguaje de programación utilizado por los contratos inteligentes en la cadena de bloques Ethereum. Es un lenguaje de programación orientado a objetos de tipo estático.
