Comment enrichir les styles d'image en utilisant l'attribut CSS3 (gradient d'ombre arrondi)

Dans CSS3, en utilisant Box-Shadow et Border-Radius directement sur l'image, le navigateur ne peut pas bien rendre. Cependant, si vous utilisez l'image comme image d'arrière-plan, le navigateur de style ajouté peut bien le rendre. Je vais expliquer comment créer différents effets de style d'image à l'aide de Box-Shadow, Border-Radius et Transition.

En regardant la démo, nous avons remarqué que nous fixons le radius frontalier et la box-shadow intégrée pour la première ligne de l'image. Firefox rend le radius frontalier de l'image, mais ne rend pas le shadow de boîte intégré. Ni chrome ni les effets de safari ne sont rendus.

.Normal img {

Border: solide 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);

Box-Shadow: encadré 0 1px 5px RGBA (0,0,0, .5);

}

chrome / safari

Pour que la radius frontalière et le shadow embarqué fonctionnent correctement, nous devons convertir l'image en image d'arrière-plan.

Afin de faire ce travail dynamiquement, nous devons utiliser jQuery pour ajouter une image d'arrière-plan pour envelopper chaque image. Le code JS suivant ajoute un wrapper de portée pour chaque image, et le chemin d'image d'arrière-plan de la portée est le chemin d'image.

Le code est relativement simple, je ne pense pas qu'il soit nécessaire de l'expliquer. Si vous ne le savez pas, vous pouvez vérifier directement l'API 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 () {

return '<span style = "position: relatif; affichage: bloc en ligne; arrière-plan: url (' + $ (this) .attr ('src') + ') sans répétition centrale; largeur:' + $ (this) .width () + 'px; height:' + $ (this) .height () + 'px;" /> ';

});

$ (this) .css ("opacité", "0");

});

});

</cript>

Sortir

Le code ci-dessus sortira les résultats suivants:

<Span Style = "Position: relatif; affichage: bloc en ligne; arrière-plan: URL (image.jpg) Centre de centre sans répétition; largeur: 150px; hauteur: 150px;">

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

</span>

Ajoutez que nous utilisons la radius frontalière pour réaliser l'effet des images circulaires, l'effet est le suivant:

CSS:

.Circle .image-wrap {

-Webkit-Border-Radius: 50EM;

-Moz-Border-Radius: 50EM;

Border-Radius: 50EM;

}

Vous trouverez ci-dessous une image de style carte, en utilisant plusieurs shadows de boîte intégrés.

CSS:

.card .image-wrap {

-webkit-box-shadow: inset 0 0 1px rgba (0,0,0, .8), encart 0 2px 0 rgba (255,255,255, .5), encadré 0 -1px 0 rgba (0,0,0, .4);

-moz-box-shadow: encadré 0 0 1px rgba (0,0,0, .8), encart 0 2px 0 rgba (255,255,255, .5), encadré 0 -1px 0 rgba (0,0,0, .4);

Box-shadow: encart 0 0 1px rgba (0,0,0, .8), encart 0 2px 0 rgba (255,255,255, .5), encart 0 -1px 0 rgba (0,0,0, .4);

-Webkit-Border-Radius: 20px;

-Moz-Border-Radius: 20px;

Border-Radius: 20px;

}

Vous trouverez ci-dessous l'effet de soulagement.

CSS:

.Embossé .image-wrap {

-Webkit-box-shadow: inset 0 0 2px rgba (0,0,0, .8), encart 0 2px 0 rgba (255,255,255, .5), encart 0 -7px 0 rgba (0,0,0, .6), inset 0 -9px 0 rgba (255255,255, .3);

-moz-box-shadow: inset 0 0 2px rgba (0,0,0, .8), encart 0 2px 0 rgba (255,255,255, .5), encart 0 -7px 0 rgba (0,0,0, .6), encart 0 -9px 0 rgba (255,255,255, .3);

Box-shadow: encart 0 0 2px rgba (0,0,0, .8), encart 0 2px 0 rgba (255,255,255, .5), encart 0 -7px 0 rgba (0,0,0, .6), encart 0 -9px 0 rgba (255,255,255, .3);

-Webkit-Border-Radius: 20px;

-Moz-Border-Radius: 20px;

Border-Radius: 20px;

}

