Inicio>Tutorial de diseño web>Tutorial HTML

Cómo enriquecer los estilos de imagen usando el atributo CSS3 (gradiente de sombra redondeado)

Autor：Eve Cole Fecha de actualización：2025-04-03 05:48:01

En CSS3, usando Shadow de caja y Radius de Border directamente en la imagen, el navegador no puede renderizar bien. Sin embargo, si usa la imagen como imagen de fondo, el navegador de estilo agregado puede representarla bien. Explicaré cómo crear diferentes efectos de estilo de imagen con sombra de caja, radio borde y transición.

pregunta

Al mirar la demostración, notamos que establecimos el radio fronterizo y la sombra de caja incrustada para la primera línea de la imagen. Firefox representa el radio fronterizo de la imagen, pero no representa la sombra de caja incrustada. Ni los efectos de Chrome ni Safari se representan.

.Mg IMG {

borde: sólido 5px #000;

-WebKit-Border-Radius: 20px;

-Moz-Border-Radius: 20px;

Border-Radius: 20px;

-Webkit-box-shadow: INSET 0 1PX 5PX RGBA (0,0,0, .5);

-Moz-Box-Shadow: INSET 0 1PX 5PX RGBA (0,0,0, .5);

Shadow de caja: recuadro 0 1px 5px RGBA (0,0,0, .5);

}

Efecto Firefox :

cromado/safari

Solución alternativa

Para que el radio fronterizo y la sombra de caja incrustada funcionen correctamente, necesitamos convertir la imagen en imagen de fondo.

Método dinámico

Para hacer este trabajo dinámicamente, necesitamos usar jQuery para agregar una imagen de fondo para envolver cada imagen. El siguiente código JS agrega una envoltura de tramo para cada imagen, y la ruta de imagen de fondo del tramo es la ruta de la imagen.

El código es relativamente simple, no creo que sea necesario explicarlo. Si no lo sabe, puede consultar la API JQuery directamente.

<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"> </script>

<script type = "text/javaScript">

$ (documento) .Ready (function () {

$ ("img"). Load (function () {

$ (this) .wrap (function () {

return '<span style = "posición: relativo; pantalla: bloqueo inline; fondo: url (' + $ (this) .attr ('src') + ') sin-repetición centro; /> ';

});

$ (this) .css ("opacidad", "0");

});

});

</script>

Producción

El código anterior generará los siguientes resultados:

<span style = "posición: relativo; pantalla: bloqueo en línea; fondo: url (image.jpg) sin repetir centro centro; ancho: 150px; altura: 150px;">

<img src = "image.jpg" style = "opacidad: 0;">

</span>

Imagen circular

Agregamos que usamos el radio borde para lograr el efecto de las imágenes circulares, el efecto es el siguiente:

CSS:

.circle .image-wrap {

-WebKit-Border-Radius: 50em;

-Moz-Border-Radius: 50em;

Border-Radius: 50em;

}

Estilo de tarjeta

A continuación se muestra una imagen de estilo de tarjeta, que usa múltiples sombras de caja incrustadas.

CSS:

.card .image-wrap {

-Webkit-box-shadow: INSET 0 0 1PX RGBA (0,0,0, .8), INSET 0 2PX 0 RGBA (255,255,255, .5), recuadro 0 -1px 0 RGBA (0,0,0, .4);

-Moz-box-shadow: INSET 0 0 0 1PX RGBA (0,0,0, .8), recuadro 0 2px 0 RGBA (255,255,255, .5), recuadro 0 -1px 0 RGBA (0,0,0, .4);

Shadow de caja: recuadro 0 0 1px RGBA (0,0,0, .8), recuadro 0 2px 0 RGBA (255,255,255, .5), recuadro 0 -1px 0 RGBA (0,0,0, .4);

-WebKit-Border-Radius: 20px;

-Moz-Border-Radius: 20px;

Border-Radius: 20px;

}

Estilo de alivio

A continuación se muestra el efecto de alivio.

CSS:

.bossed .image-wrap {

-Webkit -box -shadow: ISSET 0 0 2PX RGBA (0,0,0, .8), INSET 0 2PX 0 RGBA (255,255,255, .5), Inset 0 -7px 0 RGBA (0,0,0, .6), Idea 0 -9px 0 RGBA (255,255,255, .3);

-Moz -box -shadow: Inset 0 0 2px RGBA (0,0,0, .8), inserción 0 2px 0 RGBA (255,255,255, .5), insertado 0 -7px 0 RGBA (0,0,0, .6), ISD 0 -9PX 0 RGBA (255,255,255, .3);

Box Shadow: Inset 0 0 2px RGBA (0,0,0, .8), Inset 0 2px 0 RGBA (255,255,255, .5), Inset 0 -7px 0 RGBA (0,0,0, .6), INSET 0 -9PX 0 RGBA (255,255,255, .3);

-WebKit-Border-Radius: 20px;

-Moz-Border-Radius: 20px;

Border-Radius: 20px;

}

