Hoe te ontwerpen met CSS-vormen: een introductie

De basis van elke website is om de pagina af te delen in kleinere elementen die inhoud hebben. Het grote probleem hiermee voor ontwerpers is dat de inhoud altijd een rechthoek is. Schermen zijn rechthoekig in vorm, en elke onderverdeling van dat wordt een rechthoek. In deze tutorial gaan we onderzoeken hoe ze verder gaan dan rechthoekige vormen met behulp van de CSS-clippad-accommodatie en rotatie om het ontwerp interessanter te maken. Voor andere manieren om uw ontwerpen interessanter te maken, bekijk dan onze voorbeelden van CSS-animatie ​Als al deze klinkt als te veel werk, probeer dan een top website bouwer in plaats daarvan. Maar ongeacht de behoeften van uw site, u moet het recht krijgen web hosting voor jou.

De eenvoudigste vorm om mee te beginnen is een cirkel of ovaal. Als u een rechthoek heeft en u alle grensradius instelt tot meer dan 50 procent, heeft u een ovaal en als u begint met een vierkant, omdat aan alle zijkanten dezelfde lengte hebben, krijgt u een cirkel. Dit is iets dat je waarschijnlijk eerder hebt gedaan, maar het is een techniek die vaak wordt gebruikt in het ontwerp van pagina's.

• De 20 beste wireframe-tools

Een complexere oplossing is om een ​​driehoek te maken door het CSS-clip-pad te gebruiken om het zichtbare deel van een div te verminderen. Een driehoek is vrij een eenvoudige vorm om te creëren omdat het slechts drie punten heeft, maar als je meer complexe vormen wilt maken, is een visuele clip-pad-editor vereist.

Deze tutorial laat je zien hoe je al deze elementen samen kunt toevoegen, inclusief verlopen en draaiende rechthoeken, om een ​​unieker ontwerp te maken. Voeg CSS-verlopen toe en er kan een complex geometrisch ontwerp worden gemaakt via CSS.

• Download de bestanden voor de tutorial van Filesilo

01. Ga aan de slag

Open de begin Map in uw IDE-codeeditor en begin met het bewerken van de index.html bladzijde. Om de tutorial te starten, is een eenvoudige link-up van Google Fonts-lettertypen vereist, zodat wanneer een tekst later is opgenomen, de juiste lettertypen die aan de pagina zijn toegevoegd.

 & LT; LINK REL = "Stylesheet" HREF = "CSS / SHAPES.CSSS" & GT;
& lt; link href = "https://fonts.gogleapis.com/
CSS? FAMILIE = ARVO: 700 | LATO: 700 "REL =" Stylesheet "& GT; 

02. Anchor de vormen samen

In de lichaam Tag op de pagina Voeg de volgende inhoud toe. De vorm bevatten DIV-tag zal worden gebruikt om alle verschillende vormen die worden geproduceerd, en dit zal worden gemaakt om de browserviewport te vullen. De eerste vorm die moet worden gemaakt, is een eenvoudige cirkel, die de andere afbeeldingen samen zal verankeren.

 & lt; div id = "shape_contain" & GT;
& LT; DIV ID = "Circle" & GT; & LT; / DIV & GT;
& lt; / div & gt; 

03. Maak de pagina

Ga nu naar de CSS map en open de shapes.css het dossier. Het lichaam en HTML zijn gewoon ingesteld om de browser te vullen met de juiste lettertypenfamilie, opgezet voor de meerderheid van de tekst die aan het einde van de tutorial wordt toegevoegd als de finishing.

 lichaam,
html {
marge: 0;
Vulling: 0;
Breedte: 100%;
Hoogte: 100VH;
Overflow-X: verborgen;
Font-familie: 'Lato', Sans-Serif;
Tekst-transformatie: hoofdletters;
} 

04. Bevatten de vormen

