Aufgrund der unterschiedlichen Rendering auf Browser, Microsoft Internet Explorer auf jeden Fall sehen, dass im Hinterkopf, wir müssen immer an Tricks Zuflucht zu Spezialeffekten, die mittlerweile zum Standard werden sollte gelten. Die vielfach diskutierte abgerundeten Kanten sind ein klassisches Beispiel für "Katastrophe" durch die völlige Unfähigkeit zu einer ernsthaften Standards auf Seite Rendern von HTML / CSS machen produziert. , etc… Es gibt viele Lösungen, die das Netzwerk an die "Effekte" (Auswirkungen der Befreiung bestehenden HTML als abgerundete Kanten, Schatten, Spiegelungen, etc ...) mit Flecken auf den Blättern von Stilen, spezielle Tricks bei der Verwendung von zu erhalten erlauben div gepfropft, Bibliotheken JavaScript, Verwendung von canvas , etc ...
Auf einer rein technischen Lehre möchte ich erklären, weitere (Cross-Browser), um die abgerundeten Kanten der Bilder anzuwenden:
Demo und Quelle
- Komplette Projekt auf Google Code
- Demo
- jquery.roundborders.js
- Bild im Photoshop-Format
- Bild im PNG-Format
CSS
Wir wissen, dass, abgesehen von IE, können Sie die abgerundeten Ecken mit nur CSS einige ihrer einzelnen Browsern wie zu erstellen:
1 2 3 4 5 6 | / * Abgerundete Ecken * / div # {roundBorders ; /* CSS 3 */ border-radius: 9px; / CSS * 3 * / ; /* Firefox */ -Moz-border-radius: 9px; / * Firefox * / ; /* Safari */ -Webkit-border-radius: 9px; / * Safari * / } |
Hinweis: Ich möchte hier darauf hinweisen, wie absurd ist dieser Stand der Dinge. Wenn jeder Browser beginnt zu definieren, ihre CSS-Stile coax die insgesamt zur Hand ist. Darüber hinaus ist ein Standard, wenn es "identisch" für alle, sonst, was Standard ist? Es ist wirklich nicht möglich, diesen Zustand der Dinge zu akzeptieren, zu finden, die zu einer Grenze von 4px wollen wir zu 8 Zeilen CSS-Code festgelegt.
Dieses Verfahren ist jedoch nicht trotz das Problem behoben "edge" nicht auf Bildern zu arbeiten. Eine mögliche Lösung besteht darin, zu einer der Ecken des Bildes anwenden muss oder alle vier, un'alra Bild konstruiert zu "simulieren" eine abgerundete Kante. In der Praxis werden wir die Bilder von der Grenze zu unserem Image "target", das Ergebnis der Fähigkeit GIF-und PNG-Dateien mit Transparenz dargestellt werden überlagern.
> Pro
- funktioniert in allen Browsern (FireFox, Opera, Safari Chrome, Flock, IE 7)
- nützlich, wenn ein Eingriff ist eine schnelle und gezielte
- Volle Anpassung des Bildes, das die Kanten repräsentiert, mit der Fähigkeit, jedes Brett anpassen
- Javascript kompakt und konfigurierbar: Sie können wählen, zu handeln, was Kanten des Bildes
- erfordert keine Style Sheets (CSS)
> Cons
- die Grenze Größe und Farbe abhängig von den Bildrändern und Hintergründe unterschiedliche Bilder erfordern unterschiedliche
- Sie müssen Javascript aktiv
Die Technik
contenitore. So wenden Sie die vier Kanten an den Ecken eines Bildes verwenden wir jQuery zu "wrap" der tag img in einem div -Container. , posizionati in modalità assoluta, che corrisponderanno ai nostri angoli. Unmittelbar unter dem Tag img Legen Sie vier div , im absoluten Modus platziert, die auf unsere Ecken entsprechen. Das Skript jQuery jquery.roundborders.js ist als eine Erweiterung, plugin, und die Methode gebaut roundBorders() akzeptiert eine Reihe von Optionen, aus denen, auf die die Ecken der weichen Kante. Daraus folgt, dass maximal fünf hinzukommen div : Behälter sowie die vier Ecken.
in absolute . Die vier div im Bild oben gezeigt, Sie gehen, um das Bild überlagern, wenn Sie den Stil position in der absolute . Dann, durch den Einsatz von margin , wird eins nach dem anderen an den vier Ecken des Bildes platziert werden. Hier ist der Code jquery.roundborders.js :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | / ** * JQuery Round Borders * * Erstellen Sie einen Randeffekt arrotondado auf einigen oder allen der Ecken eines Bildes * Durch Überlagerung. * * @ Autor Giovambattista Fazioli * @ @ Email g.fazioli undolog.com * @ Web http://www.undolog.com * * @ Usage * $ ('Myimageid'). RoundBorders ( * { * Image: 'path / myborder.png " * Radius: 16, * Ecken: 'tl br " *} *); * * * / ( $ ) { (Function ($) { = function ( settings ) { jQuery. fn. roundBorders = Funktion (Einstellungen) { ( senden Sie dieses. each ( function () { $ ( this ) ; var $ this = $ (this); 'ba4aae84ef81' ; // paganini not repeat var hash = 'ba4aae84ef81' / / Paganini nicht wiederholen ! $this. hasClass ( hash ) ) { if ($ this. hasClass (Hash)) { 'display' , 'block' ) ; $ Diese CSS ('display', 'block').; { var defaults = { || 16 , . RADIUS-Einstellungen Radius | | 16, || 'border.png' , . Bild: Einstellungen Bild | | 'border.png " || $this. attr ( 'width' ) , . Breite:. Einstellungen Breite | | $ this attr ('width'), || $this. attr ( 'height' ) , . Höhe:. Einstellungen Höhe | | $ this attr ('height'), || 'no' , . Zentrum: Einstellungen Zentrum | | 'no' || 'tl tr bl br' Ecken:. Einstellungen Ecken | | 'tl tr bl br " }; defaults. radius ; var defaults = ra Radius.; defaults. width ; var ww = defaults Breite.; defaults. height ; var defaults = hh Höhe.; defaults. image ; var defaults = im Bild.; hh ; var to = - hh; ww - ra ; var tr = ww - ra; to + hh - ra ; var = bl + hh - ra; ( defaults. center == 'no' ) ? '' : 'margin:0 auto' ; var = cc (Mitte defaults == 'keine')?'':' margin:. 0 auto "; '' ; var out =''; defaults. corners . split ( ' ' ) ; var defaults = cr. Corners. split (''); { } ; var w = {}; '<div style="background:url(' + im + ') no-repeat;position:absolute;width:' + ra + 'px;height:' + ra + 'px;margin:' + to + 'px 0 0 0"></div>' ; co tl = '<div style = "background: url (' + im + ') no-repeat; position: absolute; width:'. + ra +" px, Höhe: "+ ra +" px; margin: '+ um + "px 0 0 0"> </ div> '; '<div style="background:url(' + im + ') -' + ra + 'px 0px no-repeat;position:absolute;width:' + ra + 'px;height:' + ra + 'px;margin:' + to + 'px 0 0 ' + tr + 'px"></div>' ; co tr = '<div style = "background: url (' + im + ') -' + ra +" px 0px no-repeat; position: absolute; width: '. + ra + "px, Höhe:" + ra + "px; margin: '+ to +" px 0 0' + tr + "px"> </ div> '; '<div style="background:url(' + im + ') -' + ( ra * 2 ) + 'px 0px no-repeat;position:absolute;width:' + ra + 'px;height:' + ra + 'px;margin:' + bl + 'px 0 0 0"></div>' ; co bl = '<p style = "background: url (' + im + ') -" + (ra * 2) + "px 0px no-repeat; position: absolute; width:'. + ra +" px, Höhe : '+ ra + "px; margin:' + bl +" px 0 0 0 "> </ div> '; '<div style="background:url(' + im + ') -' + ( ra * 3 ) + 'px 0px no-repeat;position:absolute;width:' + ra + 'px;height:' + ra + 'px;margin:' + bl + 'px 0 0 ' + tr + 'px"></div>' ; co br = '<div style = "background: url (' + im + ') -' + (RA * 3) +" px 0px no-repeat; Positionen: absolute; width: '. + ra + "px, Höhe : '+ ra + "px; margin:' + bl +" px 0 0 '+ tr + "px"> </ div>'; var o in cr ) if ( co [ cr [ o ] ] ) out += co [ cr [ o ] ] ; for (var oder cr) if (co [cr [oder]]) aus + = co [cr [oder]]; $ Diese '<div style="width:' + ww + 'px;height:' + hh + 'px;' + cc + '"></div>' ) . Wrap ('<div style="width:' + ww + + + + hh'px;height:''px;' cc +'"> </ div>') out ) . addClass ( hash ) . fadeIn ( 'slow' ) ; ... Nach (out) AddClass (Hash) FadeIn ('slow'); } } ); } ; }) (JQuery); |
Bild von den Rändern
Wie bereits erwähnt, ist einer der "Nachteile" dieser Technik die Notwendigkeit, ein Bild, das unsere Grenzen repräsentiert. Dieser Nachteil kann jedoch in einen Vorteil wenden, wenn wir zu komplexen Kanten und nicht einfach "Rundung" Klassiker zu schaffen. Auf jeden Fall wollen wir mal sehen, wie das Bild aus dem einfachen Kanten vorgenommen werden müssen. In unserem Beispiel wollen wir eine abgerundete Kante von 16px zu erstellen. Dann nutzen eine Funktion der Stile, um "merge" unsere vier Grenzen in einem Bild. Auf diese Weise haben wir ein einziges Bild von 64 × 16 Pixel, wie unten dargestellt:
Jedes Feld steht für eine Ecke und hat Abmessungen von 16 × 16 Pixel. Der Hintergrund ist schwarz, während die transparente Farbe Weiß ist die Farbe des Hintergrundes, die unser Bild ist. Wenn Ihre Website hat einen anderen Hintergrund, ersetzen Sie einfach den weißen mit der Farbe Ihrer Site. Das Bild wird dann:
Die Reihenfolge der Winkel ist erforderlich: oben links (oben links), rechts oben (oben rechts), unten links (unten links) und rechts unten (unten rechts).
- Zitat: -
"Anmerkung: Ich möchte hier darauf hinweisen, wie absurd ist dieser Stand der Dinge. Wenn jeder Browser beginnt zu definieren, ihre CSS-Stile coax die insgesamt zur Hand ist. Darüber hinaus ist ein Standard, wenn es "identisch" für alle, sonst, was Standard ist? Es ist wirklich nicht möglich, diesen Zustand der Dinge zu akzeptieren, zu finden, die zu einer Grenze von 4px wollen wir zu 8 Zeilen CSS Code zu setzen. "
- Ende Zitat -
Quote 100% Es ist Zeit, dass diejenigen, die auch die Standards gefolgt war und ob es irgendwelche neuen Implementierungen sind anschmiegsam mit den nächsten Updates des Browsers.