Wie zu CSS3 Bildeffekte verwenden

CSS3 ermöglicht es Ihnen, einige interessante Spezialeffekte auf Ihren HTML5 Seiten anwenden. Diese Effekte lassen sich auf jedes Element angewendet werden, aber sie werden im allgemeinen Bilder und Überschriften verwendet. Beachten Sie, dass diese noch als experimentell angesehen, so dass die Browser-Implementierungen variieren.

Transparenz

CSS3 hat vollständige Unterstützung für einstellbare Opazität. Dies wird in einer Reihe von Möglichkeiten reflektiert. Erstens hat jedes Element ein Attribut, das aus eingestellt werden können 0 (Vollständig transparent) bis1 (Völlig undurchsichtig).

Hier ist ein div mit teilweise Transparenz auf ein Bild überlagert.

bild0.jpg

Der vollständige Code für diese Seite ist einfach zu folgen:

opacity.html
Opazität Demo

Alle der Code ist häufig HTML und CSS2 Sachen, mit Ausnahme der letzten Attribut. Das Opazität Attribut nimmt einen einzigen Punkt Float-Wert zwischen 0 und 1. Null (0) Ist vollständig transparent und ein (1) Ist völlig undurchsichtig.

Beachten Sie, dass das Beispiel die anderen Hauptform der Transparenz von CSS unterstützt verwendet - die Überschrift, um die RGBA-Modell verwendet die Alpha-Transparenz auf eine Farbe hinzufügen. In der Regel verwenden alpha, wenn Sie teilweise Transparenz auf eine individuelle Farbe hinzufügen möchten. Opazität kann für ein ganzes Element verwendet werden, auch etwas komplex wie ein Bild oder ein Video.

Alle der aktuellen Browser-Versionen unterstützen Opazität ohne herstellerspezifische Präfixe erfordern. Ältere Browser einfach das Element angezeigt werden als völlig undurchsichtig, so dass alles unter einem teilweise transparenten Element kann ältere Browser unsichtbar sein.

Reflexionen

Reflexion ist ein anderes jener visuellen Elemente, die ziemlich viel zu einer Seite hinzufügt, wenn gut gemacht. Obwohl es keine formelle Teil der CSS3-Spezifikation ist, ist es eine vielversprechende Technologie. Derzeit werden nur die WebKit-basierten Browsern (das heißt, Safari, iPhone / iPad und Chrome) diese Funktionalität unterstützen. Allerdings zeigt es solche Versprechen, dass irgendeine Form von dieser Fähigkeit wird wahrscheinlich irgendwann in den anderen Browsern angezeigt werden.

image1.jpg

Wenden Sie das folgende CSS auf ein beliebiges Element zu machen mit der reflektieren Klasse haben eine gut aussehende Reflexion in den unterstützten Browsern:

-Webkit-box-widerspiegeln: unter 2px;

Grundlegende Überlegungen sind ganz einfach:

  1. Tragen Sie die -Webkit-box-widerspiegeln Attribut.

    Leider gibt es keine generische Version, noch hat das Attribut von anderen Browsern dupliziert worden.

  2. Bestimmen Sie, wo die Reflexion platziert werden soll.

    Normalerweise geht der Reflexion unter dem Primärelement, aber es kann auch sein, über, links, oder Recht.

  3. Geben Sie eine Spaltbreite.

    Die Reflexion kann direkt neben dem Original-Element platziert werden, aber es sieht oft besser mit einem kleinen Spalt. Der Spalt wird normalerweise gemessen in Pixel.

Dies wird eine sehr schöne Reflexion produzieren.

Allerdings Reflexionen in der Regel nicht die pixelgenaue Vervielfältigungen. Sie neigen dazu, über die Entfernung zu verblassen. WebKit ermöglicht es Ihnen, einen Gradienten zu einer Reflexion hinzuzufügen. In diesem Fall geht der Gradient von vollständig opak (weiß) bis vollständig transparent (durchsichtig).

.reflektieren {
 -Webkit-box-widerspiegeln: unter 2px
 -Webkit-linearen Gradienten (unten, weiß, transparent 40%, transparent) -}

Der Standardteil der Reflexion ist wie im vorherigen Beispiel, aber es enthält ein Gefälle, das die Reflexion der Transparenz verblaßt.

  1. Erstellen eines linearen Gradienten.

    Der Gradient für eine Reflexion ist nahezu linear. Beachten Sie, dass der Gradient nicht eine neue CSS-Regel, sondern nur ein Parameter in der bestehenden Reflexions Regel.

  2. Machen Sie den Gradienten Bewegung von unten nach oben.

    Verwenden Sie die Steigung beginnt an der Spitze, um anzuzeigen, und die Steigung beginnt unten anzuzeigen. Diese Werte stellen die oberen und unteren Rand des Original Bild, nicht die Reflexion (das wird natürlich umgekehrt werden). Normalerweise beginnt Ihr Gradient am unteren Rand des Originalbildes (die an der Spitze des reflektierten Bildes ist).

  3. Beginnen Sie mit vollständigen Opazität.

    Der Boden des Originalbildes ist die Spitze des reflektierten Bildes und die Oberseite des reflektierten Bildes sollte vollständig opak sein. Dieser Gradient ist nicht wirklich über die Farbe, sondern darüber, welche Teile der Reflexion sichtbar. Einstellen der Anfangsfarbe zu weiß macht die Oberseite der Reflexions vollständig opak.

  4. Beenden Sie bei vollständiger Opazität.

    Der obere Teil des ursprünglichen Bildes (der Boden der Reflexion) sollte vollständig transparent sein, so die Steigung mit der Sonderfarbe Stichwort beenden transparent (Das entspricht rgba 255, 255, 255, 0).

  5. Fügen Sie eine Farbe-stop die Fade einzustellen.

    Fügen Sie einen Farbstopp, um anzuzeigen, wo in der Reflexion Sie das Bild wollen Verblassen zu beginnen.

Beachten Sie, dass das reflektierte Bild nicht als separates Element für die Seitenlayoutzwecke berechnet wird, so Text und andere Inhalte direkt auf Ihre Reflexion fließen.

Reflexionen werden üblicherweise auf Bilder angewendet, aber sie können auf jedes Element angewendet werden, auch Video!

Es ist möglich, eine Reflexionswirkung in anderen Browsern mit geschickten Einsatz der Transformation und Gradienten Attribute zu erhalten. Denn jetzt ist es allerdings wahrscheinlich sicherste diesen Effekt für Situationen, zu reservieren, in dem Sie die Benutzer wissen, einen unterstützten Browser verwenden oder wenn die reflektierte Effekt nicht unbedingt erforderlich ist.

Ähnliche

Menü