Hur man designar med CSS-former: en introduktion

Grunden för varje webbplats är att dela upp sidan ner i mindre element som har innehåll. Det stora problemet med detta för designers är att innehållet alltid är en rektangel. Skärmarna är rektangulära i form, och eventuell underavdelning av det kommer att bli en rektangel. I den här handledningen kommer vi att undersöka hur man går utöver rektangulära former med hjälp av CSS Clip-Path-egendom och rotation för att göra designen mer intressant. För andra sätt att göra dina mönster mer intressanta, kolla in våra exempel på CSS-animering . Om allt detta låter som för mycket arbete, prova en topp Website Builder istället. Men oavsett behov av din webbplats måste du få rätt webbhotell till dig.

Den enklaste formen att börja med är en cirkel eller oval. Om du har en rektangel och du ställer in all gränsradie till mer än 50 procent kommer du att ha en oval, och om du börjar med en torg, eftersom alla sidor är lika långa, kommer du att få en cirkel. Det här är något du förmodligen har gjort innan, men det är en teknik som ofta är underutnyttjad i utformningen av sidor.

• De 20 bästa wireframverktygen

En mer komplex lösning är att skapa en triangel genom att använda CSS-klämbanan för att minska den synliga delen av en DIV. En triangel är en ganska enkel form för att skapa eftersom den bara har tre poäng, men om du vill skapa mer komplexa former krävs en visuell klippvägsredigerare.

Denna tutorial visar dig hur du lägger till alla dessa element tillsammans, inklusive gradienter och roterande rektanglar, för att skapa en mer unik design. Lägg till CSS-gradienter, och en komplex geometrisk design kan skapas via CSS.

• Ladda ner filerna till handledningen från Filsilo

01. Kom igång

Öppna Start mapp i din IDE-kodredigerare och börja redigera index.html sida. För att starta handledningen, krävs en enkel länk till Google-teckensnittsnitt, så att när vissa text ingår senare kan det få lämpliga typsnitt som läggs till på sidan.

 & lt; länk rel = "stylesheet" href = "css / shapes.css" & gt;
& lt; länk href = "https://fonts.googleapis.com/
CSS? Family = ARVO: 700 | LATO: 700 "REL =" Stylesheet "& GT; 

02. Ankare formerna tillsammans

I kropp Tag på sidan Lägg till följande innehåll. De formen innehåller Div-taggen kommer att användas för att hålla alla de olika formerna som produceras, och detta kommer att göras för att fylla webbläsarens visningsport. Den första form som ska skapas kommer att vara en enkel cirkel, som kommer att förankra de andra bilderna tillsammans.

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

03. Gör sidan

Flytta nu över till Css mapp och öppna shapes.css fil. Kroppen och HTML är bara inställda för att fylla webbläsaren med den högra fontfamiljen, som ställs in för majoriteten av texten som kommer att läggas till i slutet av handledningen som avslutning.

 Kropp,
html {
Marginal: 0;
Padding: 0;
Bredd: 100%;
Höjd: 100VH;
överflöde-x: dold;
Font-familj: "Lato", sans-serif;
Text-transform: versaler;
} 

04. Innehåller formerna

Nästa CSS-regel är för div med ID för shape_contain . Detta är inställt för att fylla webbläsaren med eventuellt överflöde. De Translate3d är att se till att innehållet är hårdvaruaccelererat. En stor kant läggs till före två bakgrundsbilder. En är en vanlig bild medan den ovan är en aqua-färgad, halvtransparent gradient.

 #shape_contain {
Box-dimensionering: Border-box;
Bredd: 100%;
Höjd: 100VH;
Överflöde: Dold;
Transform: Translate3d (0, 0, 0);
Border: 20px Solid RGB (255, 254, 244);
Bakgrund: Linjär-gradient (0deg, RGBA (7,
47, 46, 0,8) 0%, RGBA (255, 252, 226, 0,5)
100%), URL (.. .. / bilder / mountain.jpg)
No-Repeat Center Center;
Bakgrundsstorlek: Skydd;
} 

05. Börja med en cirkel

Den första geometriska formen som kommer att skapas är en av de enklaste formerna. En cirkel kan tillverkas av vilken som helst kvadratformad div Genom att lägga till en gränsradie av 50% . Cirkeln är halvtransparent, med en mjuk skugga som läggs till kanten av den.

 #circle {
Bredd: 80VH;
Höjd: 80VH;
Border-Radius: 50%;
Bakgrund: RGBA (136, 239, 231, 0,3);
position: absolut;
Topp: 7VH;
Vänster: 50%;
Transform: Translate3d (-50%, 0, 0);
Box-Shadow: 0px 5px 40px RGBA (0, 0, 0, 0,3);
} 

