Mehrere CSS3-Tipps, die Sie kennen sollten

Viele von Ihnen haben vielleicht viele Gerüchte über CSS3 gehört, aber welche CSS3-Techniken können wir heute tatsächlich verwenden? In diesem Artikel zeige ich Ihnen einige besondere CSS3-Techniken, die in einigen gängigen Browsern (z. B. Firefox, Chrome, Safari, Opera-Browser) gut funktionieren. Diese Effekte beeinträchtigen die Darstellung in nicht unterstützten Browsern (z. B. Internet Explorer). Viele der vorgeschlagenen CSS3-Stile können mithilfe browserspezifischer Deklarationen sofort verwendet werden.

Wenn Sie die browserspezifischen Deklarationen nicht kennen, müssen Sie sich nur daran erinnern, dass es sich bei allen um spezifische Präfixe vor CSS-Stileigenschaften handelt, die sich auf den Kernel-Anbieter beziehen. Da CSS3 noch nicht vollständig unterstützt wird, müssen wir diese spezifischen Deklarationen verwenden. Die konkrete Form lautet wie folgt:

* Mozilla/Firefox/Gecko-Browser-Präfix: -moz-
* Webkit-Browser-Präfix (Safari/Chrome): -webkit- (Hinweis: Einige Wbkit-Präfixe können nur unter Safari verwendet werden und werden von Chrome nicht unterstützt.)

Wie Sie vielleicht gesehen haben, besteht ein Nachteil der Verwendung dieser Deklarationen darin, dass wir alle oben genannten Präfixe verwenden müssen, wenn wir CSS3-Effekte in Firefox, Safari und Chrome erzielen möchten. Es überrascht nicht, dass Internet Explorer CSS3 nicht unterstützt und daher nicht wie andere große Browser über eine spezifische Präfixdeklaration verfügt.

Okay, genug davon, probieren wir es gleich aus. Hinweis: Stildeklarationen ohne diese Präfixe sind die eigentlichen Spezifikationsvorschläge des W3-Standards.

Demo-Beschreibung (Beispiel) zu dieser Seite

Alle diese Beispiele finden Sie auf dieser Seite. Wenn Sie die Auswirkungen der Beispiele nicht normal (oder nur teilweise) anzeigen können, bedeutet dies, dass der von Ihnen verwendete Browser diese CSS3-Effekte nicht unterstützt.

Schatteneffekt

Schatteneffekte akzeptieren mehrere Parameterwerte. Der erste ist die Farbe des Schattens, der auch vier weitere Längenwerte (Länge) akzeptiert. Die ersten beiden Längenwerte sind der X-Versatz (horizontal) und der Y-Versatz (vertikal). Der nächste Parameter ist ein Wert, der die Unschärfe widerspiegelt. Der vierte und letzte Wert wird verwendet, um die Ausbreitung der Unschärfe zu definieren.

Kastenschatten: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;

Demonstration des Schatteneffekts

Farbverlaufseffekt

CSS3-Verlaufsstile können zunächst verwirrend sein, insbesondere die Unterschiede zwischen -moz- und -webkit-Verläufen. In -moz müssen Sie zunächst die Richtung des Farbverlaufs und dann die Start- und Endfarben definieren. Der Farbverlauf von -webkit ist etwas komplizierter. Zuerst müssen Sie die Art des Farbverlaufs definieren, dann definieren die nächsten beiden Werte die Richtung und die letzten beiden Werte definieren die Startfarbe und die Endfarbe des Gefälles.

