Wie gestaltet man mit CSS-Formen: eine Einführung

Die Basis jeder Website besteht darin, die Seite in kleinere Elemente unterteilen, die Inhalte haben. Das große Problem mit diesem Thema ist, dass der Inhalt immer ein Rechteck ist. Bildschirme sind rechteckig in Form, und jede Unterteilung davon wird ein Rechteck sein. In diesem Tutorial werden wir untersuchen, wie man über rechteckige Formen hinausgeht, indem wir mit dem CSS-Clip-Path-Eigenschaft und der Rotation mithilfe des CSS-Clip-Pfad-Eigenschafts übergehen, um das Design interessanter zu machen. Für andere Wege, um Ihre Designs interessanter zu machen, überprüfen Sie unsere Beispiele von CSS-Animation. . Wenn all das so klingt wie zu viel Arbeit, probieren Sie eine Spitze Webseitenersteller stattdessen. Was jedoch auch immer die Bedürfnisse Ihrer Website, Sie müssen das Recht bekommen Web-Hosting Für dich

Die einfachste Form ist ein Kreis oder ein Oval. Wenn Sie ein Rechteck haben und Sie den gesamten Grenzradius auf mehr als 50 Prozent setzen, haben Sie einen Oval, und wenn Sie mit einem Quadrat beginnen, da alle Seiten die gleiche Länge sind, erhalten Sie einen Kreis. Dies ist etwas, was Sie wahrscheinlich schon gemacht haben, aber es ist eine Technik, die im Design von Seiten oft untergearbeitet wird.

• Die 20 besten Wireframe-Tools

Eine komplexere Lösung besteht darin, ein Dreieck zu erstellen, indem der CSS-Clip-Pfad verwendet wird, um den sichtbaren Teil einer DIV zu reduzieren. Ein Dreieck ist eine ganz einfache Form, um zu erstellen, da er nur drei Punkte hat, aber wenn Sie komplexere Formen erstellen möchten, ist ein visueller Clip-Path-Path-Editor erforderlich.

Dieses Tutorial zeigt Ihnen, wie Sie alle diese Elemente zusammenfügen, einschließlich Gradienten und rotierenden Rechtecken, um ein einzigartigeres Design zu erstellen. Fügen Sie CSS-Gradienten hinzu, und ein komplexes geometrisches Design kann über CSS erstellt werden.

• Laden Sie die Dateien für das Tutorial von Dateisilo herunter

01. Erste Schritte

Öffne das Start Ordner in Ihrem IDE-Code-Editor und beginnen Sie mit dem Bearbeiten der index.html. Seite. Um das Tutorial zu starten, ist ein einfacher Link-Up zu Google Fonts-Schriftarten erforderlich, so dass, wenn ein Text später eingeschlossen ist, können die entsprechenden Schriftarten auf der Seite hinzugefügt werden.

 & lt; link rel = "stylesheet" href = "css / shapes.css" & gt;
& lt; link href = "https://fonts.googleapis.com/
CSS? familie = arvo: 700 | lato: 700 "rel =" stylesheet "& gt; 

02. Anker der Formen zusammen

In dem Körper Tag auf der Seite Fügen Sie den folgenden Inhalt hinzu. Das Form enthalten DIV-Tag wird verwendet, um alle verschiedenen Formen zu halten, die erzeugt werden, und dies wird erstellt, um den Browser-Ansichtsfenster auszufüllen. Die erste zu erstellende Form ist ein einfacher Kreis, der die anderen Bilder zusammen verankert.

 & lt; div id = "form_contain" & gt;
& lt; div id = "circle" & gt; & lt; / div & gt;
& lt; / div & gt; 

03. Machen Sie die Seite

Bewegen Sie sich jetzt in die CSS. Ordner und öffnen Sie das Shapes.css. Datei. Der Körper und das HTML werden einfach eingestellt, um den Browser mit der rechten Schriftfamilie zu füllen, die für den Großteil des Textes eingerichtet ist, der zum Ende des Tutorials hinzugefügt wird, da die letzten Berührungen angeht.

 Körper,
html {
Marge: 0;
Polsterung: 0;
Breite: 100%;
Höhe: 100VH;
Überlauf-X: verborgen;
Schriftfamilie: 'Lato', Sans-Serif;
Text-Transformation: Großbuchstaben;
} 

04. Enthalten Sie die Formen