Par rapport au style de gaufrage, le nouveau style ajoute un attribut de flou 1px.

CSS:

.Soft-embossed .image-wrap {

-Webkit-box-shadow: encart 0 0 4px rgba (0,0,0,1), encart 0 2px 1px RGBA (255,255,255, .5), encart 0 -9px 2px rgba (0,0,0, .6), encart 0 -12px 2px rgba (255,255,255 ,.3);

-moz-box-shadow: encart 0 0 4px rgba (0,0,0,1), encart 0 2px 1px RGBA (255,255,255, .5), encart 0 -9px 2px rgba (0,0,0, .6), encart 0 -12px 2px rgba (255,2555,255, .3);

Box-Shadow: INSET 0 0 4PX RGBA (0,0,0,1), encart 0 2px 1px RGBA (255,255,255, .5), encart 0 -9px 2px rgba (0,0,0, .6), encart 0 -12px 2px rgba (255,255,255, .3);

-Webkit-Border-Radius: 20px;

-Moz-Border-Radius: 20px;

Border-Radius: 20px;

}

Utilisez la boîte de boîte intégrée pour obtenir l'effet de découpe.

CSS:

.cut-out .image-wrap {

-Webkit-box-shadow: 0 1px 0 rgba (255,255,255, .2), encadré 0 4px 5px rgba (0,0,0, .6), encadré 0 1px 0 rgba (0,0,0, .6);

-moz-box-shadow: 0 1px 0 rgba (255,255,255, .2), encadré 0 4px 5px rgba (0,0,0, .6), encadré 0 1px 0 rgba (0,0,0, .6);

Box-Shadow: 0 1PX 0 RGBA (255,255,255, .2), encart 0 4px 5px RGBA (0,0,0, .6), encart 0 1px 0 rgba (0,0,0, .6);

-Webkit-Border-Radius: 20px;

-Moz-Border-Radius: 20px;

Border-Radius: 20px;

}

Dans cet exemple, nous ajoutons l'attribut de transition à l'emballage d'image. Lorsque la souris glisse, elle passera d'un coin arrondi à une forme ronde. Ensuite, nous utilisons plusieurs boîtes-shadows pour obtenir l'effet lumineux.

CSS:

.

-Webkit-Transition: 1s;

-Moz-transition: 1s;

transition: 1s;

-Webkit-Border-Radius: 20px;

-Moz-Border-Radius: 20px;

Border-Radius: 20px;

}

.

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

-moz-box-shadow: 0 0 20px rgba (255 255 255, .6), encadré 0 0 20px RGBA (255 255,255,1);

Box-Shadow: 0 0 20px RGBA (255 255 255, .6), encadré 0 0 20px RGBA (255 255 255,1);

-Webkit-Border-Radius: 60em;

-Moz-Border-Radius: 60em;

Border-Radius: 60em;

}

L'effet de surbrillance est obtenu en ajoutant le: après la pseudo-classe à l'élément.

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);

Box-Shadow: encadré 0 -1px 0 rgba (0,0,0, .5);

-Webkit-Border-Radius: 20px;

-Moz-Border-Radius: 20px;

Border-Radius: 20px;

}

.Glossy .image-wrap: après {

Position: absolue;

contenu: ' ';

Largeur: 100%;

hauteur: 50%;

en haut: 0;

à gauche: 0;

-Webkit-Border-Radius: 20px;

-Moz-Border-Radius: 20px;

Border-Radius: 20px;

Contexte: -moz-linear-gradient (haut, RGBA (255 255,255,0,7) 0%, RGBA (255 255 255, 0,1) 100%);

Contexte: -Webkit-gradient (linéaire, haut gauche, bas gauche, arrêt de couleur (0%, RGBA (255 255,255,0,7)), couleurs-stop (100%, RGBA (255 255,255, .1)));

CONTEXTE: Gradient linéaire (TOP, RGBA (255 255,255,0,7) 0%, RGBA (255 255 255, .1) 100%);

}