De volgende CSS-regel is voor de div met de ID van shape_contain ​Dit is ingesteld om de browser te vullen met een overloop verborgen. De Vertaal3d is om ervoor te zorgen dat de inhoud hardware is versneld. Een grote rand wordt toegevoegd vóór twee achtergrondafbeeldingen. Eén is een regelmatig beeld terwijl de bovenstaande een aquakleurig, semi-transparant verloop is.

 #Shape_Contain {
Box-sizing: rand-box;
Breedte: 100%;
Hoogte: 100VH;
overloop verborgen;
Transformeren: Translate3D (0, 0, 0);
Grens: 20px vaste RGB (255, 254, 244);
Achtergrond: lineair -gradiënt (0DEG, RGBA (7,
47, 46, 0.8) 0%, RGBA (255, 252, 226, 0.5)
100%), URL (../ Afbeeldingen / Mountain.jpg)
NO-REPEER CENTER CENTER;
Achtergrondformaat: dekking;
} 

05. Begin met een cirkel

De eerste geometrische vorm die wordt gemaakt is een van de meest eenvoudige vormen. Een cirkel kan worden gemaakt van een vierkant-vormig div Door een grensradius van toe te voegen 50% ​De cirkel is semi-transparant, met een zachte schaduw toegevoegd aan de rand ervan.

 #circle {
Breedte: 80VH;
Hoogte: 80VH;
Border-Radius: 50%;
ACHTERGROND: RGBA (136, 239, 231, 0.3);
Positie: absoluut;
Top: 7VH;
Links: 50%;
Transformeren: Translate3D (-50%, 0, 0);
Box-Shadow: 0px 5px 40px RGBA (0, 0, 0, 0.3);
} 

06. Probeer een driehoek

De volgende vorm is iets complexer omdat het een driehoek is. Het is relatief eenvoudig om te creëren door het CSS-clippad te gebruiken waarmee een polygoonvorm kan worden gemaakt. Voeg deze div toe in de shape_contain div.

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

07. Breng de driehoek aan

Hier de klempad wordt gemaakt voor de CSS om de driehoek te maken. De vorm is gewoon drie punten. De achtergrondafbeelding wordt hier toegevoegd en een filter wordt hier toegevoegd, zodat de tint iets kan worden verschoven, waardoor het beeld een lichte roze tint heeft die wordt benadrukt met het contrast.

 # Tri1 {
Clip-Path: Polygon (0 0, 100% 0, 50%
100%);
Breedte: 100VH;
Hoogte: 88VH;
Achtergrond: URL (../ Afbeeldingen / Girl3.jpg)
NO-REPEER CENTER CENTER;
Achtergrondformaat: dekking;
Positie: absoluut;
Top: 10VH;
Links: 50%;
Transformeren: Translate3D (-50%, 0, 0);
Filter: Hue-Rotate (310DEG) Contrast (140%);
Dekking: 0,8;
} 

08. Ga ingewikkelder

De volgende vorm die moet worden gemaakt, is een driehoek met een gat in het midden. Dit klinkt relatief eenvoudig, maar de clippolygoon moet één continue lijn zijn, dus het is complexer om te creëren. Als u een vergelijkbare vorm moet maken, gebruikt u Bennett REAY's Clip-Path-maker om de vorm te creëren.

 & LT; DIV ID = "TRI2" & GT; & LT; / DIV & GT; 

09. Stapel de vormen

De vorm hier is complexer omdat het visueel is gemaakt in de eerder genoemde link. Het beeld van de wolken wordt in de vorm geplaatst en vervolgens wordt de tint aangepast om dit een beetje meer geel te maken. Elke vorm bevindt zich absoluut, in het midden van de omringende div en stapelde er een op de andere.

 # Tri2 {
Clip-pad: Polygon (50% 0, 0% 100%, 9% 100%,
50% 17%, 50% 17%, 85% 91%, 13% 91%, 0 100%,
100% 100%, 50% 0);
Breedte: 80VH;
Hoogte: 70VH;
Achtergrond: URL (../ Afbeeldingen / clouds.jpg)
NO-REPEER CENTER CENTER;
Achtergrondformaat: dekking;
Positie: absoluut;
Top: 1VH;
Links: 50%;
Transformeren: Translate3D (-50%, 0, 0);
Filter: Hue-Rotate (90DEG) Contrast (140%);
Dekking: 0.7;} 