Die nächste CSS-Regel ist für den DIV mit der ID von form_contain. . Dies ist eingestellt, um den Browser mit einem beliebigen Überlauf zu füllen. Das translate3d. ist sicherzustellen, dass der Inhalt Hardware-beschleunigt ist. Ein großer Rand wird vor zwei Hintergrundbildern hinzugefügt. Eines ist ein regelmäßiges Bild, während der oben ein aquareller, halbtransparenter Gradient ist.

 #shape_contain {
Box-Dimensionierung: Border-Box;
Breite: 100%;
Höhe: 100VH;
Überlauf versteckt;
Transformation: translate3d (0, 0, 0);
Border: 20px fester RGB (255, 254, 244);
Hintergrund: Lineargradient (0DEG, RGBA (7,
47, 46, 0,8) 0%, RGBA (255, 252, 226, 0,5)
100%), URL (../ Bilder / Berg.jpg)
No-Repeat Center Center;
Hintergrundgröße: Abdeckung;
} 

05. Beginnen Sie mit einem Kreis

Die erste geometrische Form, die erstellt wird, ist eine der einfachsten Formen. Ein Kreis kann aus jedem quadratisch gefertigt werden div. Durch Hinzufügen eines Randradius von 50% . Der Kreis ist halbtransparent, mit einem weichen Schatten, der an den Rand hinzugefügt wird.

 #circle {
Breite: 80 vh;
Höhe: 80 vh;
Grenzradius: 50%;
Hintergrund: RGBA (136, 239, 231, 0,3);
Position: absolut;
oben: 7vh;
links: 50%;
Transformation: translate3d (-50%, 0, 0);
Kastenschatten: 0px 5px 40px RGBA (0, 0, 0, 0,3);
} 

06. Versuchen Sie ein Dreieck

Die nächste Form wird etwas komplexer sein, da es sich um ein Dreieck handelt. Es ist relativ unkompliziert, indem er den CSS-Clip-Pfad erstellt, der es ermöglicht, eine Polygonform zu erstellen. Fügen Sie diese DIV in das hinzu form_contain. Div.

 & lt; div id = "tri1" & gt; & lt; / div & gt; 

07. Wenden Sie das Dreieck an

Hier das Clip-Pfad ist für die CSS erstellt, um das Dreieck herzustellen. Die Form ist einfach drei Punkte. Das Hintergrundbild wird zugegeben, und hier wird ein Filter hinzugefügt, damit der Farbton leicht verschoben werden kann, wodurch das Bild einen leichten rosa Tönung aufnehmen kann, der mit dem Kontrast betont wird.

 # tri1 {
Clip-Pfad: Polygon (0 0, 100% 0, 50%
100%);
Breite: 100 vh;
Höhe: 88VH;
Hintergrund: URL (../ Bilder / mädchen3.jpg)
No-Repeat Center Center;
Hintergrundgröße: Abdeckung;
Position: absolut;
oben: 10 vh;
links: 50%;
Transformation: translate3d (-50%, 0, 0);
Filter: Hue-Trotate (310DEG) Kontrast (140%);
Deckkraft: 0.8;
} 

08. Gehe komplexer

Die nächste zu erstellende Form ist ein Dreieck mit einem Loch in der Mitte. Das klingt relativ unkompliziert, aber das Clip-Polygon muss eine kontinuierliche Linie sein, sodass es komplexer ist, um zu erstellen. Wenn Sie eine ähnliche Form erstellen müssen, verwenden Sie Bennett Feely's Clip-Path Maker die Form erstellen.

 & lt; div id = "tri2" & gt; & lt; / div & gt; 

09. Stapeln Sie die Formen

Die Form ist hier komplexer, da es in der zuvor genannten Verbindung visuell erstellt wurde. Das Wolkenbild wird in die Form gelegt, und dann wird der Farbton eingestellt, um dies etwas gelb zu machen. Jede Form ist absolut in der Mitte der umgebenden DIV positioniert und übereinander aufeinander gestapelt.

 # tri2 {
Clip-Pfad: Polygon (50% 0, 0% 100%, 9% 100%,
50% 17%, 50% 17%, 85% 91%, 13% 91%, 0 100%,
100% 100%, 50% 0);
Breite: 80 vh;
Höhe: 70VH;
Hintergrund: URL (../ Bilder / clouds.jpg)
No-Repeat Center Center;
Hintergrundgröße: Abdeckung;
Position: absolut;
oben: 1VH;
links: 50%;
Transformation: translate3d (-50%, 0, 0);
Filter: Hue-Trotat (90 °) (90 °) (140%);
Deckkraft: 0,7;} 

