Startseite>Webdesign-Tutorial>HTML-Tutorial

So bereichern Sie Bildstile mithilfe von CSS3 -Attribut (abgerundeter Schattengradienten)

Autor：Eve Cole Aktualisierungszeit：2025-04-03 05:48:01

In CSS3 kann der Browser mit Box-Shadow und Border-Radius direkt auf dem Bild nicht gut rendern. Wenn Sie das Bild jedoch als Hintergrundbild verwenden, kann der hinzugefügte Style-Browser es gut machen. Ich werde erklären, wie Sie mit Box-Shadow, Border-Radius und Übergang unterschiedliche Bildstileffekte erstellen.

Frage

Indem wir uns die Demo ansahen, bemerkten wir, dass wir Grenzradius und eingebettete Box-Shadow für die erste Zeile des Bildes einstellten. Firefox rendert den Grenzradius des Bildes, macht jedoch nicht den eingebetteten Box-Shadow. Weder Chrome- noch Safari -Effekte werden gerendert.

.normal img {

Grenze: Solid 5px #000;

-Webkit-Border-Radius: 20px;

-moz-border-radius: 20px;

Border-Radius: 20px;

-Webkit-Box-Shadow: Einschub 0 1px 5px RGBA (0,0,0, .5);

-moz-box-shadow: Einschub 0 1px 5px RGBA (0,0,0, .5);

Box-Shadow: Einschub 0 1PX 5px RGBA (0,0,0, .5);

}

Firefox -Effekt :

Chrom/Safari

Problemumgehung

Damit Border-Radius und eingebettete Box-Shadow ordnungsgemäß funktionieren, müssen wir das Bild in Hintergrundbild umwandeln.

Dynamische Methode

Um dies dynamisch zu erledigen, müssen wir JQuery verwenden, um ein Hintergrundbild hinzuzufügen, um jedes Bild zu wickeln. Der folgende JS -Code fügt für jedes Bild einen Spannwrapper hinzu, und der Hintergrund -Bildpfad der Spannweite ist der Bildpfad.

Der Code ist relativ einfach, ich glaube nicht, dass es eine Notwendigkeit gibt, ihn zu erklären. Wenn Sie es nicht wissen, können Sie die JQuery -API direkt überprüfen.

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

<script type = "text/javaScript">

$ (Dokument) .Ready (function () {

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

$ (this) .wrap (function () {

return '<span style = "Position: relativ; Anzeige: Inline-Block; Hintergrund: URL (' + $ (this) .attr ('src') + ') No-Repeat Center; Breite:' + $ (this) .width () + 'px; Höhe:' + $ (this) .height () + 'px;" /> ';

});

$ (this) .css ("Opazität", "0");

});

});

</script>

Ausgabe

Der obige Code gibt die folgenden Ergebnisse aus:

<span style = "Position: relativ; Anzeige: Inline-Block; Hintergrund: URL (Image.JPG) No-Repeat Center; Breite: 150px; Höhe: 150px;">

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

</span>

Rundbild

Add Wir verwenden Border-Radius, um den Effekt von kreisförmigen Bildern zu erreichen. Der Effekt ist wie folgt:

CSS:

.Circle .image-wrap {

-Webkit-Border-Radius: 50EM;

-moz-border-radius: 50em;

Border-Radius: 50em;

}

Kartenstil

Unten finden Sie ein Kartenbild, das mehrere eingebettete Box-Shadows verwendet.

CSS:

.Card .image-wrap {

-Webkit-Box-Shadow: Einschub 0 0 1px RGBA (0,0,0, .8), Einschub 0 2px 0 RGBA (255,255,255, .5), Einschub 0 -1px 0 RGBA (0,0,0, .4);

-moz-box-shadow: Einschub 0 0 1px RGBA (0,0,0, .8), Einschub 0 2px 0 RGBA (255,255,255, .5), Einschub 0 -1px 0 RGBA (0,0,0, .4);

Box -Shadow: Einschub 0 0 1PX RGBA (0,0,0, .8), Einschub 0 2px 0 RGBA (255,255,255, .5), Einschub 0 -1px 0 RGBA (0,0,0, .4);

-Webkit-Border-Radius: 20px;

-moz-border-radius: 20px;

Border-Radius: 20px;

}