-moz-linear-gradient(-90deg,#1aa6de,#022147);
-webkit-gradient(linear, links oben, links unten, von(#1aa6de), bis(#022147));

Demonstration des Verlaufseffekts

RGBA-Farbmodus

Die eigentliche Farbdefinition von RGBA ist nicht so kompliziert, wie es scheint. Sie akzeptiert vier Parameterwerte: Rotwert, Grünwert, Blauwert und Transparenz. Wir verwenden keinen hexadezimalen Hexadezimalwert (#). Wir legen die Farbe im RGB-Modus fest, wobei Transparenz den transparenten Effekt der Farbe festlegen kann. Die Transparenz reicht von 0 bis 1, wobei 0 völlig undurchsichtig und 1 völlig transparent ist. Die Transparenz der folgenden Demonstrationsbeispiele beträgt alle 0,5, die Transparenz des Elements beträgt 50 %, RGBA erfordert keine spezifische Browser-Präfixdeklaration.

Hintergrundfarbe: rgba(0, 54, 105, .5);

HSL-Farbmodus (Farbton H, Sättigung S, Helligkeit L)

Neben RGBA unterstützt CSS3 auch den HSL-Farbmodus. Das gibt uns viel Spielraum bei der Auswahl von Farben und Tönen. Im HSL-Farbmodell steht H für Farbton, S für Chroma und L für Helligkeit. Der Farbton ist der Winkelwert im Farbkreis, während Sättigung und Helligkeit die Prozentwerte der Farbe sind.

Hintergrundfarbe: hsl(209,41,2 %, 20,6 %);

HSL-Demobeispiel

Randfarbe

Um diesen CSS-Stil zu verwenden, müssen Sie „Rand oben“, „Rand rechts“, „Rand unten“ und „Rand links“ definieren, um die folgenden Effekte zu erzielen. Sie bemerken, dass ein Rand von 8 Pixeln definiert wird und der Rand dann in 8 verschiedenen Farben definiert wird. Dies liegt daran, dass die Anzahl der Farben des Rahmens dem Pixelbreitenwert des Rahmens entsprechen muss.

Rand: 8px durchgezogen #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

Randfarbdemo

Farbeinstellungen für die Textauswahl

Ich muss sagen, dass die Farbdefinition für die Textauswahl eine ziemlich aufregende neue Funktion ist. Als ich das zum ersten Mal bei CSS Tips sah, fand ich es sehr durchdacht. Mit dem Pseudoelementpaar ::selection können Sie die Farbe und den Hintergrund ändern, wenn der Benutzer ein Textelement auswählt. Wenn Sie nach einer Meinung fragen: Ich finde es sehr schön. Obwohl ::selection aus dem aktuellen CSS3-Entwurf entfernt wurde, hoffen wir, es später hinzufügen zu können.

::selection {background: #3C0; /* Safari */color: #90C;}::-moz-selection {background: #3C0; /* Firefox */color: #90C;}

Farbdemo für die Textauswahl

Verformung

Mit Transformationsstilen können Sie ein Element beim Mouseover größer erscheinen lassen. Stellen Sie den Skalierungswert auf einen Wert größer als 1 ein und das Element wird verkleinert. Ist der Wert dagegen kleiner als 1, wird die Größe des Elements reduziert. Neben Scale stehen noch viele weitere unterschiedliche Verformungen zur Verfügung. Sie können die Firefox-Entwicklerseite besuchen, um zu sehen, was sie erreichen können

-moz-transform: Skala(1.15);-webkit-transform: Skala(1.15);

Demonstration des Verformungseffekts

mehrspaltiges Layout

Mit diesem neuen mehrspaltigen Layoutstil können Sie Ihrem Text einen „Zeitungs“-Layouteffekt verleihen. Im Vergleich zur Implementierungsmethode in CSS2 ist es für uns in CSS3 viel einfacher, diese Art von Effekt zu erzielen. Nachfolgend gebe ich die Anzahl der Spalten an, die der Vogel benötigt, sowie die Art der Trennregeln und wie groß die Lücken zwischen den Spalten sein sollen. Es ist einfach zu bedienen, oder?

-moz-column-count:3;-moz-column-rule: solid 1px black;-moz-column-gap: 20px;

Zusammenfassen

Ich hoffe, dass ich von diesen Funktionen von CSS3 genauso begeistert bin wie ich. Es gibt Webdesignern und Entwicklern mehr Möglichkeiten und vereinfacht viele Aspekte. Jetzt müssen wir nur noch warten, bis alle Browser es unterstützen. Natürlich ist das Wissen, das ich hier zeige, nur die Spitze des Eisbergs neuer CSS3-Funktionen. Wenn Sie weitere Informationen, Tipps und Hilfe wünschen, empfehle ich Ihnen den Besuch der folgenden Websites.