Estilo de alivio flexible

En comparación con el estilo de relieve, el nuevo estilo agrega un atributo Blur de 1px.

CSS:

.soft-bossed .image-wrap {

-Webkit -box -shadow: INSET 0 0 0 4PX RGBA (0,0,0,1), INSET 0 2PX 1PX RGBA (255,255,255, .5), INSET 0 -9PX 2PX RGBA (0,0,0,0, .6), RSE 0 -12PX 2PX RGBA (255,2555,255, 3);

-Moz -box -shadow: INSET 0 0 0 4PX RGBA (0,0,0,1), INSET 0 2PX 1PX RGBA (255,255,255, .5), INSET 0 -9PX 2PX RGBA (0,0,0,0, .6), ISCO 0 -12PX 2PX RGBA (255,2555,255, .3);

Box Shadow: Inset 0 0 4PX RGBA (0,0,0,1), Inset 0 2PX 1PX RGBA (255,255,255, .5), Inset 0 -9px 2px RGBA (0,0,0, .6), Insctura 0 -12PX 2PX RGBA (255,255,2555, .3);

-WebKit-Border-Radius: 20px;

-Moz-Border-Radius: 20px;

Border-Radius: 20px;

}

Estilo recorte

Use la sombra de caja incrustada para lograr el efecto de recorte.

CSS:

.cut .image-wrap {

-Webkit-box-shadow: 0 1px 0 RGBA (255,255,255, .2), insertado 0 4px 5px RGBA (0,0,0, .6), recuadro 0 1PX 0 RGBA (0,0,0, .6);

-Moz-box-shadow: 0 1PX 0 RGBA (255,255,255, .2), INSET 0 4PX 5PX RGBA (0,0,0, .6), recuadro 0 1PX 0 RGBA (0,0,0, .6);

Shadow de caja: 0 1px 0 RGBA (255,255,255, .2), recuadro 0 4px 5px RGBA (0,0,0, .6), recuadro 0 1px 0 RGBA (0,0,0, .6);

-WebKit-Border-Radius: 20px;

-Moz-Border-Radius: 20px;

Border-Radius: 20px;

}

Deformación y brillo

En este ejemplo, agregamos el atributo de transición al embalaje de imagen. Cuando el mouse se deslice, cambiará de una esquina redondeada a una forma redonda. Luego usamos múltiples cajas de sombras para lograr el efecto luminoso.

CSS:

.morphing-glowing .image-wrap {

-Webkit-transición: 1s;

-Moz-transición: 1s;

Transición: 1s;

-WebKit-Border-Radius: 20px;

-Moz-Border-Radius: 20px;

Border-Radius: 20px;

}

.morphing-brillo .image-wrap: hover {

-Webkit-box-shadow: 0 0 20px RGBA (255,255,255, .6), recuadro 0 0 20px RGBA (255,255,255,1);

-Moz-box-shadow: 0 0 20px RGBA (255,255,255, .6), recuadro 0 0 20px RGBA (255,255,255,1);

Shadow de caja: 0 0 20px RGBA (255,255,255, .6), recuadro 0 0 20px RGBA (255,255,255,1);

-WebKit-Border-Radius: 60em;

-Moz-Border-Radius: 60em;

Radio fronterizo: 60em;

}

Resaltar los efectos

El efecto destacado se logra agregando: después de la pseudo-clase al elemento.

CSS:

.Glossy .image-wrap {

-Webkit-box-shadow: INSET 0 -1PX 0 RGBA (0,0,0, .5);

-Moz-box-shadow: INSET 0 -1PX 0 RGBA (0,0,0, .5);

Shadow de caja: recuadro 0 -1px 0 RGBA (0,0,0, .5);

-WebKit-Border-Radius: 20px;

-Moz-Border-Radius: 20px;

Border-Radius: 20px;

}

.Glossy .image-wrap: después {

Posición: Absoluto;

contenido: ' ';

Ancho: 100%;

Altura: 50%;

arriba: 0;

Izquierda: 0;

-WebKit-Border-Radius: 20px;

-Moz-Border-Radius: 20px;

Border-Radius: 20px;

Antecedentes: -Moz-Lineal-Dadient (arriba, RGBA (255,255,255,0.7) 0%, RGBA (255,255,255, .1) 100%);

Antecedentes: -CeBKit-Gradiente (lineal, superior izquierda, fondo izquierdo, color-parada (0%, RGBA (255,255,255,0.7)), color-parada (100%, RGBA (255,255,255, .1)));

Antecedentes: gradiente lineal (superior, RGBA (255,255,255,0.7) 0%, RGBA (255,255,255, .1) 100%);

}

Efecto de reflexión

En este ejemplo, movemos el resaltado hacia el fondo para lograr el efecto de reflexión.

CSS:

.Reflección .image-wrap: después de {

Posición: Absoluto;

contenido: ' ';

Ancho: 100%;

Altura: 30px;

Abajo: -31px;

Izquierda: 0;

-Webkit-border-top-left-radius: 20px;

-Webkit-border-top-derecho-radius: 20px;

-Moz-Border-Radius-Topleft: 20px;

-Moz-Border-Radius-Topright: 20px;

border-top-izquierda-radio: 20px;

Border-Top-Right-Radius: 20px;

Antecedentes: -Moz-Lineal-Dinter-Derment (arriba, RGBA (0,0,0, .3) 0%, RGBA (255,255,255,0) 100%);

Antecedentes: -Cadiente de Webkit (lineal, superior izquierda, fondo izquierdo, color-parada (0%, RGBA (0,0,0, .3)), color-parada (100%, RGBA (255,255,255,0)));

Antecedentes: gradiente lineal (superior, RGBA (0,0,0, .3) 0%, RGBA (255,255,255,0) 100%);

}

REFLECCIÓN .image-Wrap: Hover {

Posición: relativo;

arriba: -8px;

}

Destacados y reflexiones

En este ejemplo, usamos: antes y: después para combinar los reflejos y los efectos de reflexión.

CSS:

. Glossy-Reflection .image-Wrap {

-Webkit-box-shadow: INSET 0 -1PX 0 RGBA (0,0,0, .5), insertado 0 1PX 0 RGBA (255,255,255, .6);

-Moz-box-shadow: Inset 0 -1px 0 RGBA (0,0,0, .5), recuadro 0 1PX 0 RGBA (255,255,255, .6);

Shadow de caja: recuadro 0 -1px 0 RGBA (0,0,0, .5), recuadro 0 1PX 0 RGBA (255,255,255, .6);

-Webkit-transición: 1s;

-Moz-transición: 1s;

Transición: 1s;

-WebKit-Border-Radius: 20px;

-Moz-Border-Radius: 20px;

Border-Radius: 20px;

}

. Glossy-Reflection .image-Wrap: antes {

Posición: Absoluto;

contenido: ' ';

Ancho: 100%;

Altura: 50%;

arriba: 0;

Izquierda: 0;

-WebKit-Border-Radius: 20px;

-Moz-Border-Radius: 20px;

Border-Radius: 20px;

Antecedentes: -Moz-Lineal-Dadient (arriba, RGBA (255,255,255,0.7) 0%, RGBA (255,255,255, .1) 100%);

Antecedentes: -CeBKit-Gradiente (lineal, superior izquierda, fondo izquierdo, color-parada (0%, RGBA (255,255,255,0.7)), color-parada (100%, RGBA (255,255,255, .1)));

Antecedentes: gradiente lineal (superior, RGBA (255,255,255,0.7) 0%, RGBA (255,255,255, .1) 100%);

}

. Glossy-Reflection .image-Wrap: después de {

Posición: Absoluto;

contenido: ' ';

Ancho: 100%;

Altura: 30px;

Abajo: -31px;

Izquierda: 0;

-Webkit-border-top-left-radius: 20px;

-Webkit-border-top-derecho-radius: 20px;

-Moz-Border-Radius-Topleft: 20px;

-Moz-Border-Radius-Topright: 20px;

border-top-izquierda-radio: 20px;

Border-Top-Right-Radius: 20px;

Antecedentes: -Moz-Lineal-Dadient (arriba, RGBA (230,230,230, .3) 0%, RGBA (230,230,230,0) 100%);

Antecedentes: -Cadiente de Webkit (lineal, superior izquierda, fondo izquierdo, color-parada (0%, RGBA (230,230,230, .3)), color-stop (100%, RGBA (230,230,230,0)));

Antecedentes: gradiente lineal (arriba, RGBA (230,230,230, .3) 0%, RGBA (230,230,230,0) 100%);

}

Estilo de cinta

En este ejemplo, usamos: después para lograr el efecto de la cinta.

CSS:

