CSS3 Border-Image-Eigenschaft, die Fotos wirklich cool macht!
Grenzen zu schaffen ist nichts Neues HTML & CSS; Wir konnten seit dem Beginn Grenzen hinzufügen. Sie waren möglicherweise mit festen Rändern, punktierten Rändern, gestrichelten Rändern usw. vertraut.
Mit der neuen CSS3-Eigenschaft border-image wird das Erstellen von Rahmen für HTML-Elemente jedoch immer weiter fortgeschritten. Nun, vereinfacht gesagt, können wir jetzt einen Rand hinzufügen, indem wir ein Bild als Quelle verwenden, mit dem wir attraktivere Rahmen hinzufügen können. Nun gut, jetzt sehen wir, wie diese Eigenschaft funktioniert.
Syntax- und Browserunterstützung
Das Rahmenbild in CSS3 wird mit der folgenden Abkürzungssyntax definiert:
Randbild: [Bildquelle] [Schnitt] [Breite] [Anfang] [Wiederholung];
Die obige Syntax ist die offizielle Version von W3C, die nur in Chrome unterstützt wird, während Opera, Firefox und Safari noch die Vorgängerversion benötigen (-O-, -moz-, -Webkit-), und der Internet Explorer unterstützt diese Eigenschaft nicht.
Darüber hinaus ist die [Breite] und das [Anfang] Wert in dieser Rahmenbild Diese Eigenschaft wird in keinem Browser unterstützt. Der Wert für width kann jedoch mit ersetzt werden Rahmenbreite Eigentum.
Kurz gesagt, für den Moment können wir nur den Wert von anwenden [Bildquelle], [Scheibe] und [wiederholen] .
Randbild: [Bildquelle] [Schnitt] [Wiederholung];
Bildscheibe
Bevor wir mit der Demonstration dieser Eigenschaft fortfahren, wollen wir über das sprechen “Bildscheibe” erstens ist es etwas Neues bei der Deklaration einer Eigenschaft. Der Bildausschnitt definiert hier den Schnitt des Bildes, der den Anfangspunkt von oben, rechts, unten und links von den Bildrändern nimmt und das Bild anschließend in neun Abschnitte unterteilt, wie im folgenden Bild dargestellt.
Im Bild oben sehen Sie die Abschnitte 1, 3, 7 und 9 werden die Ecken der Grenze und die Abschnitte 2, 4, 6 und 8 wird zur Randkante oder -linie und stellt sicher, dass der Abschnitt, an dem er zur Kante wird, wiederholbar oder dehnbar ist.
Der Wert der Slices kann mit einem deklariert werden Pixel Einheit oder ein Prozentsatz (%) Einheit für flexibles Messen.
weitere referenzen:
- CSS-Hintergründe und Grenzen Stufe 3
Fotorahmen erstellen
Lassen Sie uns nun die Eigenschaft an einem echten Beispiel demonstrieren.
Dieses Mal werden wir das implementieren Rahmenbild Eigenschaft, um einen Bilderrahmen zu erstellen, und wir verwenden das Bild unten als Quelle. Wir haben das Bild sorgfältig vermessen, damit es unabhängig von der Breite und Höhe des Inhalts ordnungsgemäß geschnitten, wiederholt und gedehnt werden kann.
Hinweis: Sie können das Bild oben über diesen Link herunterladen.
In dieser Demonstration verwenden wir diesen atemberaubenden Cinemagraph von From Me to You als Foto.
(Bildquelle: Von mir zu dir)
Das Markup
Das Markup ist so einfach wie folgt:
Vergessen Sie nicht, das zu ersetzen images_2 / css3-border-image-property-making-photos-really-cool_3.jpg mit deinem eigenen Foto.
Die Stile
Und dann geben wir ihm einen Rahmen mit Rahmenbild.
Wenn Sie das Bild oben betrachten, beträgt unsere Bildbreite 180px insgesamt. Dieser Wert kann dann in unterteilt werden 6 welche jede Abteilung ist 30px; und so schneiden wir das Bild für 30px.
Wenn Sie einen Längenwert für das Slice verwenden, sollten Sie das ausschließen px Einheit, da es automatisch in übersetzt wird Pixel, Wenn Sie sich jedoch entscheiden, den Prozentsatz zu verwenden, müssen Sie immer noch das (%).
Bei der Bildwiederholung verwenden wir die Standardeinstellung. wiederholen. Alternativ können Sie verwenden strecken Und machen Sie sich keine Sorgen, das Rahmenbild wird immer noch anmutig aussehen.
img border-image: url ("images / frame.png") 30 Wiederholung; -o-border-image: url ("images / frame.png") 30 Wiederholung; -moz-border-image: url ("images / frame.png") 30 Wiederholung; -webkit-border-image: url ("images / frame.png") 30 Wiederholung; Randbreite: 30px; Außerdem möchten wir das Bild in der Mitte des Browser-Fensters platzieren und dem Dokument eine Hintergrundtextur hinzufügen, um es ansprechender zu machen.
HTML Hintergrund: URL ('images / lightpaperfibers.png'); .wrapper margin: 20px auto; Höhe: 476px; Breite: 675px; Text ausrichten: Mitte; In Ordnung, ich denke, wir sind hier fertig, jetzt betrachten wir es in einem Browser.
- Demo
- Quelle herunterladen
Fühlen Sie sich, als würden Sie ein magisches Gemälde in Hogwarts betrachten?
Letzter Gedanke
Diese Rahmenbild Zweifellos ist es eine schöne Ergänzung in der CSS3-Familie. Wir dürfen uns nicht mehr auf die einfachen Grenzen beschränken.
In diesem Beitrag haben wir Ihnen gezeigt, wie wir einen Bildrahmen erstellen können, ohne sich um den Inhalt oder in diesem Fall um die Abmessungen des Fotos (Breite und Höhe) kümmern zu müssen. Die Höhe und Breite kann flexibel sein, solange die Randquelle wiederholbar oder dehnbar ist.
Schließlich, wenn Sie immer noch ein bisschen verwirrt sind Rahmenbild, Es gibt ein Werkzeug, mit dem Sie leichter ein Werkzeug erstellen können: das Grenzbild-Werkzeug
