Arbeiten mit neuem Styling für Rahmen in CSS3

In diesem Segment der CSS3-Reihe werden wir die Randeigenschaften untersuchen, die heute implementiert werden können, einschließlich Randfarbe; Randradius, der abgerundete Ecken definiert; und Rahmenbilder, die verschiedene Bilder und Eigenschaftsregeln, Merkmale und Funktionen verwenden.

Randfarbe

Mit der CSS3-Eigenschaft für die Rahmenfarbe können Sie einen Rand mit X Pixeln zuweisen, wie im folgenden Beispiel mit 8 Pixel. Anschließend können Sie für diese Rahmenregel bis zu X Farben verwenden, wobei jede Farbe mit einer Pixelbreite von 1 Pixel gerendert wird. Wenn Sie einen Standardrahmen von 10 Pixel verwenden, aber nur sechs oder sieben Farben anwenden, wird die letzte Farbe auf die verbleibende Randbreite angewendet.

Das Erstellen eines farbigen Rahmens mit CSS3-Codierung ist mit dem folgenden Beispiel unter Verwendung von Farbcodes für abgestufte Grauschattierungen recht einfach:

 .Rand { 
 Rand: 
 festes 8px # B9B9B9; 
 -moz-border-bottom-Farben: # 555 # 666 # 777 # 888 # 999 #aaa #bbb #ccc; 
 -moz-border-top-Farben: # 555 # 666 # 777 # 888 # 999 #aaa #bbb #ccc; 
 -moz-border-left-farben: # 555 # 666 # 777 # 888 # 999 #aaa #bbb #ccc; 
 -moz-border-right-Farben: # 555 # 666 # 777 # 888 # 999 #aaa #bbb #ccc; 
 Polsterung: 5px 5px 5px 15px; 
 }} 

Der resultierende randfarbene CSS3-Code rendert einen grau verblassenden Rahmen, der den Inhaltstext umgibt. Derzeit nur von Mozilla Firefox unterstützt, sieht es so aus, wenn es im folgenden Beispiel-HTML angewendet wird:

Lorem ipsum dolor sitzen amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum. Morbi nulla metus, luctus et, ullamcorper sitzen amet, Commodo Quis, Nisl. Ut blandit lacus nec nibh. Phasellus eleifend enim et risus. Nam condimentum. Praesent euismod auctor dui.

 Abbildung A zeigt, wie es in Firefox 6.0.2 angezeigt wird: 

Abbildung A.

Randradius

Das Hinzufügen abgerundeter Ecken zu einem Rand bedeutet das Hinzufügen einer Randradius-Eigenschaft und ist nur eine Frage des Hinzufügens der Linie, die die Anzahl der Pixel für jede abzurundende Ecke definiert. Das Hinzufügen der folgenden Codezeile zum Rahmenstil des vorherigen Beispiels führt zu den abgerundeten Ecken in Abbildung B. Die Syntax für die Platzierung bezieht sich auf oben links, oben rechts, unten rechts, unten links:
 -Moz-Rand-Radius: 35px 35px 35px 35px; 

Der Randradius ist derzeit nur in Mozilla Firefox implementiert. So wird es in Firefox 6.0.2 gerendert:

Abbildung B.

Das nächste Beispiel führt zu einem anders gestalteten abgerundeten Rand mit diesem Code:

 -Moz-Rand-Radius: 35px 0px 35px 0px; 

So sieht die Optimierung in Firefox 6.0.2 aus:

Abbildung C.

Randbild

Eine alternative Rahmenfunktion von CSS3 ist die Eigenschaft border-image, mit der Sie benutzerdefinierte Rahmen und flexible Felder für HTML-Inhalte erstellen können. Mit dieser Eigenschaft können Sie ein Bild definieren, das anstelle des normalen Rahmens eines Elements verwendet werden soll. Die Border-Image-Eigenschaft funktioniert derzeit in Safari, Firefox 3.1+ und Chrome, wenn die Präfixe -moz- und -webkit- verwendet werden. Die Syntax zur Verwendung der Rahmenbild-Eigenschaft besteht aus drei Teilen, wie unten unter Verwendung der CSS3-Regel gezeigt:

 Rahmenbild: URL (borderimage.png) XY Typ; 

Die Eigenschaft gibt (1) die URL des Bildes an, das als Rahmen verwendet werden soll, (2) wo das in Höhe und Breite definierte Bild geschnitten werden soll (X entspricht der Schnitthöhe, Y entspricht der Schnittbreite) und (3) wie der Browser dies tun wird Wenden Sie diese Abschnitte auf die Randkanten des Elements an. Typ kann angeben, ob der Rand wiederholt, gerundet oder gedehnt wird. Die Optionen für Typ = sind Wiederholen oder Runden oder Strecken .

