¿Quiere 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 usar software complicado. El beneficio de usar CSS para agregar efectos de sombra es que puede orientar los elementos con precisión y modificarlos cuando sea necesario. En el caso de las imágenes, añadir el efecto de sombra mediante 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 utilizando 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 o dentro del cuadro de contenido. Ahora, es posible que se pregunte qué diablos significa un cuadro de contenido. En términos simples, un cuadro de contenido no es más que un elemento HTML como P, DIV, etc.
Sintaxis de sombra de cuadro CSS
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 requerido y cuando establece valores positivos (como 10 px), 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 requerido y cuando establece valores positivos (como 10 px), 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 desenfoca 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 establecerlo 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 diferencial. Si no desea el efecto de dispersión, puede omitir el valor o establecerlo en «0».
Color (valor requerido): Puede establecer cualquier color que desee usando hexadecimal, RGB (rojo, azul, verde, alfa), HLSA (tono, saturación, luminosidad, alfa) y colores 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
Usando 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, 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 definidos y se parece a esto.
Una de las cosas más locas de la propiedad Box-Shadow es que te 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 box-shadow, 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 desea. Simplemente juegue y vea qué se ajusta 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”.
Agregue 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 manera, solo las imágenes con esa clase CSS específica tendrán el efecto de sombra.
Para crear una nueva clase CSS, puede usar CSS personalizado simple Complemento de wordpress 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 ícono para esa imagen (la que parece un lápiz). Bajo la Avanzado opción buscar Imagen Clase CSS y escriba el nombre de la clase que ha definido en nuestra hoja de estilo. Para esta instancia, nuestro nombre de clase es efecto de sombra, una vez hecho guardar 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 Clase CSS tendrán Sombra de cuadro a su alrededor. Si su publicación de blog tiene 20 imágenes, tendrá que hacerlo manualmente para 20 imágenes, lo cual es un poco tedioso. Sin embargo, aún le ahorrará mucho tiempo al 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 conceptos 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, puede utilizar un generador de sombras de caja también.
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.