10. Probeer de browser te wijzigen

De volgende driehoek moet in de shape_contain div. Als u de browser controleert, ziet u dat u de grootte van de browser kunt wijzigen en de vormen het formaat zullen formuleren, omdat ze zijn gebaseerd op percentages. De container is ingesteld met de viewport-hoogte, zodat deze altijd in het scherm past.

 & LT; DIV ID = "TRI3" & GT; & LT; / DIV & GT; 

11. Stijl het op

De laatste driehoek gebruikt dezelfde vorm als de vorige met het gat in het midden. Deze keer heeft het gewoon een eenvoudige turquoise in plaats van een afbeelding. De transparantie is laag ingesteld om via deze driehoek naar de andere onderstaande inhoud te kunnen zien.

 # Tri3 {
Clip-pad: Polygon (50% 0, 0% 100%, 9% 100%,
50% 17%, 50% 17%, 85% 91%, 13% 91%, 0 100%,
100% 100%, 50% 0);
Breedte: 80VH;
Hoogte: 70VH;
ACHTERGROND: RGBA (0, 113, 110, 0.2);
Positie: absoluut;
Top: 20VH;
Links: 50%;
Transformeren: Translate3D (-50%, 0, 0);
} 

12. Maak een hoekige strip

De volgende vorm is een hoekige div-vorm. Dit wordt tussen driehoek één en twee in de shape_contain div-tag. Meng het in de pagina met behulp van een semi-transparant verloop over het scherm. Deze zullen ook op en neer op verschillende grootte schermen schalen.

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

13. Maak de hoeken

De strip Klasse zet het achtergrondgradiënt. Dit wordt gemaakt met behulp van de online gradiënteditor CSS-gradiënt ​Het ID stelt vervolgens de positie in van deze specifieke schuine gradiëntvorm. Het wordt in het midden geplaatst en vervolgens een beetje gecompenseerd, zodat deze een consistente plaatsing op verschillende monitoren behoudt.

 .strip {
Positie: absoluut;
Achtergrond: lineair -gradiënt (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 {
Breedte: 20VH;
Hoogte: 120VH;
Links: 50%;
Transformeren: Translate3D (-175%, -15%, 0)
rotatez (30DEG);
} 

14. Probeer meer verloophoeken

Er worden nu twee div-tags toegevoegd die de klasse van houden strip ​De ID kan ze in verschillende posities op het scherm worden geplaatst. Deze worden gebruikt als repetitieve vormen die de algehele esthetiek van de scène opbouwen, terwijl ze ook een plons van kleur toevoegen.

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

15. Plaats de hoek

De twee-striphoekgradiëntvormen zijn gepositioneerd aan elke zijde van de hoofdinhoud op het scherm. Eén wordt naar links en de andere richting de rechterbovenhoek geplaatst, zodat het het scherm erin balanceert. Wijzig de grootte van de browser om deze elementen op zijn plaats op het scherm en de schaal te zien passen.

 # strip2 {
Breedte: 5VH;
Hoogte: 90VH;
Links: 50%;
Transformeren: Translate3D (60VH, -15%, 0)
rotatez (30DEG);
​
# strip3 {
Breedte: 5VH;
Hoogte: 90VH;
Links: 50%;
Transformeren: Translate3D (-70VH, 25%, 0)
rotatez (30DEG);
} 

16. Voeg wat tekstinhoud toe

Deze pagina heeft geen enorme hoeveelheid tekstinhoud, maar de DIV's hier hebben alle resterende pagina-inhoud die op het scherm moet worden geplaatst. De DIV's moeten worden toegevoegd vóór het afsluitende div-tag van de shape_contain paneel. Deze tekstelementen worden opgesplitst in verschillende hoeken.

 & LT; DIV ID = "LEFTSIDE" & GT; Ga verder dan de rechthoek
& LT; / DIV & GT;
& LT; DIV ID = "Rightside" & GT; responsieve vorm
Layouts & LT; / DIV & GT;
& LT; DIV ID = "Topleft" & GT; Webontwerpers
& lt; br & gt; & lt; span & gt; CSS Toolkit & LT; / Span & GT; & LT; / DIV & GT;
& LT; DIV ID = "TOPRIGHT" & GT; 2019 & LT; / DIV & GT;
& LT; DIV ID = "Headline" & GT; CSS Shapes & LT; / DIV & GT; 

17. Draai de tekst

De linker div is absoluut aan de linkerkant van het scherm gepositioneerd, en het wordt met 90 graden rondom tegen de klok in geroteerd, zodat deze aan de zijkant past. De transformatie-oorsprong wordt licht verplaatst om de tekst dichter bij de rand van het scherm te laten passen.

 #LEftside {
Positie: absoluut;
Links: 20px;
Top: 70%;
Transform-oorsprong: 10% 0%;
Transformeren: Roteren (-90DEG);
} 

