So erstellen Sie schiefe Kanten mit CSS

In diesem Beitrag werden wir uns ansehen, wie wir einen schrägen Kanteneffekt (horizontal) auf einer Webseite erzeugen können. Im Grunde sieht es ungefähr so ​​aus:

Eine leicht angewinkelte Kante sollte unser Web-Layout weniger starr und langweilig erscheinen lassen. Um diesen Trick auszuführen, verwenden wir die Pseudo-Elemente ::before und ::after und CSS3 Transform .

Verwenden von Pseudoelementen

Diese Technik verwendet die Pseudo-Elemente ::before und ::after um die Elementkanten zu winkeln. In diesem Beispiel passen wir die untere Kante an.

 .block {Höhe: 400px; Breite: 100%; Position: relativ; Hintergrund: linear-gradient (nach rechts, rgba (241, 231, 103, 1) 0%, rgba (254, 182, 69, 1) 100%); } .block :: nach {content: ''; Breite: 100%; Höhe: 100%; Position: absolut; Hintergrund: erben; Z-Index: -1; unten: 0; Transformationsursprung: links unten; transform: skewY (3deg); } 

Lassen Sie uns rekapitulieren.

Der transform-origin gibt die Koordinaten des Elements an, das transformiert werden soll. Im obigen Beispiel haben wir left bottom dass die Startkoordinaten auf die untere linke Seite des Blocks gesetzt werden.

Die transform: skewY(3deg); macht den ::after Block Skew oder Winkel um 3 Grad. Da wir die Startkoordinate als unten links angegeben haben, erhöht die untere rechte Ecke des Blocks 3 Grad. Wenn wir den transform-origin nach right bottom und die untere linke Ecke stattdessen um 3 Grad erhöhen.

Sie können einen einfarbigen Hintergrund oder Farbverlauf hinzufügen, um das Ergebnis zu sehen.

Mach es einfacher mit Sass Mixin

Um das zu vereinfachen, habe ich ein Sass-Mixin erstellt, um die angewinkelten Kanten hinzuzufügen, ohne die Schwierigkeiten mit der Komplexität der Style-Regeln zu bewältigen. Mit dem folgenden Mix können Sie schnell die Seite - oben links, oben rechts, unten links oder unten rechts - angeben, um zu verzerren.

 @mixin angle-edge ($ pos-top: null, $ angle-top: null, $ pos-btm: null, $ angle-btm: null) {width: 100%; Position: relativ; Hintergrund: linear-gradient (nach rechts, rgba (241, 231, 103, 1) 0%, rgba (254, 182, 69, 1) 100%); & :: vor, & :: nach {content: ''; Breite: 100%; Höhe: 100%; Position: absolut; Hintergrund: erben; Z-Index: -1; Übergang: alle .5s erleichtern; } @if $ pos-top {& :: vor {@if $ pos-top == 'topleft' {top: 0; Transformationsursprung: rechts oben; transform: skewY ($ angle-top); } @if $ pos-top == 'topright' {oben: 0; Transformationsursprung: links oben; transform: skewY (- $ winkel-top); }}} @if $ pos-btm {& :: nach {@if $ pos-btm == 'bottomleft' {bottom: 0; Transform-Herkunft: rechts unten; transform: skewY (- $ winkel-btm); } @if $ pos-btm == 'unten rechts' {unten: 0; Transformationsursprung: links unten; transform: skewY ($ angle-btm); }}}} 

Es gibt vier Variablen im Mixin. Die ersten beiden Variablen $pos-top und $angle-top geben die oberste Startkoordinate und den Grad an . Die letzten beiden Variablen geben die Koordinate und den Grad für die Unterseite an .

Wenn Sie alle vier Variablen ausfüllen, können Sie beide Seiten - oben und unten - des Elements anwinkeln.

Verwenden Sie die Sass @include Syntax, um das Mixin in ein Element einzufügen. Sie können Beispiele unten sehen:

So fügen Sie eine schräge Kante oben links hinzu :

 .block {@einschließen Winkelkante (topleft, 3deg); } 

So fügen Sie eine schräge Kante auf der unteren rechten Seite hinzu:

 .block {@include angle-edge (unten rechts, 3deg); } 

So fügen Sie eine schräge Kante oben links und unten rechts hinzu :

 .block {@include angle-edge (topleft, 3deg, bottomright, 3deg); } 

Unten ist das Demo mit den Mixins aufgetragen. Ändern Sie das Auswahlfeld, um zu einem anderen Stil zu wechseln.

Das ist es!

Die Grundlagen der REST- und RESTful-API-Entwicklung

Webentwickler sprechen häufig über REST-Prinzipien und REST-konforme Datenarchitekturen, da dies ein entscheidender Aspekt der modernen Entwicklung ist, aber manchmal kann es auch unglaublich verwirrend sein. REST ist keine Technologie für sich, sondern eine Methode zum Erstellen von APIs mit bestimmten Organisationsprinzipien . D

(Tech- und Design-Tipps)

55 frische und hochwertige WordPress Themes

WordPress ist das verlässlichste und begehrteste Content-Management-System und dafür gibt es einen guten Grund. Es bietet eine Reihe von Funktionen, mit denen jeder den Inhalt seiner Website einfach über diese Plattform verwalten kann. Dies gilt insbesondere für die WordPress-Themen des Jahres 2017, da es so viele Funktionen und Funktionen gibt, die Ihre Website in kürzester Zeit hervorheben können .Aber

(Tech- und Design-Tipps)