06. Prova en triangel

Nästa form kommer att vara lite mer komplex eftersom det är en triangel. Det är relativt enkelt att skapa med hjälp av CSS-klämbanan som gör det möjligt att skapa en polygonform. Lägg till den här diven i shape_contain div.

 & lt; div ID = "TRI1" & GT; & LT; / DIV & GT; 

07. Applicera triangeln

Här klämväg skapas för CSS för att göra triangeln. Formen är helt enkelt tre punkter. Bakgrundsbilden läggs till, och ett filter läggs här så att nyanser kan flyttas något, vilket gör att bilden tar en liten rosa nyans som betonas med kontrasten.

 # tri1 {
Clip-path: Polygon (0 0, 100% 0, 50%
100%);
Bredd: 100VH;
Höjd: 88VH;
Bakgrund: URL (.. / bilder / girl3.jpg)
No-Repeat Center Center;
Bakgrundsstorlek: Skydd;
position: absolut;
Topp: 10vh;
Vänster: 50%;
Transform: Translate3d (-50%, 0, 0);
Filter: Hue-Rotate (310deg) kontrast (140%);
Opacitet: 0,8;
} 

08. Gå mer komplext

Nästa form som ska skapas kommer att vara en triangel med ett hål i mitten. Det här låter relativt enkelt, men klippet polygon behöver vara en kontinuerlig linje, så det är mer komplext att skapa. Om du behöver skapa en liknande form, använd Bennett Fee's Clip-Path Maker för att skapa formen.

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

09. Stackar formerna

Formen här är mer komplex eftersom den visuellt skapades i den tidigare nämnda länken. Molnbilden är placerad i formen och sedan justeras nyansen för att göra det lite mer gul. Varje form är placerad absolut, i mitten av den omgivande diven och staplade en ovanpå den andra.

 # Tri2 {
Clip-Path: Polygon (50% 0, 0% 100%, 9% 100%,
50% 17%, 50% 17%, 85% 91%, 13% 91%, 0 100%,
100% 100%, 50% 0);
Bredd: 80VH;
Höjd: 70VH;
Bakgrund: URL (.. / bilder / clouds.jpg)
No-Repeat Center Center;
Bakgrundsstorlek: Skydd;
position: absolut;
Topp: 1vh;
Vänster: 50%;
Transform: Translate3d (-50%, 0, 0);
Filter: Hue-Rotate (90deg) kontrast (140%);
Opacitet: 0,7;} 

10. Försök att ändra storlek på webbläsaren

Nästa triangel ska läggas till i shape_contain div. Om du kontrollerar webbläsaren ser du att du kan ändra storlek på webbläsaren och formerna kommer att ändra storlek på perfekt, eftersom de är baserade på procentsatser. Behållaren är inställd med visningshöjden så att den alltid passar in på skärmen.

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

11. Stil upp det

Den slutliga triangeln använder samma form som den föregående med hålet i mitten. Den här gången har det bara en enkel nyans av turkos snarare än en bild. Genomskinligheten är låga för att kunna se igenom denna triangel till det andra innehållet nedan.

 # Tri3 {
Clip-Path: Polygon (50% 0, 0% 100%, 9% 100%,
50% 17%, 50% 17%, 85% 91%, 13% 91%, 0 100%,
100% 100%, 50% 0);
Bredd: 80VH;
Höjd: 70VH;
Bakgrund: RGBA (0, 113, 110, 0,2);
position: absolut;
Topp: 20VH;
Vänster: 50%;
Transform: Translate3d (-50%, 0, 0);
} 

12. Skapa en vinklad remsa

Nästa form är en vinklad divform. Detta kommer att placeras mellan triangeln en och två i shape_contain div tagg. Blanda den på sidan med en halvtransparent gradient över skärmen. Dessa kommer också att skala upp och ner till olika storleksskärmar.

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

13. Gör vinklarna

De remsa klass sätter bakgrundsgradienten. Detta görs med hjälp av online-gradientredigeraren CSS-gradient . IDet ställer sedan ställningen för denna speciella vinklad gradientform. Den placeras i mitten och sedan kompenseras något så att det behåller konsekvent placering på olika bildskärmar.

 .strip {
position: absolut;
Bakgrund: Linjä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 {
Bredd: 20VH;
Höjd: 120VH;
Vänster: 50%;
Transform: Translate3d (-175%, -15%, 0)
Rotatez (30deg);
} 

14. Prova mer gradientvinklar

Två fler div-taggar tillsätts nu som håller klassen av remsa . Iden kommer att göra det möjligt för dem att placeras i olika positioner på skärmen. Dessa används som repetitiva former som bygger upp den övergripande estetiska av scenen, samtidigt som man lägger till ett stänk av färg.

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

15. Placera vinkeln

De två bandvinkelgradientformerna är placerade på vardera sidan av huvudinnehållet på skärmen. En är placerad mot nedre vänster och den andra mot den övre rätten så att den balanserar skärmen ut. Ändra storlek på webbläsaren för att se dessa element sticka på plats på skärmen och skalan för att passa.

 # strip2 {
Bredd: 5VH;
Höjd: 90VH;
Vänster: 50%;
Transform: Translate3d (60VH, -15%, 0)
Rotatez (30deg);
}
# strip3 {
Bredd: 5VH;
Höjd: 90VH;
Vänster: 50%;
Transform: Translate3d (-70VH, 25%, 0)
Rotatez (30deg);
} 

