Efectos de sombra CSS

efectos de sombra en CSS : Aquí, vamos a aprender acerca de la sombra efectos en CSS como efectos de sombra de texto , efectos caja de sombra , etc.

efectos de sombra en CSS

siempre es bueno hacer nuestras páginas web elegante y hermosa, páginas web que los usuarios class ojos al instante, pero uno se confunde en cuanto a la forma de estilo de su página web. La confusión es muy de fiar demasiado ya que hay una gran cantidad de styling técnicas que se pueden aplicar en su página web. Por lo tanto, esta sección se trata de un método de este estilo, que es sombras en CSS .

Usando propiedad CSS sombra puede crear sombras catch texto y cajas. Ahora que somos conscientes de lo que esta propiedad es, vamos a discutir algunas de sus propiedades.

La sombra de texto propiedad

La primera y muy fácil propiedad es propiedad text-shadow . Como su nombre indica, utilizando propiedad text-shadow se puede aplicar sombras al texto. La fabricación de su humo de texto y con estilo . Los valores de esta propiedad se mencionan a continuación

propiedad text-shadow puede tomar hasta cuatro valores que más marca la implicación fácil,

  • Horizontal sombra
  • Sombra vertical
  • efecto de desenfoque
  • color

sintaxis:

Element {
text-shadow: 3px 2px 2px #000000;
}

texto normal sombra

el efecto de sombra de texto normal ayuda a añadir sombra a su texto en un método muy básico, con no mucho de codificación y fácil de implementar. Esto podría ser a entender mejor con la ayuda de un ejemplo.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: #f40;
text-shadow: 3px 4px 4px #0011f3;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>

salida

CSS Shadow Effects - 4

Como se puede ver, en el ejemplo anterior, la normal de sombra de texto efecto se aplica y listo!

que brilla texto efecto de sombra

Sería muy bueno si pudiéramos hacer nuestro texto resplandor también. Así que, ¿por qué esperar y avancemos con la propiedad sombra efecto de texto rojo vivo, que esta propiedad es específicamente for hacer que el texto se ilumine.

Un ejemplo sin duda puede ayudar a entender mejor.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: #f40;
text-shadow: 0 0 4px #00FF9C;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>

salida

CSS Shadow Effects - 5

Por lo tanto, se puede ver, en el ejemplo anterior, se aplica el brillante efecto de sombra de texto .

Shadow Box Propiedad

A continuación, lo que si alguien quiere aplicar esta propiedad a los elementos es el HTML? Bueno, Shadow Box propiedad tiene todo cubierto. Esta propiedad se utiliza para aplicar la sombra a los elementos de CSS. Incluso aún más la sombra de la propiedad Caja tiene su propio conjunto de valores.

Valores:

La propiedad box-shadow puede tomar de uno a seis valores,

  • inserción de palabras clave (que cambia la sombra de uno dentro de la trama)
  • horizontal sombra
  • verticales sombra
  • efecto de desenfoque
  • difusión
  • de color

sintaxis:

Element {
box-shadow: 10px 10px;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid;
padding: 30px;
box-shadow: 5px 10px 8px 10px #006969;
}
</style>
</head>
<body>
<div>
<p>Box shadow effect.</p>
</div>
</body>
</html>

salida

CSS Shadow Effects - 6

Por lo tanto la anterior el ejemplo muestra la aplicación de la propiedad box-shadow que se ha aplicado a la div elemento .


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *