No CSS3, usando a shadow de caixa e o radiato de fronteira diretamente na imagem, o navegador não pode renderizar bem. No entanto, se você usar a imagem como imagem de fundo, o navegador de estilo adicionado poderá renderizar bem. Vou explicar como criar diferentes efeitos de estilo de imagem usando-shadow, radio de fronteira e transição.
perguntaObservando a demonstração, percebemos que definimos um radiato de fronteira e incorporou a box-shadow para a primeira linha da imagem. O Firefox renderiza o radiato da fronteira da imagem, mas não torna a sombra de caixa incorporada. Nem os efeitos do Chrome nem Safari são renderizados.
.Normal img {
Border: Solid 5px #000;
-Webkit-Border-Radius: 20px;
-Moz-Border-Radius: 20px;
Radio de fronteira: 20px;
-webkit-box-shadow: insert 0 1px 5px rgba (0,0,0, .5);
-moz-box-shadow: insert 0 1px 5px rgba (0,0,0, .5);
Shadow de caixa: inserção 0 1px 5px rgba (0,0,0, .5);
}
Efeito Firefox :Chrome/Safari
Solução alternativaPara que o Radius de Fronteira e a Shadow de Box incorporado funcione corretamente, precisamos converter a imagem em imagem de fundo.
Método dinâmicoPara fazer esse trabalho dinamicamente, precisamos usar o jQuery para adicionar uma imagem de fundo para envolver cada imagem. O código JS a seguir adiciona um invólucro de span para cada imagem, e o caminho da imagem em segundo plano do intervalo é o caminho da imagem.
O código é relativamente simples, acho que não há necessidade de explicá -lo. Se você não souber, pode verificar diretamente a API do jQuery.
<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"> </script>
<script type = "text/javascript">
$ (document) .ready (function () {
$ ("IMG"). Load (function () {
$ (this) .Wrap (function () {
retornar '<span style = "Posição: relativa; display: bloqueio em linha; background: url (' + $ (this) .attr ('src') + ') no centro central de repetição; largura:' + $ (this) .Width () + 'px; altura:' + $ (this) .Heigh /> ';
});
$ (this) .css ("opacidade", "0");
});
});
</script>
Saída
O código acima produzirá os seguintes resultados:
<span style = "Posição: relativa; Display: Inline-Block; Background: URL (Image.jpg) Centro central de repetição; largura: 150px; altura: 150px;">
<img src = "image.jpg" style = "opacity: 0;">
</span>
Imagem circularAdicionar Usamos o Radius de Border para alcançar o efeito de imagens circulares, o efeito é o seguinte:
CSS:
.circle .image-wrap {
-Webkit-Border-Radius: 50em;
-Moz-Border-Radius: 50em;
Radio de fronteira: 50em;
}
Estilo de cartãoAbaixo está uma imagem em estilo de cartão, usando várias shadows incorporadas.
CSS:
.Card .Image-wrap {
-Webkit-box-shadow: inserção 0 0 1px rgba (0,0,0, .8), inserção 0 2px 0 rgba (255,255,255, .5), inserção 0 -1px 0 rgba (0,0,0, .4);
-Moz-Box-Shadow: Insert 0 0 1px rgba (0,0,0, .8), inserção 0 2px 0 rgba (255,255,255, .5), inserção 0 -1px 0 rgba (0,0,0, .4);
Box -Shadow: inserção 0 0 1px rgba (0,0,0, .8), inserção 0 2px 0 rgba (255,255,255, .5), inserção 0 -1px 0 rgba (0,0,0, .4);
-Webkit-Border-Radius: 20px;
-Moz-Border-Radius: 20px;
Radio de fronteira: 20px;
}
Estilo de alívioAbaixo está o efeito de alívio.
CSS:
.Mbossed .Image-wrap {
-Webkit -box -shadow: inserção 0 0 2px rgba (0,0,0, .8), inserção 0 2px 0 rgba (255,255,255, .5), inserção 0 -7px 0 RGBA (0,0,0, .6), inset 0 -9px 0 rgBA (255,25;
-Moz -Box -Shadow: Insert 0 0 2px RGBA (0,0,0, .8), inserção 0 2px 0 RGBA (255,255,255, .5), inserção 0 -7px 0 RGBA (0,0,0, .6), INSET 0 -9px 0 RGBA (255,25,25,25,25,0,0,.
Box -Shadow: Inserção 0 0 2px rgba (0,0,0, .8), inserção 0 2px 0 rgba (255,255,255, .5), inserção 0 -7px 0 rgba (0,0,0, .6), 0 -9px 0 rgba (255,25,25.
-Webkit-Border-Radius: 20px;
-Moz-Border-Radius: 20px;
Radio de fronteira: 20px;
}
Estilo de alívio flexívelComparado ao estilo de gravação, o novo estilo adiciona um atributo de 1px.
CSS:
.Soft-Inbossed .image-wrap {
-webkit-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), inset 0 -12px 2px rgba(255,255,255,.3);
-Moz -Box -Shadow: Insert 0 0 4px rgba (0,0,0,1), inserção 0 2px 1px rgba (255,255,255, .5), inserto 0 -9px 2px RGBA (0,0, 0,0), inset 0 -12px 2px 2px RGBA (0,0, 0,0), Inset 0 -12px 2px 2px (0,0,0, 0,0), inset 0 -12px 2px 2px (0,0,0, 0,0), inset 0 -12px.
Box -Shadow: Inserção 0 0 4px RGBA (0,0,0,1), inserção 0 2px 1px rgba (255,255,255, .5), inserção 0 -9px 2px RGBA (0,0,0, .6), 0 -12px 2px.
-Webkit-Border-Radius: 20px;
-Moz-Border-Radius: 20px;
Radio de fronteira: 20px;
}
Estilo de recorteUse a sombra de caixa incorporada para alcançar o efeito de corte.
CSS:
.Cut-Out .Image-Wrap {
-Webkit-box-shadow: 0 1px 0 rgba (255.255,255, .2), inserção 0 4px 5px rgba (0,0,0, .6), inserção 0 1px 0 rgba (0,0,0, .6);
-Moz-Box-Shadow: 0 1px 0 RGBA (255.255,255, .2), inserção 0 4px 5px rgba (0,0,0, .6), inserção 0 1px 0 rgba (0,0,0, .6);
Box-Shadow: 0 1px 0 RGBA (255.255,255, .2), inserção 0 4px 5px rgba (0,0,0, .6), inserção 0 1px 0 rgba (0,0,0, .6);
-Webkit-Border-Radius: 20px;
-Moz-Border-Radius: 20px;
Radio de fronteira: 20px;
}
Deformação e brilhoNeste exemplo, adicionamos o atributo de transição à embalagem da imagem. Quando o mouse deslizar, ele mudará de um canto arredondado para uma forma redonda. Em seguida, usamos várias caixas-shadows para alcançar o efeito luminoso.
CSS:
.Morphing-glowing .Mage-Wrap {
-Webkit-transição: 1s;
-moz-transição: 1s;
transição: 1s;
-Webkit-Border-Radius: 20px;
-Moz-Border-Radius: 20px;
Radio de fronteira: 20px;
}
.Morphing-glowing .Mage-Wrap: Hover {
-Webkit-box-shadow: 0 0 20px rgba (255.255.255, .6), inserção 0 0 20px rgba (255.255.255,1);
-Moz-Box-Shadow: 0 0 20px rgba (255.255.255, .6), inserção 0 0 20px rgba (255.255,255,1);
Box-Shadow: 0 0 20px rgba (255.255.255, .6), inserção 0 0 20px rgba (255.255,255,1);
-Webkit-Border-Radius: 60em;
-Moz-Border-Radius: 60em;
Radio de fronteira: 60em;
}
Destaque efeitosO efeito de destaque é alcançado adicionando o: após pseudo-classe ao elemento.
CSS:
.GLOSSY .IMAGE-WRAP {
-webkit-box-shadow: insert 0 -1px 0 rgba (0,0,0, .5);
-moz-box-shadow: insert 0 -1px 0 rgba (0,0,0, 0,5);
Shadow de caixa: inserção 0 -1px 0 rgba (0,0,0, .5);
-Webkit-Border-Radius: 20px;
-Moz-Border-Radius: 20px;
Radio de fronteira: 20px;
}
.Glossy .Mage-wrap: After {
Posição: Absoluto;
contente: ' ';
largura: 100%;
Altura: 50%;
topo: 0;
Esquerda: 0;
-Webkit-Border-Radius: 20px;
-Moz-Border-Radius: 20px;
Radio de fronteira: 20px;
Antecedentes: -Moz-linear-gradiente (topo, RGBA (255.255,255,0,7) 0%, RGBA (255.255.255, .1) 100%);
Antecedentes: -Webkit Gradiente (linear, superior esquerdo, inferior esquerdo, parada de cor (0%, RGBA (255.255.255,0,7)), parada de cor (100%, RGBA (255.255.255, .1));
Antecedentes: gradiente linear (topo, RGBA (255.255,255,0,7) 0%, RGBA (255.255.255, .1) 100%);
}
Efeito de reflexãoNeste exemplo, movemos o destaque para o fundo para alcançar o efeito de reflexão.
CSS:
.Reflexão.
Posição: Absoluto;
contente: ' ';
largura: 100%;
Altura: 30px;
Inferior: -31px;
Esquerda: 0;
-Webkit-border-top-left-radius: 20px;
-Webkit-Border-top-Right-Radius: 20px;
-Moz-Border-Radius-Topleft: 20px;
-Moz-Border-Radius-Topright: 20px;
Radio de borda-top-esquerda: 20px;
Radio de borda-top-right: 20px;
Antecedentes: -Moz-linear-gradiente (topo, RGBA (0,0,0, .3) 0%, RGBA (255,255,255,0) 100%);
Antecedentes: -Webkit Gradiente (linear, superior esquerdo, inferior esquerdo, parada de cor (0%, RGBA (0,0,0, .3)), parada de cor (100%, RGBA (255,255,255,0));
Antecedentes: gradiente linear (topo, RGBA (0,0,0, .3) 0%, RGBA (255,255,255,0) 100%);
}
.Reflexão.
Posição: relativa;
topo: -8px;
}
Destaques e reflexõesNeste exemplo, usamos: antes e: depois para combinar destaques e efeitos de reflexão.
CSS:
.GLOSSY-REFLEÇÃO .MAGE-WRAP {
-Webkit-box-shadow: inserção 0 -1px 0 rgba (0,0,0, .5), inserção 0 1px 0 rgba (255,255,255, .6);
-moz-box-shadow: inserção 0 -1px 0 rgba (0,0,0, 0,5), inserção 0 1px 0 rgba (255,255,255, .6);
Shadow da caixa: inserção 0 -1px 0 rgba (0,0,0, 0,5), inserção 0 1px 0 rgba (255,255,255, .6);
-Webkit-transição: 1s;
-moz-transição: 1s;
transição: 1s;
-Webkit-Border-Radius: 20px;
-Moz-Border-Radius: 20px;
Radio de fronteira: 20px;
}
.GLOSSY-REFLEÇÃO.
Posição: Absoluto;
contente: ' ';
largura: 100%;
Altura: 50%;
topo: 0;
Esquerda: 0;
-Webkit-Border-Radius: 20px;
-Moz-Border-Radius: 20px;
Radio de fronteira: 20px;
Antecedentes: -Moz-linear-gradiente (topo, RGBA (255.255,255,0,7) 0%, RGBA (255.255.255, .1) 100%);
Antecedentes: -Webkit Gradiente (linear, superior esquerdo, inferior esquerdo, parada de cor (0%, RGBA (255.255.255,0,7)), parada de cor (100%, RGBA (255.255.255, .1));
Antecedentes: gradiente linear (topo, RGBA (255.255,255,0,7) 0%, RGBA (255.255.255, .1) 100%);
}
.GLOSSY-REFLEXIONE.
Posição: Absoluto;
contente: ' ';
largura: 100%;
Altura: 30px;
Inferior: -31px;
Esquerda: 0;
-Webkit-border-top-left-radius: 20px;
-Webkit-Border-top-Right-Radius: 20px;
-Moz-Border-Radius-Topleft: 20px;
-Moz-Border-Radius-Topright: 20px;
Radio de borda-top-esquerda: 20px;
Radio de borda-top-right: 20px;
Antecedentes: -Moz-linear-gradiente (topo, RGBA (230.230.230, .3) 0%, RGBA (230.230.230,0) 100%);
Antecedentes: -Webkit Gradiente (linear, superior esquerdo, inferior esquerdo, parada de cor (0%, RGBA (230.230.230, .3)), parada de cor (100%, RGBA (230.230,230,0));
Antecedentes: gradiente linear (topo, RGBA (230.230.230, .3) 0%, RGBA (230.230.230,0) 100%);
}
Estilo de fitaNeste exemplo, usamos: depois para alcançar o efeito da fita.
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,.5), 0 1px 3px rgba(0,0,0,.4);
-Moz-Box-Shadow: Insert 0 0 2px rgba (0,0,0, .7), inserção 0 2px 0 rgba (255,255,255, .3), inserção 0 -1px 0 rgba (0,0,0, .5), 0 1px 3px rgba (0,0,0,0,.
Caixa -shadow: inserção 0 0 2px rgba (0,0,0, .7), inserção 0 2px 0 rgba (255,255,255, .3), inserção 0 -1px 0 rgba (0,0,0, .5), 0 1px 3px rgba (0,0,0, .4);
}
.Tape .Image-wrap: After {
Posição: Absoluto;
contente: ' ';
Largura: 60px;
Altura: 25px;
topo: -10px;
Esquerda: 50%;
margem -esquerda: -30px;
fronteira: sólido 1px rgba (137,130,48, .2);
Antecedentes: -Moz-linear-gradiente (topo, RGBA (254.243.127, .6) 0%, RGBA (240.224,54, .6) 100%);
Antecedentes: -Webkit gradiente (linear, superior esquerdo, inferior esquerdo, parada de cor (0%, RGBA (254.243.127, .6)), parada de cor (100%, RGBA (240.224,54, .6));
Antecedentes: gradiente linear (topo, RGBA (254.243.127, .6) 0%, RGBA (240.224,54, .6) 100%);
-Webkit-box-shadow: Insert 0 1px 0 rgba (255,255,255, .3), 0 1px 0 rgba (0,0,0, .2);
}
Deformação e coloraçãoNeste exemplo, usamos: depois do elemento para alcançar o efeito do gradiente radial quando o mouse passa.
CSS:
.Morphing-Tinting .Image-Wrap {
Posição: relativa;
-Webkit-transição: 1s;
-moz-transição: 1s;
transição: 1s;
-Webkit-Border-Radius: 20px;
-Moz-Border-Radius: 20px;
Radio de fronteira: 20px;
}
.Morphing-Tinting .Image-Wrap: Hover {
-Webkit-Border-Radius: 30em;
-Moz-Border-Radius: 30em;
Radio de fronteira: 30em;
}
.Morphing-tinating .image-wrap: After {
Posição: Absoluto;
contente: ' ';
largura: 100%;
Altura: 100%;
topo: 0;
Esquerda: 0;
-Webkit-transição: 1s;
-moz-transição: 1s;
transição: 1s;
-Webkit-Border-Radius: 30em;
-Moz-Border-Radius: 30em;
Radio de fronteira: 30em;
}
.Morphing-Tinting .Image-Wrap: Passe o mouse: após {
Antecedentes: -Webkit gradiente (radial, 50% 50%, 40, 50% 50%, 80, de (RGBA (0,0,0,0)), para (RGBA (0,0,0,1)));
Antecedentes: -Moz-radial-gradiente (50% 50%, círculo, RGBA (0,0,0,0) 40px, RGBA (0,0,0,1) 80px);
}
Arda de borda emplumadaTambém podemos usar gradientes radiais para gerar máscaras para obter efeito de penas.
CSS:
.feather .image-wrap {
Posição: relativa;
-Webkit-Border-Radius: 30em;
-Moz-Border-Radius: 30em;
Radio de fronteira: 30em;
}
.feather .image-wrap: depois {
Posição: Absoluto;
contente: ' ';
largura: 100%;
Altura: 100%;
topo: 0;
Esquerda: 0;
Antecedentes: -Webkit -gradiente (radial, 50% 50%, 50, 50% 50%, 70, de (RGBA (255.255,255,0)), para (RGBA (255.255,255,1)));
Antecedentes: -Moz-gradiente-radial (50% 50%, círculo, RGBA (255.255,255,0) 50px, RGBA (255.255,255,1) 70px);
}
Compatibilidade do navegadorEssa implementação funciona bem na maioria dos navegadores que apóiam o radiato de fronteira, a Shadow Box :: antes e: após recursos (como Chrome, Firefox e Safari). Nos navegadores que não suportam novos recursos, apenas a imagem original será exibida.
Crie sua própria implementação
Com a ajuda de: Antes e: Após Pseudo-Classes, você pode criar muitos estilos para imagens e você pode tentar criar novos efeitos.