16. Lägg till lite textinnehåll

Den här sidan har inte en stor mängd textinnehåll, men divmen här har all den återstående sidinnehåll som ska placeras på skärmen. Diven ska läggas till före den slutliga Div-taggen på shape_contain panel. Dessa textelement kommer att delas upp i olika hörn.

 & lt; div id = "LEFTSIDE" & GT; Gå bortom rektangeln
& lt; / div & gt;
& lt; div id = "Rightside" & gt; lyhörd form
layouter & lt; / div & gt;
& lt; div id = "topleft" & gt; webbdesigners
& lt; SPAN; CSS TOOLKIT & LT; / SPAN & GT; & LT; / DIV & GT;
& lt; div id = "Topright" & GT; 2019 & LT; / Div & GT;
& lt; div ID = "Rubrik" & GT; CSS Shapes & LT; / Div & GT; 

17. Rotera texten

Den vänstra sidan är placerad absolut på den vänstra sidan av skärmen, och den roteras rund moturs med 90 grader så att den passar nerför sidan. Transformationens ursprung flyttas något för att få texten att passera närmare skärmens kant.

 #leftside {
position: absolut;
Vänster: 20px;
Topp: 70%;
Transform-Ursprung: 10% 0%;
Transform: Rotera (-90deg);
} 

18. Placera den högra texten

Den högra texten är mycket lik den vänstra texten, förutom att den är placerad över från skärmens högra sida. Rotationen ska skjutas runt medsols så att texten sitter bättre och läser lättare till höger på skärmen.

 #rightside {
position: absolut;
höger: 20px;
Topp: 70%;
Transform-Ursprung: 90% 0%;
Transform: Rotera (90deg);
} 

19. Style texten

Nu stiliseras texten för det övre vänstra hörnet. De två första orden lämnas vid sin standardstorlek, medan de återstående orden förstoras och placeras på nästa rad ned för att ge en viss hierarki till texten. Detta kommer att hålla sig till det övre vänstra hörnet genom någon resization.

 #topleft {
position: absolut;
Vänster: 40px;
Topp: 40px;
Bredd: 180px;
Text-Justera: Center;
}
#topleft span {
FONT-STORLEK: 1.8EM;
} 

20. Ställ in den högra texten

Texten för det övre högra hörnet är nu inställd. Detta sätts inuti en svart rund cirkel, med texten i vit mot cirkeln. Detta använder linjens höjdmetod för att anpassa texten i mitten, med hjälp av linjens höjd densamma som DIV-höjden.

 #topright {
position: absolut;
Rätt: 35px;
Topp: 25px;
Linjehöjd: 100px;
FONT-STORLEK: 1.4EM;
Bredd: 100px;
Höjd: 100px;
Bakgrund: # 000;
Färg: #fff;
Text-Justera: Center;
Border-Radius: 50%;
} 

21. Ställ in rubriktexten

Den allra sista texten som ska ställas in är huvudrubriken i mitten av skärmen. Typsnittet ändras för detta, och det ges en ljusrosa halvtransparenta färg så att den blandar sig med höjdpunkten på den här siddesignen. Spara sidan och uppdatera din webbläsare för att se det färdiga resultatet. Vill du spara eller dela en kopia av sidan? Exportera det som en pdf och spara den i molnlagring .

 #headline {
position: absolut;
Bredd: 100%;
Z-Index: 200;
Padding-top: 65VH;
Font-familj: "arvo", serif;
Text-Justera: Center;
Färg: RGBA (233, 173, 255, 0,8);
FONT-STORLEK: 8VW;
Text-Shadow: 0px 3px 50px RGBA (0, 0, 0, 0,5);
} 

Den här artikeln publicerades ursprungligen i kreativ webbdesignmagasin Webbdesigner . Köp utgåva 284 eller prenumerera .

Läs mer:

• Kom igång med CSS-konst
• 5 COOL CSS Grid Generators
• En webbdesigners guide till CSS-metoder