10. Versuchen Sie, den Browser zu ändern

Das nächste Dreieck sollte in das hinzugefügt werden form_contain. Div. Wenn Sie den Browser überprüfen, wird angezeigt, dass Sie den Browser ändern können, und die Formen ändern sich perfekt, da sie auf Prozentangaben basieren. Der Behälter ist mit der Ansichtsfensterhöhe eingestellt, sodass er immer auf den Bildschirm passt.

 & lt; div id = "tri3" & gt; & lt; / div & gt; 

11. Style es auf

Das letzte Dreieck verwendet die gleiche Form wie der vorherige mit dem Loch in der Mitte. Diesmal hat es nur einen einfachen Turkisfarbe als ein Bild. Die Transparenz ist niedrig eingestellt, um dieses Dreieck mit dem anderen Inhalt nachstehend sehen zu können.

 # tri3 {
Clip-Pfad: Polygon (50% 0, 0% 100%, 9% 100%,
50% 17%, 50% 17%, 85% 91%, 13% 91%, 0 100%,
100% 100%, 50% 0);
Breite: 80 vh;
Höhe: 70VH;
Hintergrund: RGBA (0, 113, 110, 0,2);
Position: absolut;
oben: 20 vh;
links: 50%;
Transformation: translate3d (-50%, 0, 0);
} 

12. Erstellen Sie einen abgewinkelten Streifen

Die nächste Form ist eine abgewinkelte DIV-Form. Dies wird zwischen dem Dreieck eins und zwei in der form_contain. DIV-Tag. Mischen Sie es in die Seite mit einem semi-transparenten Gradienten über dem Bildschirm. Diese skalieren auch auf und ab zu unterschiedlichen Bildschirmen.

 & lt; div id = "strip1" class = "streifen" & gt; & lt; / div & gt; 

13. Machen Sie die Winkel

Das Streifen Klasse setzt den Hintergrundgradienten ein. Dies erfolgt mit dem Online-Gradienten-Editor CSS-Gradient. . Die ID setzt dann die Position dieser speziellen abgewinkelten Gradientenform ein. Es wird in der Mitte platziert und dann leicht ausgeglichen, so dass sie ein konsistentes Platzieren auf verschiedenen Monitoren behält.

. Strip {
Position: absolut;
Hintergrund: Lineargradient (0DEG, RGBA (164,
0, 217, 0) 0%, RGBA (164, 0, 217, 0,3) 35%,
RGBA (255, 67, 134, 0,3) 65%, RGBA (255, 67,
134, 0) 100%);
}
# strip1 {
Breite: 20 vh;
Höhe: 120VH;
links: 50%;
Transformation: translate3d (-175%, -15%, 0)
rotatez (30deg);
} 

14. Versuchen Sie mehr Gradient Winkel

Zwei weitere DIV-Tags werden jetzt hinzugefügt, die die Klasse von halten Streifen . Mit der ID können sie in verschiedenen Positionen auf dem Bildschirm platziert werden. Diese werden als wiederholende Formen verwendet, die die Gesamtzweig der Szene aufbauen, während auch ein Farbspritz hinzugefügt werden.

 & lt; div id = "strip2" class = "streifen" & gt; & lt; / div & gt;
& lt; div id = "strip3" class = "streifen" & gt; & lt; / div & gt; 

15. Positionieren Sie den Winkel

Die beiden Streifenwinkelgradientenformen sind auf jeder Seite des Hauptinhalts auf dem Bildschirm positioniert. Man ist in Richtung unten links und der andere nach rechts angeordnet, so dass er den Bildschirm ausgleicht. Ändern Sie der Größe des Browsers, um diese Elemente anzuzeigen, an der diese Elemente auf dem Bildschirm und der Skala festgelegt werden.

 # strip2 {
Breite: 5VH;
Höhe: 90VH;
links: 50%;
Transformation: translate3d (60vh, -15%, 0)
rotatez (30deg);
}
# strip3 {
Breite: 5VH;
Höhe: 90VH;
links: 50%;
Transformation: translate3d (-70vh, 25%, 0)
rotatez (30deg);
} 

16. Fügen Sie einen Textinhalt hinzu