.tape .image-wrap {

-Webkit-box-shadow: INSET 0 0 2PX RGBA (0,0,0, .7), INSET 0 2PX 0 RGBA (255,255,255, .3), Inset 0 -1px 0 RGBA (0,0,0,0, .5), 0 1PX 3PX RGBA (0,0,0, .4);

-Moz-box-shadow: Inset 0 0 2px RGBA (0,0,0, .7), inserción 0 2px 0 RGBA (255,255,255, .3), INSET 0 -1PX 0 RGBA (0,0,0, .5), 0 1PX 3PX RGBA (0,0,0, .4);

Box Shadow: Inset 0 0 2PX RGBA (0,0,0, .7), INSET 0 2PX 0 RGBA (255,255,255, .3), Inset 0 -1px 0 RGBA (0,0,0, .5), 0 1PX 3PX RGBA (0,0,0,0, .4);

}

.tape .image-wrap: después de {

Posición: Absoluto;

contenido: ' ';

Ancho: 60px;

Altura: 25px;

arriba: -10px;

Izquierda: 50%;

margen -izquierda: -30px;

borde: sólido 1px rgba (137,130,48, .2);

Antecedentes: -Moz-Lineal-Dinter (arriba, RGBA (254,243,127, .6) 0%, RGBA (240,224,54, .6) 100%);

Antecedentes: -Cadiente de Webkit (lineal, superior izquierda, fondo izquierdo, color-stop (0%, RGBA (254,243,127, .6)), color-stop (100%, RGBA (240,224,54, .6)));

Antecedentes: gradiente lineal (superior, RGBA (254,243,127, .6) 0%, RGBA (240,224,54, .6) 100%);

-Webkit-box-shadow: INSET 0 1PX 0 RGBA (255,255,255, .3), 0 1PX 0 RGBA (0,0,0, .2);

}

Deformación y coloración

En este ejemplo, usamos: después del elemento para lograr el efecto del gradiente radial cuando pasa el mouse.

CSS:

.morphing teñir .image-wrap {

Posición: relativo;

-Webkit-transición: 1s;

-Moz-transición: 1s;

Transición: 1s;

-WebKit-Border-Radius: 20px;

-Moz-Border-Radius: 20px;

Border-Radius: 20px;

}

.morphing-tinte .image-wrap: hover {

-WebKit-Border-Radius: 30em;

-Moz-Border-Radius: 30em;

Border-Radius: 30em;

}

.morphing-tinting .image-wrap: después {

Posición: Absoluto;

contenido: ' ';

Ancho: 100%;

Altura: 100%;

arriba: 0;

Izquierda: 0;

-Webkit-transición: 1s;

-Moz-transición: 1s;

Transición: 1s;

-WebKit-Border-Radius: 30em;

-Moz-Border-Radius: 30em;

Border-Radius: 30em;

}

.morphing teñir .image-wrap: hover: después {

Antecedentes: -CeBKit -Dinterior (radial, 50% 50%, 40, 50% 50%, 80, de (RGBA (0,0,0,0)), a (RGBA (0,0,0,1)));

Antecedentes: -MOZ-Dirige-Gradiente (50% 50%, Círculo, RGBA (0,0,0,0) 40px, RGBA (0,0,0,1) 80px);

}

Ronda de borde emplumado

También podemos usar gradientes radiales para generar máscaras para lograr el efecto de plumón.

CSS:

.Feather .image-wrap {

Posición: relativo;

-WebKit-Border-Radius: 30em;

-Moz-Border-Radius: 30em;

Border-Radius: 30em;

}

.Feather .image-wrap: después {

Posición: Absoluto;

contenido: ' ';

Ancho: 100%;

Altura: 100%;

arriba: 0;

Izquierda: 0;

Antecedentes: -Cadiente de vecino (radial, 50% 50%, 50, 50% 50%, 70, de (RGBA (255,255,255,0)), a (RGBA (255,255,255,1)));

Antecedentes: -Moz-Dadial-gradiente (50% 50%, Círculo, RGBA (255,255,255,0) 50px, RGBA (255,255,255,1) 70px);

}

Compatibilidad del navegador

Esta implementación funciona bien en la mayoría de los navegadores que admiten Border-Radius, Box-Shadow,: antes y: después de las características (como Chrome, Firefox y Safari). En los navegadores que no admiten nuevas funciones, solo se mostrará la imagen original.

Crea tu propia implementación

Con la ayuda de: antes y: después de las pseudo-clases, puede crear muchos estilos para imágenes, y puede intentar crear nuevos efectos usted mismo.

Artículos relacionados