Sådan designes med CSS-former: En introduktion

Grundlaget for hvert websted er at underdele siden ned i mindre elementer, der har indhold. Det store problem med dette for designere er, at indholdet altid er et rektangel. Skærme er rektangulære i form, og enhver underafdeling af det vil være et rektangel. I denne vejledning vil vi undersøge, hvordan vi går ud over rektangulære former ved at bruge CSS-klip-stiens egenskab og rotation for at gøre designet mere interessant. Af andre måder at gøre dine designs mere interessant, tjek vores eksempler på CSS animation. . Hvis alt dette lyder som for meget arbejde, prøv en top Website Builder. i stedet. Men uanset behovene hos dit websted, skal du få det rigtige Web Hosting. for dig.

Den nemmeste form til at begynde med er en cirkel eller oval. Hvis du har et rektangel, og du sætter alle grænsekradius til mere end 50 procent, vil du have en oval, og hvis du starter med en firkant, fordi alle sider er i samme længde, får du en cirkel. Dette er noget, du sandsynligvis har gjort før, men det er en teknik, der ofte er underbrugt i udformningen af ​​sider.

• De 20 bedste wireframe værktøjer

En mere kompleks løsning er at skabe en trekant ved at bruge CSS-klipbanen for at reducere den synlige del af et div. En trekant er en ganske simpel form for at skabe, fordi den kun har tre punkter, men hvis du vil oprette mere komplekse former, skal der kræves en visuel clip-path editor.

Denne vejledning viser dig, hvordan du tilføjer alle disse elementer sammen, herunder gradienter og roterende rektangler, for at skabe et mere unikt design. Tilføj CSS-gradienter, og et komplekst geometrisk design kan oprettes via CSS.

• Download filerne til vejledningen fra FileSilo

01. Kom godt i gang

Åbn Start mappe i din IDE CODE EDITOR og begynd at redigere index.html. side. For at starte tutorialet vil der kræves en simpel link-up til Google Fonts-skrifttyper, således at når nogle tekst er inkluderet senere, kan den få de relevante skrifttyper tilføjet til siden.

 & lt; link rel = "stylesheet" href = "css / former.css" & gt;
& lt; link href = "https://fonts.googleapis.com/
CSS? Familie = Arvo: 700 | Lato: 700 "REL =" Stylesheet "& GT; 

02. Anker formerne sammen

I legeme Tag på siden Tilføj følgende indhold. Det form indeholde Div Tag vil blive brugt til at holde alle de forskellige former, der produceres, og det vil blive lavet for at udfylde browservisningen. Den første form, der skal oprettes, vil være en simpel cirkel, som vil forankre de andre billeder sammen.

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

03. Lav siden

Nu bevæge sig over til CSS. mappe og åben former.css. fil. Kroppen og HTML er lige indstillet til at fylde browseren med den rigtige skrifttypefamilie, oprettet for størstedelen af ​​teksten, der vil blive tilføjet i slutningen af ​​vejledningen som efterbehandling.

 Krop,
html {
Margin: 0;
Padding: 0;
Bredde: 100%;
Højde: 100Vh;
Overflow-x: skjult;
Font-familie: 'Lato', Sans-Serif;
Tekst-transformation: store bogstaver;
} 

04. Indeholde formerne

Den næste CSS-regel er til Div med ID'et for form_contain. . Dette er indstillet til at fylde browseren med ethvert overløb skjult. Det Oversæt3D. er at sikre, at indholdet er hardware-accelereret. En stor kant tilføjes før to baggrundsbilleder. Den ene er et almindeligt billede, mens den ovenstående er en aqua-farvet, halvgennemsigtig gradient.

 #shape_contain {
Boksestørrelse: Border-boks;
Bredde: 100%;
Højde: 100Vh;
Overløb: Skjult;
Transform: Translate3D (0, 0, 0);
Border: 20px fast RGB (255, 254, 244);
Baggrund: Lineær-gradient (0deg, RGBA (7,
47, 46, 0,8) 0%, RGBA (255, 252, 226, 0,5)
100%), URL (../ Billeder / mountain.jpg)
no-repeat center center;
Baggrundsstørrelse: Dæk;
} 

05. Start med en cirkel

Den første geometriske form, der vil blive oprettet, er en af ​​de mest enkle former. En cirkel kan laves ud af enhver firkantet formet Div. ved at tilføje en kantradius af 50% . Cirklen er halvgennemsigtig, med en blød skygge tilføjet til kanten af ​​den.

 #circle {
Bredde: 80vh;
Højde: 80vh;
Border-radius: 50%;
Baggrund: RGBA (136, 239, 231, 0,3);
position: absolut;
TOP: 7VH;
Venstre: 50%;
Transform: Translate3D (-50%, 0, 0);
Box-Shadow: 0px 5px 40px RGBA (0, 0, 0, 0,3);
} 