18. Plaats de juiste tekst

De rechtertekst lijkt erg op de linker tekst, behalve dat deze van de rechterkant van het scherm is gepositioneerd. De rotatie moet met de klok mee worden geduwd, zodat de tekst beter zit en gemakkelijker in de rechterkant van het scherm leest.

 #rightside {
Positie: absoluut;
RECHTS: 20PX;
Top: 70%;
Transform-oorsprong: 90% 0%;
Transformeren: roteren (90 deg);
} 

19. Stile de tekst

Nu is de tekst voor de linkerbovenhoek gestileerd. De eerste twee woorden blijven bij hun standaardgrootte, terwijl de resterende woorden worden vergroot en gepositioneerd op de volgende regel omlaag om wat hiërarchie aan de tekst te verschaffen. Dit blijft aan de linkerbovenhoek door het formaat.

 #topleft {
Positie: absoluut;
Links: 40px;
Top: 40px;
Breedte: 180px;
Tekst-Uitlijnen: Centrum;
​
#topleft span {
FONT-SIZE: 1.8EM;
} 

20. Stel de rechter tekst in

De tekst voor de rechterbovenhoek is nu ingesteld. Dit wordt ingesteld in een zwarte ronde cirkel, met de tekst in wit tegen de cirkel. Dit gebruikt de lijnhoogte-methode voor het uitlijnen van de tekst in het midden, met behulp van de lijnhoogte hetzelfde als de div-hoogte.

 #tvolright {
Positie: absoluut;
RECHTS: 35PX;
Top: 25px;
Lijnhoogte: 100px;
FONT-SIZE: 1.4EM;
Breedte: 100px;
Hoogte: 100px;
Achtergrond: # 000;
Kleur: #fff;
Tekst-Uitlijnen: Centrum;
Border-Radius: 50%;
} 

21. Zet de koptekst

De allerlaatste tekst die moet worden ingesteld, is de hoofdkop in het midden van het scherm. Het lettertype is hiervoor gewijzigd, en het krijgt een lichtroze semi-transparante kleur, zodat het mengt met de markeringskleur van het ontwerp van deze pagina. Sla de pagina op en vernieuw uw browser om het voltooide resultaat te zien. Wilt u een kopie van de pagina opslaan of delen? Exporteer het als een pdf en sla het op in cloud opslag ​

 #headline {
Positie: absoluut;
Breedte: 100%;
Z-index: 200;
Padding-top: 65VH;
Font-familie: 'Arvo', Serif;
Tekst-Uitlijnen: Centrum;
Kleur: RGBA (233, 173, 255, 0.8);
FONT-SIZE: 8VW;
Tekst-schaduw: 0px 3px 50px RGBA (0, 0, 0, 0,5);
} 

Dit artikel is oorspronkelijk gepubliceerd in Creative Web Design Magazine Webdesigner ​ Koop Issue 284 of inschrijven ​

Lees verder:

• Ga aan de slag met CSS Art
• 5 Cool CSS-rastergeneratoren
• De gids van een Web Designer voor CSS-methodologieën