CSS3 ist wirklich an Fahrt und viele der Befehle in der CSS3 Working Draft von Firefox, Safari und Google Chrome unterstützt umrissen sammeln. Wir dachten, wir würden zusammen einige unserer Favoriten. Bevor wir loslegen CSS3-Befehle erfordern Browser spezifischen Syntax für sie zu arbeiten.

Für Mozilla Firefox, müssen wir die-moz-Präfix, zum Beispiel zu verwenden:

-Moz-border-radius:

Und für Safari the-webkit-Präfix, zum Beispiel:

-Webkit-border-radius:

1. Border Radius

Die CSS3 border Radius Befehl erzeugt abgerundeten Ecken auf ein Element. Anstelle der Verwendung von 4 oder mehr Bilder zu erstellen abgerundeten Ecken verwenden Sie die folgenden Befehle ein:

/ * Für Mozilla Firefox * /
-Moz-border-radius: 20px;

/ * Für Safari und Google Chrome * /
-Webkit-border-radius: 20px;
}

2. Box Schatten

Ein Schatten kann die Elemente mit der CSS3-Box Schatten Befehl angewendet werden. Die Box Schatten akzeptiert drei numerische Werte plus eine Farbe, um diesen Effekt anzuwenden. Diese Zahlen sind:

1. Entfernung von horizontalen Schatten Offset - Ein positiver Wert bedeutet, der Schatten nach rechts und einen negativen Wert auf der linken Seite geworfen
2. Entfernung von vertikalen Schatten Offset - Ein positiver Wert bedeutet, der Schatten unten gegossen und ein negativer Wert oben
3. Wie verschwommen Sie möchten den Schatten

Mit dem Zusatz von einem Farbwert der Schatten ist komplett:

/ * Für Mozilla Firefox * /
-Moz-box-shadow: 5px 5px 5px # b6ebf7;

/ * Für Safari und Google Chrome * /
-Webkit-box-shadow: 5x 5px 5px # b6ebf7;

3. Transparenz oder RGBA

Transparenz ist immer heikel. Verschiedene Browser historisch Transparenz über verschiedene Befehle angewendet. Die Fortsetzung dieser Cross-Browser-Inkonsistenzen wir die Zugabe des neuen CSS3 RGBA Background-Eigenschaft haben, aber im Prinzip diesen Befehl ist logischer. Der Befehl besteht aus 4 Werte - die erste, zweite und dritte sind die roten, grünen und blauen Werte (0-255) jeweils durch den Alpha-Kanal oder Transparenz (0-1) gefolgt.

Für die RGBA-Befehl der Browser bestimmte Vorwahlen (-moz-,-webkit-) sind nicht erforderlich:

# Box3 {
background-color: rgba (110, 142, 185, .5);
}

Die Hintergrundfarbe Befehl fügt eine schöne blau-grauen Hintergrund auf .5 oder 50% Deckkraft in Browsern, die CSS3 RGBA Eigentum zu verstehen.

Leider Internet Explorer wird auch versuchen, die Hintergrundfarbe Befehl machen, aber nicht verstehen RGBA. Um sicherzustellen, dass die Hintergrundfarbe auch in IE setzen ein IE-only hack ist nicht erforderlich. In dem folgenden Beispiel die: last-child pseudo-Selektor, die Internet Explorer nicht versteht, wird verwendet, um sie auszuschließen.

Körper: last-child # box3 {
/ * Schließen Sie alle IE-Browser mit: last-child * /
background-color: rgba (110, 142, 185, .5) wichtig;
}

4. Columns

Die Fähigkeit, Spalten hinzuzufügen hat CSS3 hinzugekommen. Anstatt Floating Elements in Containern können wir die Spalte Anzahl, Breite und Herrschaft:

/ * Für Mozilla Firefox * /
-Moz-column-count: 2;
-Moz-column-gap: 20px;
-Moz-column-rule: 1px solid # 6e8eb9;

/ * Für Safari und Google Chrome * /
-Webkit-column-count: 2;
-Webkit-column-gap: 20px;
-Webkit-column-Regel: 1px solid # 6e8eb9;
}

5. Mehrere Hintergrundbilder

Hintergrund Bilder seit jeher restriktive, wenn es um CSS aufgrund der Tatsache, man kann nur gelten ein Hintergrundbild pro Element kommt. Dies ist nicht der Fall mit CSS3, die mehrere Bilder pro Element ermöglicht durch einfaches Komma trennen.

Um ein Bild sowohl auf dem links und rechts von einem Element Sie die folgenden Befehle verwenden können, mit ein wenig Styling Ort:

padding: 0 20px;
}

Dieser Befehl wird falsch gemacht, indem Internet Explorer, da es nicht akzeptieren, 2 Hintergrund Bilder auf einem einzigen Element. Ein Ausschluss aller IE Hack erforderlich ist.

# Box5 blockquote {
/ * Für alle Browser, nur ein offenes Angebot * /
background: url (/ i / quotel.gif) 0 0 no-repeat;
padding: 0 20px;
}

Körper: last-child # box5 blockquote {
/ * Schließen Sie alle IE-Browser mit: last-child * /
/ * Dann werden die beiden Bilder * /
background: url (/ i / quotel.gif) no-repeat 0 0, url (/ i / quoter.gif) no-repeat 100% 0;
}

6. Hintergrund Gradienten

CSS3 Hintergrundverläufen sind äußerst flexibel und kann verwendet werden, um komplexe Muster zu erstellen. In seiner einfachsten Form der CSS linearen Gradienten ermöglicht einen Farbverlauf auf ein Element von oben nach unten aufgetragen werden und von links nach rechts.

Dieses Beispiel einer CSS3 Gradienten in Mozilla Firefox gilt eine hellblaue Gradienten an der Unterseite der Box für nur 20% der Boxen 'height

Safari verwendet eine weniger intuitiv, aber flexibleren Ansatz mit Farbe zu stoppen Werte. Ein Beispiel für die Safari-spezifischen Code folgt (man beachte die lineare in Klammern anstelle von außen ist im Lieferumfang enthalten):

# Box8 {
Hintergrund:-webkit-Gradienten (linear, links unten, links oben, Farb-Anschlag (0, # b6ebf7), Farb-Anschlag (0,20, # fff));
}

7. Rotation

CSS3 auch eine Rotation der Elemente mit der Transformation Befehl, mit dem drehen Eigentum akzeptieren Grad als Parameter.

<code> # Box9 {
-Moz-transform: rotate (2DEG);
-Webkit-transform: rotate (2DEG);
} </ Code>

8. Outlines

Outilines sind in der CSS3-Spezifikation enthalten und ermöglichen sowohl eine Grenze und eine Kontur auf ein einzelnes Element angewendet werden.

Der Umriss Eigenschaft ist identisch mit der Grenze Befehl. Die zusätzlichen Offset-Eigenschaft erlaubt jedoch die Grenze weiter innen oder außen das Element verschoben werden.

Filed under: Css by admin