Diese Seite hat keine riesigen Menge an Textinhalten, aber die DIVS hier lassen sich alle verbleibenden Seiteninhalte auf dem Bildschirm platzieren. Die DIVS sollten vor dem Abschluss des DIV-Tags der form_contain. Panel. Diese Textelemente werden in verschiedene Ecken aufgeteilt.

 & lt; div id = "leftsside" & gt; gehen Sie über das Rechteck hinaus
& lt; / div & gt;
& lt; div id = "rechtsside" & gt; ansprechende Form
Layouts & lt; / div & gt;
& lt; div id = "topleft" & gt; Webdesigner
SPAN & GT; CSS-Toolkit & lt; / span & gt; & lt; / div & gt;
& lt; div id = "topright" & gt; 2019 & lt; / div & gt;
& lt; div id = "Schlagzeile" & GT; CSS-Shapes & lt; / div & gt; 

17. Drehen Sie den Text

Die linke Seite div ist absolut auf der linken Seite des Bildschirms positioniert, und es wird um 90 Grad rund gegen den Uhrzeigersinn gedreht, so dass er die Seite angibt. Der Transformationsprung wird leicht bewegt, damit der Text an der Bildkante näher ist.

 #LEFTSIDE {
Position: absolut;
links: 20px;
oben: 70%;
Transform-Herkunft: 10% 0%;
Transformation: Drehen (-90DEG);
} 

18. Positionieren Sie den rechten Text

Der rechte Text ist dem linken Text sehr ähnlich, es sei denn, es befindet sich von der rechten Seite des Bildschirms. Die Drehung sollte um den Uhrzeigersinn gedrückt werden, so dass der Text besser sitzt und auf der rechten Seite des Bildschirms leichter liest.

 #rightside {
Position: absolut;
Rechts: 20px;
oben: 70%;
Transformation-Herkunft: 90% 0%;
Transformation: Drehen (90 °);
} 

19. Stilisieren Sie den Text

Nun ist der Text für die obere linke Ecke stilisiert. Die ersten beiden Wörter bleiben auf ihrer Standardgröße, während die verbleibenden Wörter in der nächsten Zeile nach unten vergrößert und positioniert sind, um dem Text etwas Hierarchie bereitzustellen. Dies bleibt an der oberen linken Ecke durch jede Größenänderung.

 #topleft {
Position: absolut;
links: 40px;
oben: 40px;
Breite: 180px;
Text-ALIGN: CENTER;
}
#topleft span {
Schriftgröße: 1.8em;
} 

20. Stellen Sie den rechten Text ein

Der Text für die obere rechte Ecke ist jetzt eingestellt. Dies ist in einem schwarzen runden Kreis eingestellt, wobei der Text in Weiß gegen den Kreis eingestellt ist. Dies verwendet das Leitungshöhenverfahren zum Ausrichten des Textes in der Mitte, indem die Zeilenhöhe mit der DIV-Höhe verwendet wird.

#oben rechts {
Position: absolut;
Rechts: 35px;
oben: 25px;
Linienhöhe: 100px;
Schriftgröße: 1.4em;
Breite: 100px;
Höhe: 100px;
Hintergrund: # 000;
Farbe: #FFF;
Text-ALIGN: CENTER;
Grenzradius: 50%;
} 

21. Stellen Sie den Headline-Text ein

Der zu letztende Text ist die Hauptüberschrift in der Mitte des Bildschirms. Die Schrifte wird dafür geändert, und es wird eine hellrosa semi-transparente Farbe angezeigt, so dass sie sich mit der Markierungsfarbe dieses Seitenentwurfs fügt. Speichern Sie die Seite und aktualisieren Sie Ihren Browser, um das fertige Ergebnis anzuzeigen. Möchten Sie eine Kopie der Seite speichern oder teilen? Exportieren Sie es als PDF und speichern Sie es in Cloud-Speicherung. .

 #Headline {
Position: absolut;
Breite: 100%;
Z-Index: 200;
Padding-Top: 65VH;
Schriftfamilie: 'Arvo', Serif;
Text-ALIGN: CENTER;
Farbe: RGBA (233, 173, 255, 0,8);
Schriftgröße: 8VW;
Textschatten: 0px 3Px 50px RGBA (0, 0, 0, 0,5);
} 

Dieser Artikel wurde ursprünglich im Creative Web Design Magazine veröffentlicht Webdesigner . Ausgabe 284 kaufen oder abonnieren .

Weiterlesen:

• Beginnen Sie mit der CSS-Kunst
• 5 coole CSS-Gittergeneratoren
• Ein Webdesignerhandbuch zu CSS-Methoden