Reliefstil

Unten ist der Reliefeffekt.

CSS:

.Mbossed .image-wrap {

-Webkit -Box -Shadow: Einschub 0 0 2px RGBA (0,0,0, .8), Einschub 0 2px 0 RGBA (255,255,255, .5), Einschub 0 -7px 0 RGBA (0,0,0, .6), Einschub 0 -9px 0 RGBA (255,255,25,25, .3);

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

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

-Webkit-Border-Radius: 20px;

-moz-border-radius: 20px;

Border-Radius: 20px;

}

Flexibler Reliefstil

Im Vergleich zum Prägenstil fügt der neue Stil ein 1PX -Blur -Attribut hinzu.

CSS:

.Soft-embossed .image-wrap {

-Webkit -Box -Shadow: Einschub 0 0 4px RGBA (0,0,0,1), Einschub 0 2px 1px RGBA (255,255,255, 0,5), Inset 0 -9px 2px RGBA (0,0,0, 0,6), Inset 0 -12px 2px RGBA (255,25,25,25),.

-Moz -Box -Shadow: Einschub 0 0 4px RGBA (0,0,0,1), Einschub 0 2px 1px RGBA (255,255,255, .5), Einschub 0 -9px 2px RGBA (0,0,0, .6), Einschub 0 -12px 2px 2px 2px;

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

-Webkit-Border-Radius: 20px;

-moz-border-radius: 20px;

Border-Radius: 20px;

}

Ausschnittstil

Verwenden Sie den eingebetteten Box-Shadow, um den Ausschnittseffekt zu erzielen.

CSS:

.Cut-out .image-wrap {

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

-moz-box-shadow: 0 1px 0 rgba (255,255,255, .2), Einschub 0 4px 5px RGBA (0,0,0, .6), Einschub 0 1PX 0 RGBA (0,0,0, .6);

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

-Webkit-Border-Radius: 20px;

-moz-border-radius: 20px;

Border-Radius: 20px;

}

Verformung und Glühen

In diesem Beispiel fügen wir der Bildverpackung das Übergangsattribut hinzu. Wenn die Maus vorbeirutscht, wechselt sie von einer abgerundeten Ecke zu einer runden Form. Dann verwenden wir mehrere Boxen-Shadows, um den leuchtenden Effekt zu erzielen.

CSS:

.Morphing-Glowing .image-Wrap {

-Webkit-Übergang: 1s;

-moz-Übergang: 1s;

Übergang: 1s;

-Webkit-Border-Radius: 20px;

-moz-border-radius: 20px;

Border-Radius: 20px;

}

.morphing-glühend .image-wrap: hover {

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

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

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

-Webkit-Border-Radius: 60EM;

-moz-border-radius: 60em;

Grenzradius: 60em;

}

Highlight -Effekte

Der Highlight-Effekt wird erreicht, indem das Element hinzugefügt wird: Nach der Pseudoklasse.

CSS:

.Glossy .image-wrap {

-Webkit-Box-Shadow: Einschub 0 -1px 0 RGBA (0,0,0, .5);

-moz-box-shadow: Einschub 0 -1px 0 RGBA (0,0,0, .5);

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

-Webkit-Border-Radius: 20px;

-moz-border-radius: 20px;

Border-Radius: 20px;

}

.Glossy .image-wrap: nach {

Position: absolut;

Inhalt: ' ';

Breite: 100%;

Höhe: 50%;

Top: 0;

links: 0;

-Webkit-Border-Radius: 20px;

-moz-border-radius: 20px;

Border-Radius: 20px;

Hintergrund: -moz-linear-Gradient (Top, RGBA (255.255,255,0,7) 0%, RGBA (255.255.255, .1) 100%);

Hintergrund: -Webkit-Gradient (linear, links oben, links unten, Farbstopp (0%, RGBA (255.255,255,0,7)), Farbstopp (100%, RGBA (255,255,255, 0,1)));

Hintergrund: Linear-Gradient (Top, RGBA (255.255,255,0,7) 0%, RGBA (255.255.255, .1) 100%);

}

