de.hideout-lastation.com
Paradies Für Designer Und Entwickler


So aktivieren Sie CSS-Transformation in IE6-8 [Quick-Tipp]

Moderne Browser unterstützen die meisten CSS3-Eigenschaften. Sie können CSS-Animationen, Transformationen und Verläufe unter anderem problemlos anwenden. Es gibt jedoch immer noch viele Benutzer älterer Versionen von Internet Explorer-Versionen, die die neueren CSS3-Eigenschaften nicht genau unterstützen . In diesem Artikel werde ich kurze Tipps zur Aktivierung der CSS-Transformation auf IE6-8 geben .

Mit der CSS-Transformationseigenschaft können Sie ein Element im zweidimensionalen oder dreidimensionalen Raum transformieren . Sie können ein Element mit CSS Transform transformieren, skalieren, drehen und neigen. Für moderne Browser wie Firefox, Opera und Webkit unterstützen Browser CSS Transform mit ihren herstellerspezifischen Präfixen (mit -moz-transform, -o-transform und -webkit-transform ), aber Sie werden es nicht im Internet Explorer finden. Ich werde also die JavaScript-Bibliothek cssSandpaper verwenden, die Cross-Browser-CSS-Transformationen auch im alten IE ermöglicht.

Anfangen

Laden Sie zuerst cssSandpaper aus dem Github Repository herunter. Fügen Sie dann die folgenden erforderlichen JavaScript-Bibliotheken hinzu, die mit cssSandpaper geliefert werden.

Die -sand-Transform- Eigenschaft

cssSandpaper führt eine neue Präfixeigenschaft zum Anwenden der Umwandlung ein . Diese neue Eigenschaft kann in Verbindung mit anderen Browser-Herstellerpräfixen wie -moz-transform, -webkit-transform oder anderen Browser- -moz-transform wie -moz-transform werden:

 #container {-moz-transform:  ; -Webkit-Transfrom:  ; -sand-transform:  ; verwandeln:  ; } 

Das cssSandpaper erbt die Standard-CSS-Funktionen, um die Transformation wie Rotation und Skalierung durchzuführen. Im Folgenden finden Sie eine Liste der Funktionen, die Sie innerhalb der Eigenschaft -sand-transform .

  • rotieren (Winkel) wird verwendet, um ein Element in Grad oder Bogenmaß zu drehen. zB: -sand-transform: rotate(45deg)
  • scale (sx [, sy]) wird verwendet, um ein Element zu skalieren. zB: -sand-transform: scale(1[, 2]) Das heißt, wir skalieren das Element auf der X-Achse entsprechend der Originalgröße und auf der Y-Achse als das Doppelte der Originalgröße.
  • skewX (ax) und skewY (ay) werden verwendet, um ein Element um die x- und y-Achse um die angegebenen Winkel in Grad oder Bogenmaß zu neigen. zB: skewX (30deg)
  • Matrix (a, c, b, d, tx, ty) wird verwendet, um eine 2D-Transformationsmatrix zu bilden, die aus den spezifizierten sechs Werten besteht.

Verwenden Sie Beispiel

Vorausgesetzt, wir haben eine Box mit einem gebaut

. Und jetzt möchten Sie, dass die Box 200px horizontal von ihrer ursprünglichen Position 200px und gleichzeitig um 45 Grad gedreht wird. Sie können cssSandpaper folgendermaßen verwenden, um diesen Effekt zu erzielen:

 #box {Breite: 150px; Höhe: 100px; -sand-transform: translate (200px, 0) rotiere (45deg); } 

Sie können die Demo unten sehen. Beachten Sie, dass Sie es auch in Internet Explorer 6-8 betrachten sollten.

  • Demo anzeigen
  • Quelle herunterladen

Fazit

Dies ist möglicherweise nicht die eleganteste Lösung, da wir eine Reihe von JavaScript-Bibliotheken stapeln müssen, um diesen einfachen Effekt zu erzielen. Aber falls Ihr Chef oder Kunde darauf besteht, die Rotation in Internet Explorer 8 zu aktivieren (aus irgendeinem unsinnigen Grund), können Sie cssSandpaper verwenden, um dies zu ermöglichen.

Fügen Sie webbasierte Inhaltsbearbeitung mit Substanz hinzu

Fügen Sie webbasierte Inhaltsbearbeitung mit Substanz hinzu

Viele Webanwendungen unterstützen Benutzereingaben und es ist großartig, wenn Benutzer ihren Text mit Formatierungen bearbeiten können. Fett gedruckter Text, Überschriften, Links, Unterstreichungen, all diese Funktionen erfordern normalerweise die Einrichtung von HTML-Code.Mit dem Substance-Framework können Sie eine Vielzahl von Bearbeitungsfunktionen mit nur einem Skript unterstützen.Subst

(Tech- und Design-Tipps)

Warum sollten Sie vermeiden, bei 25 überarbeitet zu werden [Op-Ed]

Warum sollten Sie vermeiden, bei 25 überarbeitet zu werden [Op-Ed]

Gemessen an all den Beiträgen, die du in sozialen Medien gelesen hast, bin ich ein Tausendjähriger oder mit anderen Worten bin ich in der 18 bis 34 Jahre alten Reihe, als dieser Beitrag geschrieben wurde. Ich schrieb einen Artikel darüber, 25 zu sein und überarbeitet zu haben. Ich schwankte Ratschläge, von denen ich denke, dass sie Millennials von Nutzen sein würden, die auf dem Weg dorthin sein könnten, wo ich jetzt bin.Die Id

(Tech- und Design-Tipps)