¿Desea agregar un efecto de sombra paralela a las imágenes de su sitio web u otro contenido? Se puede hacer usando CSS, sin necesidad de utilizar software complicado. El beneficio de usar CSS para agregar un efecto de sombra es que puede apuntar a los elementos con precisión y modificarlos cuando sea necesario. En el caso de las imágenes, agregar el efecto de sombra a través de CSS elimina la necesidad de modificarlas permanentemente.
Puede agregar el efecto de sombra paralela usando una propiedad CSS simple llamada Box Shadow a casi cualquier elemento HTML o imagen. Box Shadow es una propiedad CSS simple que adjunta una o más sombras a un elemento usando compensaciones, desenfoque, radio y color. Box Shadow se introdujo en CSS hace mucho tiempo y es compatible con todos los navegadores modernos.
Lo mejor de Box Shadow es que puede agregar un efecto de sombra fuera del cuadro de contenido o dentro. Ahora, es posible que se pregunte qué significa un cuadro de contenido en el mundo. En términos simples, un cuadro de contenido no es más que un elemento HTML como P, DIV, etc.
Sintaxis CSS Box Shadow
La sintaxis de la propiedad Box-Shadow será algo como esto.
box-shadow: <horizantal-offset> <vertical-offset> <blur-radius> <spread-radius> <color>;
Desplazamiento horizontal (valor requerido): Este es un valor obligatorio y cuando establece valores positivos (como 10px), la sombra se empujará hacia el lado izquierdo horizontalmente. Un valor negativo (como -10px) empujará la sombra hacia el lado derecho. Puede establecerlo en 0 si no desea compensar la sombra.
Desplazamiento vertical (valor requerido): Este es un valor obligatorio y cuando establece valores positivos (como 10px), la sombra se empujará hacia abajo verticalmente. Los valores negativos (como -10px) empujarán la sombra hacia arriba verticalmente. Puede establecerlo en 0 si no desea compensar la sombra.
Radio de desenfoque (valor requerido): Este valor difumina la sombra para que no tenga bordes duros. Cuanto más alto establezca el valor, mayor será el efecto de desenfoque. Si no desea el efecto de desenfoque, puede configurarlo en «0».
Radio de propagación (valor de opciones): Este es un valor opcional que extiende la sombra según el valor que establezca. Cuanto mayor sea el valor, mayor será el margen. Si no desea el efecto de propagación, puede omitir el valor o establecerlo en «0».
Color (valor requerido): Puede establecer el color que desee utilizando colores hexadecimales, RGB (rojo, azul, verde, alfa), HLSA (tono, saturación, luminosidad, alfa) y HTML con nombre. Si no configuró ningún color, el navegador establecerá un color predeterminado. El color predeterminado depende completamente del navegador que esté utilizando. Por lo tanto, siempre es una buena idea establecer el color.
Agregar sombra de cuadro CSS a una imagen o cuadro de contenido
Con la sintaxis anterior, puede agregar el efecto de sombra paralela a cualquier elemento con facilidad. Por ejemplo, si desea agregar el efecto de sombra con desenfoque y propagación a un elemento div, entonces todo lo que tiene que hacer es apuntar a ese elemento usando la etiqueta del elemento o su clase CSS o ID y completar los valores de la sombra del cuadro propiedad. Se verá algo como esto.
.shadow-effect {
box-shadow: 3px 3px 10px 2px #a9a1a1;
}
Resultado:
Si no desea difuminar la sombra pero desea extenderla, el código se verá así.
.shadow-effect {
box-shadow: 5px 5px 0px 2px #a9a1a1;
}
Como puede ver, configuré el radio de desenfoque en 0px. El efecto de sombra resultante tiene bordes duros y se parece a esto.
Una de las cosas más locas de la propiedad Box-Shadow es que le permite agregar múltiples sombras. Para hacer eso, todo lo que tiene que hacer es especificar valores separados por comas. La sintaxis se verá así.
.shadow-effect {
box-shadow: 10px 10px 0 blue, 15px 15px 0 red, 20px 20px 0 green;
}
Al agregar «recuadro» a la propiedad de sombra de cuadro, puede mostrar el efecto de sombra dentro del cuadro de contenido.
.shadow-effect {
box-shadow: inset 3px 3px 10px 2px #a9a1a1;
}
Resultado:
Estos son solo algunos ejemplos de cómo puede agregar el efecto de sombra a cualquier cuadro de contenido o imagen. Simplemente modificando diferentes valores, puede obtener el efecto de sombra que desee. Simplemente juegue y vea qué se adapta a sus necesidades.
Generador de sombras de texto CSS
Si desea agregar la sombra paralela al texto, debe usar la propiedad Text-Shadow. La sintaxis es muy similar a la propiedad Box-Shadow, pero no hay un radio de extensión en la propiedad Text-Shadow. Aquí está la sintaxis.
text-shadow: <horizantal-offset> <vertical-offset> <blur-radius> <color>;
Cuando reemplace la sintaxis anterior con valores reales, se verá así.
p {
text-shadow: 1px 1px 2px #333333;
}
El efecto resultante será algo como esto.
A diferencia de la propiedad box-shadow, el valor de desenfoque en Text-Shadow es opcional. es decir, si no desea que la sombra del texto sea borrosa, puede omitir el valor o establecerlo en “0”.
Agregar CSS Box Shadow en imágenes específicas en WordPress
Ahora que hemos descubierto cómo agregar un efecto de sombra a las imágenes usando CSS, ahora necesitamos una forma de agregarlo en imágenes específicas sin afectar otras imágenes en el sitio web.
Para hacerlo, simplemente puede crear una nueva clase CSS y agregarla a la imagen cuando sea necesario. De esta forma, solo las imágenes con esa clase CSS específica tendrán el efecto de sombra.
Para crear una nueva clase de CSS, puede usar el complemento de WordPress CSS personalizado simple o mLa mayoría de los temas de WP también vienen con un archivo custom.css. También puede agregar el código CSS en ese archivo.
A continuación, haga doble clic en el Editar icono de esa imagen (el que parece un lápiz). Bajo la Avanzado buscar opción Clase CSS de imagen y escriba el nombre de la clase que ha definido en nuestra hoja de estilo. Para este caso, nuestro nombre de clase es efecto de sombra, una vez hecho esto, guarde los cambios.
Y luego haga clic en «Guardar borrador» o ‘Actualizar‘para actualizar la página de WordPress. Cuando se actualiza la página, el resultado se ve así:
Solo las imágenes con efecto de sombra de clase CSS tendrán Box Shadow a su alrededor. Si la publicación de tu blog tiene 20 imágenes, tendrás que hacerlo manualmente para 20 imágenes, lo cual es un poco tedioso. Sin embargo, todavía le ahorrará mucho tiempo de editarlo en Photoshop.
Como puede ver, agregar el efecto de sombra paralela usando CSS no es nada difícil. Los ejemplos que he mostrado aquí son solo los básicos. Simplemente juegue con diferentes valores y verá cuán efectivas son realmente las propiedades Box-Shadow y Text-Shadow. Para facilitar su uso, también puede utilizar un generador de sombras de caja.
Espero que ayude. Comente a continuación compartiendo sus pensamientos y experiencias sobre el uso del método anterior para agregar un efecto de sombra paralela a las imágenes o cuadros de contenido usando CSS.