5 neue CSS3-Technologien, die Sie kennen sollten

CSS ist eine bekannte und weit verbreitete Website-Styling-Sprache. In der Version 3 (CSS3) wurden einige neue Funktionen hinzugefügt, die Zeit sparen können. Obwohl diese Effekte nur von den neuesten Browserversionen unterstützt werden, ist es dennoch notwendig und interessant, sie zu kennen. Bao Fengbinbin zeigt Ihnen in diesem Artikel 5 interessante neue Technologien in CSS: abgerundete Ecken, einzelne abgerundete Ecken, Deckkraft, Schatten und Größenänderungselemente.

1: Grundnote

Bevor wir mit diesem Tutorial beginnen, erstellen wir das grundlegende Markup, das im gesamten Tutorial verwendet wird.

Unser xHTML erfordert die folgenden div-Elemente:

#round verwendet CSS3-Code, um abgerundete Ecken zu erzielen.

#indie, ein paar einzelne Filets auftragen.

#opacity demonstriert die neue CSS3-Methode zur Implementierung von Opazität.

#shadow zeigt, wie man mit CSS3 einen Schatteneffekt erzielt, ohne Photoshop zu verwenden.

#resize zeigt, wie man mithilfe von CSS einen Größenänderungseffekt erzielt.

Zusammenfassend sollte unser xHTML so aussehen:

Nachfolgend der zitierte Inhalt: ​​​​

Lassen Sie uns die grundlegende CSS-Datei erstellen:

Wie Sie oben sehen können, haben wir jedem Div-Element eine Breite und Höhe von 300 Pixeln gegeben und sie nach links schweben lassen, sodass wir die gesamten Seiten-Divs später formatieren können.

2: abgerundete Ecken

Derzeit gibt es viele Möglichkeiten, Filets zu erstellen, aber sie sind alle umständlich. Die gebräuchlichste Methode: Zuerst müssen Sie ein Bild mit abgerundeten Ecken erstellen. Anschließend müssen Sie viele HTML-Elemente erstellen und ein Hintergrundbild verwenden, um die abgerundeten Ecken anzuzeigen. Sie und ich kennen den spezifischen Prozess sehr gut.

Dieses Problem lässt sich in CSS3 leicht mit einer Eigenschaft namens „border-radius“ lösen. Wir erstellen zunächst ein schwarzes div-Element und setzen einen schwarzen Rand dafür. Der Rand ist die Voraussetzung, um die Wirkung des Attributs „border-radius“ zu erreichen.

So was:

Nachdem Sie das div-Element erstellt haben, sieht es genau so aus, wie Sie es erwartet haben: 300 Pixel groß, kantig und schwarz. Fügen wir nun den Code hinzu, um abgerundete Ecken zu implementieren. Es ist so einfach und erfordert nur zwei Codezeilen.

Hier haben wir zwei ähnliche Codezeilen hinzugefügt, -moz- für den Firefox-Browser und -webkit- für den Safari/Chrome-Browser.

Hinweis: Bisher unterstützt der IE-Browser das Attribut „border-radius“ nicht. Wenn Sie also möchten, dass der IE einen abgerundeten Eckeneffekt hat, müssen Sie abgerundete Ecken separat hinzufügen.

Die wörtliche Übersetzung der Eigenschaft „Rahmenradius“ lautet „Rahmenradius“. Je größer der Wert, desto größer die abgerundeten Ecken.

3: Einzelne abgerundete Ecken

Wenn Sie den bisherigen Gewohnheiten folgen, wird es viel Zeit verschwenden. Jetzt kann CSS3 das Problem schnell lösen!

Jetzt möchten wir nur noch, dass die obere rechte und untere rechte Ecke des Div abgerundet sind, sodass wir nur geringfügige Änderungen vornehmen müssen:

Stellen Sie sich vor, für welche Elemente auf der Webseite dieser Ansatz verwendet werden würde. Ja!

4: Deckkraft mit CSS3 ändern

Jetzt können Sie konventionell ein paar Codezeilen schreiben, um den Opazitätseffekt zu implementieren (Hack). CSS3 vereinfacht diesen Prozess jedoch.

Diese Codezeile ist leicht zu merken, nur „opacity: value;“:

5: Schatteneffekt

Es gibt viele Möglichkeiten, Schatten zu erzeugen. Die häufigste besteht darin, mit Photoshop ein Schattenbild zu erstellen und es dann auf die Hintergrundeigenschaften anzuwenden. Aber CSS3 macht Ihre Arbeit effizienter. Leider unterstützen derzeit nur Safari und Chrome diese neue Funktion.

Es erfordert nur eine Codezeile, hat aber 4 verschiedene Werte:

Lassen Sie mich erklären, was diese vier Werte darstellen. Die ersten 3 Pixel sind der horizontale (horizontale) Abstand zwischen dem angegebenen Schatten und dem Div-Element, und die zweiten 5 Pixel beziehen sich auf den vertikalen (vertikalen) Abstand zwischen dem Schatten und dem Div. Die dritten 10 Pixel beziehen sich auf die Unschärfe des Schattens (ähnlich dem Auslaufen in Photoshop). Je größer der Wert, desto empfindlicher ist er. Jeder weiß, dass der Endwert die Farbe des Schattens ist.

Unser letzter Schatteneffektcode;

Wie Sie sehen können, hat unser Div einen weißen Hintergrund, einen schwarzen Rand und einen hellgrauen Schatten.

6:Größe ändern

In der neuesten CSS-Version ist es möglich, die Größe von Elementen zu ändern (wird jedoch derzeit nur von Safari unterstützt).

Nach Verwendung dieses Codes erscheint in der unteren rechten Ecke unseres Elements ein kleines Dreieck, um den Benutzer daran zu erinnern, dass die Größe dieses Elements geändert werden kann. Der Code ist immer noch sehr einfach, man kann sagen, dass er nur eine Codezeile erfordert. Natürlich können Sie auch einige Eigenschaften verwenden, die Sie zuvor verwendet haben, wie z. B. „max-width“, „max-height“, „. „Mindestbreite“ und „Mindesthöhe“.

Hier geht es hauptsächlich um die Größenänderungs- und Überlaufattribute: Beide bedeuten, dass alle Seiten in der Größe geändert werden können. Wie der Name schon sagt, sind sie horizontal und vertikal. Überlauf soll mit Größenänderung arbeiten, daher wird hier Auto verwendet.

Zusammenfassen

Hat Ihnen dieser Artikel etwas gebracht? Auch wenn mittlerweile nur wenige Browser CSS3 unterstützen, lässt sich nicht leugnen, dass CSS3 bei unserer Arbeit tatsächlich mehr Zeit sparen wird. Wenn Sie über Kenntnisse und Verständnis für die progressive Verbesserung verfügen, werden Sie diese leistungsstarke neue Version von CSS3 meiner Meinung nach ohne weiteres akzeptieren. Verbringen Sie nicht Ihre ganze Zeit mit IE6, sonst sind Sie nur ein veralteter Front-End-Entwicklungsingenieur.