Der erste Teil der Eigenschaftsregel ist eine Fortsetzung der bekannten Eigenschaft für Hintergrundbilder und wie sie seit Jahren angewendet werden. In diesem Beispiel verwende ich das Bild Bgimage.png, das unten angezeigt wird und 148 x 148 Pixel groß ist.

Abbildung D.

Der zweite Teil der Regeln für die Eigenschaft "Rahmenbild" kann bis zu vier Werte enthalten, die die Rahmenbreite angeben und in der typischen Reihenfolge von oben, rechts, unten, links angegeben werden. Sie können als Pixel oder Prozent ausgedrückt werden, wobei Pixel werden mit dem% -Symbol referenziert und Pixel werden allein ohne "px" -Anzeige aufgelistet, wie in den folgenden Beispielen gezeigt:

 Rahmenbild: URL (Bgimage.png) 48 48 48 48 rund; 

oder

 Rahmenbild: URL (Bgimage.png) 30% 30% 30% 30% rund; 

Beide führen zu folgenden Ergebnissen, wie in Firefox 6.0.2 gerendert:

Abbildung E.

Der dritte Teil der Rahmenbildregel teilt dem Browser mit, wie der mittlere Teil Ihres Bildes oder die vier Kanten des Elements behandelt werden sollen.

Durch Wiederholen wird das Bild gekachelt, durch Dehnen wird das Bild skaliert und durch Rundung wird das gleiche wie durch Wiederholen skaliert oder auf die Höhe und Breite des Elements gerundet, entweder eine Ebene oder ein definiertes Div. Sie können bis zu zwei Werte definieren, von denen der erste die oberen und unteren Kanten und der zweite die linken und rechten Kanten ist. Das folgende Beispiel enthält eine definierte Rahmenbreite, Mozilla- und Chrome-Präfixe sowie eine Fallback-Rahmenbildregel.

 Randbreite: 48px; 
 -moz-border-image: url (Bgimage.png) 48 48 48 48 Stretch wiederholen; 
 -webkit-border-image: url (Bgimage.png) 48 48 48 48 Stretch wiederholen; 
 Hintergrundbild: URL (Bgimage.png) 48 48 48 48 Stretch wiederholen; 
 Breite: 400px; Polsterung: 5px 5px; Höhe: erben; 
Wie Sie sehen können, wird das Randbild jetzt an allen Kanten auf 48 Pixel gestreckt, wie im Beispiel in Abbildung F gezeigt .

Abbildung F.

Das nächste Beispiel zeigt die Verwendung der Rundungsregel, bei der das Bild wiederholt und auf die Höhe und Breite der definierten Ebene skaliert (oder gerundet) wird, in der es enthalten ist. Ich werde das Bild in Abbildung G und den folgenden CSS3-Code verwenden:

Abbildung G.

 Randbreite: 15px; 
 -moz-border-image: url (bgborder1.png) 43 43 round; 
 -webkit-border-image: url (bgborder1.png) 43 43 round; 
 Breite: 400px; Polsterung: 10px 10px; Höhe: erben; 
Das Ergebnis ist der Rand in Abbildung H (unter Verwendung des gleichen HTML-Beispiels wie oben), der in Firefox 6.0.2 angezeigt wird:

Abbildung H.

Das nächste Beispiel zeigt die Verwendung der Dehnungsregel unter Verwendung des Bilds in Abbildung I und des folgenden CSS3-Codes:

Abbildung I.

 Randbreite: 15px; 
 -moz-border-image: url (bgborder2.png) 35 35 Strecken; 
 -webkit-border-image: url (bgborder2.png) 35 35 Strecken; 
 Breite: 400px; Polsterung: 10px 10px; Höhe: erben; 
Der resultierende Bildrand ist in Abbildung J dargestellt, wie in Chrome 14.0.835 dargestellt:

Abbildung J.

In zukünftigen Segmenten der CSS3-Serie werde ich Boxschatten, 3D-Text, Übergänge einschließlich Rollover-Effekten und andere Funktionen überprüfen, die heute in vielen modernen Browsern verwendet werden können.

Ebenfalls:

  • Schauen Sie sich zunächst die CSS3-Webdesignelemente an
  • Überprüfung der CSS3-Ressourcen: CSS3.info
  • Arbeiten mit dem mehrspaltigen CSS3-Layoutmodul
  • Arbeiten mit CSS3-Hintergrundbildern

© Copyright 2020 | mobilegn.com