Reflexionseffekt

In diesem Beispiel bewegen wir das Highlight auf den Boden, um den Reflexionseffekt zu erzielen.

CSS:

.reflexion .image-wrap: nach {

Position: absolut;

Inhalt: ' ';

Breite: 100%;

Höhe: 30px;

unten: -31px;

links: 0;

-Webkit-Border-Top-Links-Radius: 20px;

-Webkit-Border-right-right-radius: 20px;

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

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

Border-Top-Links-Radius: 20px;

Grenze-rechte-rechte-radius: 20px;

Hintergrund: -moz-linear-Gradient (Top, RGBA (0,0,0, .3) 0%, RGBA (255,255,255,0) 100%);

Hintergrund: -Webkit-Gradient (linear, links oben, links unten, Farbstopp (0%, RGBA (0,0,0, .3)), Farbstopp (100%, RGBA (255,255,255,0)));

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

}

.reflexion .image-wrap: hover {

Position: Relativ;

Top: -8px;

}

Highlights und Reflexionen

In diesem Beispiel verwenden wir: Vor und: nach: nach dem Kombinieren von Highlights und Reflexionseffekten.

CSS:

.Glosy-reflexion .image-wrap {

-Webkit-Box-Shadow: Einschub 0 -1px 0 RGBA (0,0,0, .5), Einschub 0 1PX 0 RGBA (255,255,255, .6);

-moz-box-shadow: Einschub 0 -1px 0 RGBA (0,0,0, .5), Einschub 0 1PX 0 RGBA (255,255,255, .6);

Box -Shadow: Einschub 0 -1px 0 RGBA (0,0,0, .5), Einschub 0 1PX 0 RGBA (255,255,255, .6);

-Webkit-Übergang: 1s;

-moz-Übergang: 1s;

Übergang: 1s;

-Webkit-Border-Radius: 20px;

-moz-border-radius: 20px;

Border-Radius: 20px;

}

.Glosy-reflexion .image-wrap: vor {

Position: absolut;

Inhalt: ' ';

Breite: 100%;

Höhe: 50%;

Top: 0;

links: 0;

-Webkit-Border-Radius: 20px;

-moz-border-radius: 20px;

Border-Radius: 20px;

Hintergrund: -moz-linear-Gradient (Top, RGBA (255.255,255,0,7) 0%, RGBA (255.255.255, .1) 100%);

Hintergrund: -Webkit-Gradient (linear, links oben, links unten, Farbstopp (0%, RGBA (255.255,255,0,7)), Farbstopp (100%, RGBA (255,255,255, 0,1)));

Hintergrund: Linear-Gradient (Top, RGBA (255.255,255,0,7) 0%, RGBA (255.255.255, .1) 100%);

}