Dans cet exemple, nous déplaçons le point culminant vers le bas pour réaliser l'effet de réflexion.

CSS:

.reflection .image-wap: après {

Position: absolue;

contenu: ' ';

Largeur: 100%;

hauteur: 30px;

En bas: -31px;

à gauche: 0;

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

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

-moz-border-radius-topleft: 20px;

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

Border-top-left-radius: 20px;

Border-top-droite-radius: 20px;

Contexte: -moz-linear-gradient (haut, RGBA (0,0,0, .3) 0%, RGBA (255 255,255,0) 100%);

Contexte: -Webkit-gradient (linéaire, haut gauche, bas gauche, arrêt de couleur (0%, RGBA (0,0,0, .3)), couleurs-stop (100%, RGBA (255 255,255,0)));

CONTEXTE: Linear-Gradient (Top, RGBA (0,0,0, .3) 0%, RGBA (255 255,255,0) 100%);

}

.Reflection .image-wap: Hover {

Position: relative;

en haut: -8px;

}

Dans cet exemple, nous utilisons: avant et: après pour combiner les points forts et les effets de réflexion.

CSS:

.Glossy-reflection .image-wrap {

-webkit-box-shadow: inset 0 -1px 0 rgba (0,0,0, .5), encadré 0 1px 0 rgba (255 255 255, 0,6);

-moz-box-shadow: encadré 0 -1px 0 rgba (0,0,0, .5), encadré 0 1px 0 rgba (255 255 255, 0,6);

Box-Shadow: encadré 0 -1px 0 rgba (0,0,0, .5), encart 0 1px 0 rgba (255 255 255, .6);

-Webkit-Transition: 1s;

-Moz-transition: 1s;

transition: 1s;

-Webkit-Border-Radius: 20px;

-Moz-Border-Radius: 20px;

Border-Radius: 20px;

}

.Glossy-reflection .image-wap: avant {

Position: absolue;

contenu: ' ';

Largeur: 100%;

hauteur: 50%;

en haut: 0;

à gauche: 0;

-Webkit-Border-Radius: 20px;

-Moz-Border-Radius: 20px;

Border-Radius: 20px;

Contexte: -moz-linear-gradient (haut, RGBA (255 255,255,0,7) 0%, RGBA (255 255 255, 0,1) 100%);

Contexte: -Webkit-gradient (linéaire, haut gauche, bas gauche, arrêt de couleur (0%, RGBA (255 255,255,0,7)), couleurs-stop (100%, RGBA (255 255,255, .1)));

CONTEXTE: Gradient linéaire (TOP, RGBA (255 255,255,0,7) 0%, RGBA (255 255 255, .1) 100%);

}

.Glossy-reflection .image-wap: après {

Position: absolue;

contenu: ' ';

Largeur: 100%;

hauteur: 30px;

En bas: -31px;

à gauche: 0;

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

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

-moz-border-radius-topleft: 20px;

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

Border-top-left-radius: 20px;

Border-top-droite-radius: 20px;

Contexte: -moz-linear-gradient (haut, RGBA (230 230 230, .3) 0%, RGBA (230 230,230,0) 100%);

Contexte: -Webkit-gradient (linéaire, haut gauche, bas gauche, arrêt de couleur (0%, RGBA (230 230 230, .3)), couleurs-arrêt (100%, RGBA (230 230,230,0))));

Contexte: Linear-Gradient (Top, RGBA (230 230 230, .3) 0%, RGBA (230 230,230,0) 100%);

}

Dans cet exemple, nous utilisons: après pour réaliser l'effet de la bande.

CSS:

.Tape .image-wrap {

-webkit-box-shadow: inset 0 0 2px rgba (0,0,0, .7), encart 0 2px 0 rgba (255,255,255, .3), encart 0 -1px 0 rgba (0,0,0, .5), 0 1px 3px rgba (0,0,0, .4);

-moz-box-shadow: encart 0 0 2px rgba (0,0,0, .7), encart 0 2px 0 rgba (255,255,255, .3), encart 0 -1px 0 rgba (0,0,0, .5), 0 1px 3px rgba (0,0,0, .4);

Box-shadow: encart 0 0 2px rgba (0,0,0, .7), encart 0 2px 0 rgba (255,255,255, .3), encart 0 -1px 0 rgba (0,0,0, .5), 0 1px 3px rgba (0,0, .4);

}

.Tape .image-wrap: After {

Position: absolue;

contenu: ' ';

Largeur: 60px;

hauteur: 25px;

en haut: -10px;

Gauche: 50%;

marge-gauche: -30px;

Border: solide 1px RGBA (137,130,48, .2);

Contexte: -moz-linear-gradient (haut, RGBA (254 243,127, 0,6) 0%, RGBA (240 224,54, 0,6) 100%);

Contexte: -Webkit-gradient (linéaire, haut gauche, bas gauche, arrêt de couleur (0%, RGBA (254 243,127, .6)), couleurs-stop (100%, RGBA (240224,54, .6))));

CONTEXTE: Gradient linéaire (en haut, RGBA (254 243,127, 0,6) 0%, RGBA (240 224,54, 0,6) 100%);

-webkit-box-shadow: inset 0 1px 0 rgba (255,255,255, .3), 0 1px 0 rgba (0,0,0, .2);

}

Dans cet exemple, nous utilisons: après l'élément pour obtenir l'effet du gradient radial lorsque la souris passe.

CSS:

.morphing-Tinting .image-wrap {

Position: relative;

-Webkit-Transition: 1s;

-Moz-transition: 1s;

transition: 1s;

-Webkit-Border-Radius: 20px;

-Moz-Border-Radius: 20px;

Border-Radius: 20px;

}

.

-Webkit-Border-Radius: 30EM;

-Moz-Border-Radius: 30EM;

Border-Radius: 30EM;

}

.

Position: absolue;

contenu: ' ';

Largeur: 100%;

hauteur: 100%;

en haut: 0;

à gauche: 0;

-Webkit-Transition: 1s;

-Moz-transition: 1s;

transition: 1s;

-Webkit-Border-Radius: 30EM;

-Moz-Border-Radius: 30EM;

Border-Radius: 30EM;

}

.

Contexte: -Webkit-gradient (radial, 50% 50%, 40, 50% 50%, 80, à partir de (RGBA (0,0,0,0)), à (RGBA (0,0,0,1)));

Contexte: -Moz-Radial-Gradient (50% 50%, Circle, RGBA (0,0,0,0) 40px, RGBA (0,0,0,1) 80px);

}

Nous pouvons également utiliser des gradients radiaux pour générer des masques pour atteindre l'effet de plumes.

CSS:

. Feather .image-wrap {

Position: relative;

-Webkit-Border-Radius: 30EM;

-Moz-Border-Radius: 30EM;

Border-Radius: 30EM;

}

. Feather .image-wrap: After {

Position: absolue;

contenu: ' ';

Largeur: 100%;

hauteur: 100%;

en haut: 0;

à gauche: 0;

Contexte: -Webkit-gradient (radial, 50% 50%, 50, 50% 50%, 70, de (RGBA (255 255,255,0)), à (RGBA (255 255,255,1)));

CONTEXTE: -Moz-Radial-Gradient (50% 50%, Circle, RGBA (255 255,255,0) 50px, RGBA (255 255,255,1) 70px);

}

Cette implémentation fonctionne bien dans la plupart des navigateurs qui prennent en charge Border-Radius, Box-Shadow ,: AVANT ET: APRÈS les fonctionnalités (telles que Chrome, Firefox et Safari). Dans les navigateurs qui ne prennent pas en charge de nouvelles fonctionnalités, seule l'image d'origine sera affichée.

Créez votre propre implémentation

Avec l'aide de: avant et: après des pseudo-classes, vous pouvez créer de nombreux styles pour les images, et vous pouvez essayer de créer vous-même de nouveaux effets.