06. Prøv en trekant

Den næste form vil være lidt mere kompleks, fordi det er en trekant. Det er relativt ligetil at oprette ved at bruge CSS-klipbanen, der gør det muligt at oprette en polygonform. Tilføj dette div ind i form_contain. Div.

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

07. Anvend trekanten

Her Clip-Path. er skabt til CSS for at gøre trekanten. Formen er simpelthen tre punkter. Baggrundsbilledet tilsættes, og der tilføjes et filter her, så nuance kan skiftes lidt, hvilket gør billedet på en lille lyserød farvetone, der understreges med kontrasten.

 # tri1 {
Clip-sti: Polygon (0 0, 100% 0, 50%
100%);
Bredde: 100vh;
Højde: 88vh;
Baggrund: URL (../ Billeder / Girl3.jpg)
no-repeat center center;
Baggrundsstørrelse: Dæk;
position: absolut;
TOP: 10VH;
Venstre: 50%;
Transform: Translate3D (-50%, 0, 0);
Filter: Hue-roter (310deg) kontrast (140%);
Opacitet: 0,8;
} 

08. Gå mere komplekst

Den næste form, der skal oprettes, vil være en trekant med et hul i midten. Dette lyder relativt ligetil, men klippepolygonen skal være en kontinuerlig linje, så det er mere komplekst at skabe. Hvis du har brug for at skabe en lignende form, skal du bruge Bennett Feely's Clip-Path Maker at skabe formen.

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

09. Stak formerne

Formen her er mere kompleks, fordi den visuelt blev oprettet i det tidligere nævnte link. Skyerbilledet er placeret i form, og derefter justeres nugrået for at gøre dette lidt mere gult. Hver form er placeret absolut i midten af ​​det omgivende div og stablet en oven på den anden.

 # tri2 {
Clip-sti: Polygon (50% 0, 0% 100%, 9% 100%,
50% 17%, 50% 17%, 85% 91%, 13% 91%, 0 100%,
100% 100%, 50% 0);
Bredde: 80vh;
Højde: 70vh;
Baggrund: URL (../ Billeder / clouds.jpg)
no-repeat center center;
Baggrundsstørrelse: Dæk;
position: absolut;
TOP: 1VH;
Venstre: 50%;
Transform: Translate3D (-50%, 0, 0);
Filter: Hue-roter (90deg) kontrast (140%);
Opacitet: 0,7;} 

10. Prøv at ændre størrelsen på browseren

Den næste trekant skal tilføjes i form_contain. Div. Hvis du tjekker browseren, vil du se, at du kan ændre størrelsen på browseren, og formerne vil afhjælpe perfekt, da de er baseret på procentsatser. Beholderen er indstillet med Viewport-højden, så den altid passer ind på skærmen.

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

11. Stil det op

Den endelige trekant bruger den samme form som den forrige med hullet i midten. Denne gang har den bare en simpel skygge af turkis snarere end et billede. Gennemsigtigheden er sat lavt for at kunne se gennem denne trekant til det andet indhold nedenfor.

 # tri3 {
Clip-sti: Polygon (50% 0, 0% 100%, 9% 100%,
50% 17%, 50% 17%, 85% 91%, 13% 91%, 0 100%,
100% 100%, 50% 0);
Bredde: 80vh;
Højde: 70vh;
Baggrund: RGBA (0, 113, 110, 0,2);
position: absolut;
TOP: 20VH;
Venstre: 50%;
Transform: Translate3D (-50%, 0, 0);
} 

12. Opret en vinklet strimmel

Den næste form er en vinklet div form. Dette vil blive placeret mellem trekant en og to i form_contain. div tag. Blend det på siden ved hjælp af en halvgennemsigtig gradient på tværs af skærmen. Disse vil også omfatte op og ned til forskellige skærmbilleder.

& lt; div id = "strip1" klasse = "strip" & gt; & lt; / div & gt; 

13. Lav vinklerne

Det Strip Klassen sætter baggrundsgradienten. Dette er lavet ved hjælp af online gradient editor CSS gradient. . ID'et sætter derefter positionen af ​​denne særlige vinklede gradientform. Det er placeret i centrum og derefter forskudt lidt, så det bevarer ensartet placering på forskellige skærme.

 .strip {
position: absolut;
Baggrund: Lineær-gradient (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 {
Bredde: 20vh;
Højde: 120vh;
Venstre: 50%;
Transform: Translate3D (-175%, -15%, 0)
rotationz (30deg);
} 

14. Prøv mere gradientvinkler

To flere div tags er nu tilføjet, der holder klassen af Strip . ID'et vil gøre det muligt for dem at blive placeret i forskellige positioner på skærmen. Disse bruges som gentagne former, der opbygger scenens samlede æstetik, samtidig med at man tilføjer et stænk af farve.

 & lt; div id = "strip2" klasse = "strip" & gt; & lt; / div & gt;
& lt; div id = "strip3" klasse = "strip" & gt; & lt; / div & gt; 

15. Placer vinklen

De to strimmelvinkelgradientformer er placeret til hver side af hovedindholdet på skærmen. Den ene er anbragt mod nederste venstre og den anden mod øverst til højre, så den balancerer skærmen ud. Ændre størrelsen på browseren for at se disse elementer holde fast på plads på skærmen og skalaen for at passe.

 # strip2 {
Bredde: 5Vh;
Højde: 90Vh;
Venstre: 50%;
Transform: Translate3D (60vh, -15%, 0)
rotationz (30deg);
}
# strip3 {
Bredde: 5Vh;
Højde: 90Vh;
Venstre: 50%;
Transform: Translate3D (-70VH, 25%, 0)
rotationz (30deg);
} 

16. Tilføj noget tekstindhold

Denne side har ikke en enorm mængde tekstindhold, men DIV'erne her har alle de resterende siders indhold placeret på skærmen. DIV'erne skal tilføjes før den afsluttende div-tag på form_contain. panel. Disse tekstelementer vil blive opdelt i forskellige hjørner.

 & lt; div id = "leftside" & gt; gå ud over rektanglet
& lt; / div & gt;
& lt; div id = "rightside" & gt; responsive form
layouts & lt; / div & gt;
& lt; div id = "topleft" & gt; webdesignere
& lt; span & gt; CSS Toolkit & Lt; / Span & GT; & lt; / div & gt;
& lt; div id = "topright" & gt; 2019 & lt; / div & gt;
& lt; div id = "overskrift" & gt; css figurer & lt; / div & gt; 

17. Drej teksten

Den venstre side div er placeret helt på venstre side af skærmen, og den drejes rundt om uret med 90 grader, så den passer ned på siden. Transformets oprindelse flyttes lidt for at gøre teksten passer tættere på kanten af ​​skærmen.

 #leftside {
position: absolut;
Venstre: 20px;
Top: 70%;
Transform-Origin: 10% 0%;
Transform: Rotate (-90deg);
} 

18. Placer den højre tekst

Den højre tekst svarer meget til den venstre tekst, medmindre den er placeret over fra højre side af skærmen. Rotationen skal skubbes rundt med uret, så teksten sidder bedre og læser lettere til højre på skærmen.

 #rightside {
position: absolut;
Højre: 20px;
Top: 70%;
Transform-Origin: 90% 0%;
Transform: Drej (90deg);
} 

19. Stylise teksten

Nu er teksten til det øverste venstre hjørne stiliseret. De to første ord er efterladt på deres standardstørrelse, mens de resterende ord forstørres og placeres på næste linje ned for at give noget hierarki til teksten. Dette vil holde fast i øverste venstre hjørne gennem enhver resizing.

 #topleft {
position: absolut;
Venstre: 40px;
Top: 40px;
Bredde: 180px;
Tekst-Align: Center;
}
#Topleft span {
Font-størrelse: 1.8EM;
} 

20. Indstil højre tekst

Teksten til øverste højre hjørne er nu indstillet. Dette er indstillet inde i en sort rund cirkel, med teksten i hvid mod cirklen. Dette bruger linjens højde metode til at justere teksten i midten, ved at bruge linjens højde den samme som divhøjde.

 #TOPRIGHT {
position: absolut;
Højre: 35px;
Top: 25px;
Line-Heund: 100px;
Font-størrelse: 1.4EM;
Bredde: 100px;
Højde: 100px;
Baggrund: # 000;
Farve: #fff;
Tekst-Align: Center;
Border-radius: 50%;
} 

21. Indstil overskriftsteksten

Den allerførste tekst, der skal indstilles, er hovedoverskriften i midten af ​​skærmen. Skrifttypet ændres til dette, og det gives en lyserød semi-gennemsigtig farve, så den blandes med højdepunktet på dette sidesign. Gem siden og opdater din browser for at se det færdige resultat. Vil du gemme eller dele en kopi af siden? Eksporter det som en PDF og gem det i Sky lagring .

 # headline {
position: absolut;
Bredde: 100%;
Z-indeks: 200;
Padding-Top: 65VH;
Font-familie: 'Arvo', Serif;
Tekst-Align: Center;
Farve: RGBA (233, 173, 255, 0,8);
Font-størrelse: 8VW;
Tekstskygge: 0px 3px 50px RGBA (0, 0, 0, 0,5);
} 

Denne artikel blev oprindeligt offentliggjort i Creative Web Design Magazine Webdesigner . Køb problem 284. eller abonnere .

Læs mere:

• Kom i gang med CSS Art
• 5 COOL CSS Gitter generatorer
• En webdesigner guide til CSS-metoder