.Glosy-reflexion .image-wrap: nach {{

Position: absolut;

Inhalt: ' ';

Breite: 100%;

Höhe: 30px;

unten: -31px;

links: 0;

-Webkit-Border-Top-Links-Radius: 20px;

-Webkit-Border-right-right-radius: 20px;

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

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

Border-Top-Links-Radius: 20px;

Grenze-rechte-rechte-radius: 20px;

Hintergrund: -moz-linear-Gradient (Top, RGBA (230,230,230, .3) 0%, RGBA (230,230,230,0) 100%);

Hintergrund: -Webkit-Gradient (linear, links oben, links unten, Farbstopp (0%, RGBA (230,230,230, .3)), Farbstopp (100%, RGBA (230,230,230,0)));

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

}

Bandstil

In diesem Beispiel verwenden wir: nach dem Erreichen des Effekts von Band.

CSS:

.Tape .image-wrap {

-Webkit-Box-Shadow: Einschub 0 0 2px RGBA (0,0,0, .7), Einschub 0 2px 0 RGBA (255,255,255, .3), Einschub 0 -1px 0 RGBA (0,0, 0, 5), 0 1px 3px RGBA (0,0,0, .4);

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

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

}

.Tape .image-wrap: nach {

Position: absolut;

Inhalt: ' ';

Breite: 60px;

Höhe: 25px;

Top: -10px;

Links: 50%;

Rand -Links: -30px;

Grenze: Solid 1PX RGBA (137,130,48, .2);

Hintergrund: -moz-linear-Gradient (Top, RGBA (254.243,127, .6) 0%, RGBA (240,224,54, .6) 100%);

Hintergrund: -Webkit-Gradient (linear, links oben, links unten, Farbstopp (0%, RGBA (254.243,127, .6)), Farbstopp (100%, RGBA (240,224,54, .6)));

Hintergrund: Linear-Gradient (Top, RGBA (254.243,127, .6) 0%, RGBA (240.224,54, .6) 100%);

-Webkit-Box-Shadow: Einschub 0 1px 0 RGBA (255,255,255, .3), 0 1PX 0 RGBA (0,0,0, .2);

}

Verformung und Färbung

In diesem Beispiel verwenden wir: Nach dem Element, um den Effekt des Radialgradienten zu erreichen, wenn die Maus passt.

CSS:

.Morphing-Tinting .image-Wrap {

Position: Relativ;

-Webkit-Übergang: 1s;

-moz-Übergang: 1s;

Übergang: 1s;

-Webkit-Border-Radius: 20px;

-moz-border-radius: 20px;

Border-Radius: 20px;

}

.Morphing-Tinting .image-Wrap: Hover {

-Webkit-Border-Radius: 30EM;

-moz-border-radius: 30em;

Grenzradius: 30em;

}

.Morphing-Tinting .image-Wrap: After {

Position: absolut;

Inhalt: ' ';

Breite: 100%;

Höhe: 100%;

Top: 0;

links: 0;

-Webkit-Übergang: 1s;

-moz-Übergang: 1s;

Übergang: 1s;

-Webkit-Border-Radius: 30EM;

-moz-border-radius: 30em;

Grenzradius: 30em;

}

.Morphing-Tinting .image-Wrap: Hover: After {

Hintergrund: -Webkit -Gradient (radial, 50% 50%, 40, 50% 50%, 80, von (RGBA (0,0,0,0)) bis (RGBA (0,0,0,1));

Hintergrund: -moz-radial-Gradient (50% 50%, Kreis, RGBA (0,0,0,0) 40px, RGBA (0,0,0,1) 80px);

}

Federkante Runde

Wir können auch Radialgradienten verwenden, um Masken zu erzeugen, um einen Federneffekt zu erzielen.

CSS:

.Feather .image-wrap {

Position: Relativ;

-Webkit-Border-Radius: 30EM;

-moz-border-radius: 30em;

Grenzradius: 30em;

}

.Feather .image-wrap: nach {

Position: absolut;

Inhalt: ' ';

Breite: 100%;

Höhe: 100%;

Top: 0;

links: 0;

Hintergrund: -Webkit -Gradient (radial, 50% 50%, 50, 50% 50%, 70, von (RGBA (255.255,255,0)) bis (RGBA (255,255,255,1)));

Hintergrund: -moz-radial-Gradient (50% 50%, Circle, RGBA (255.255,255,0) 50px, RGBA (255.255,255,1) 70px);

}

Browserkompatibilität

Diese Implementierung funktioniert gut in den meisten Browsern, die Border-Radius, Box-Shadow, vor und nach: nach Funktionen (wie Chrome, Firefox und Safari) unterstützen. In Browsern, die keine neuen Funktionen unterstützen, wird nur das Originalbild angezeigt.

Erstellen Sie Ihre eigene Implementierung

Mit Hilfe von: vor und: Nach: Nach pseudoklasse können Sie viele Stile für Bilder erstellen und versuchen, selbst neue Effekte zu erstellen.

Ähnliche Artikel