CSS-vormen gebruiken in uw webontwerp

De lay-outprincipes - kolommen en rijen, hoeken en lijnen - die we gebruiken om websites te bouwen, worden grotendeels beïnvloed door hun print-erfgoed. En hoewel de netwerkimplementatie op het web steeds beter en mooier wordt, is weblay-out in het algemeen nog steeds onhandig in vergelijking met gedrukte media, vooral als het gaat om de contentstroom.

Tijdschriften en kranten hebben altijd genoten van elegante manieren om de lay-out van de inhoud in te delen, zoals tekst omwikkelen of binnen, niet-rechthoekige vormen.

Multipurpose Magazine door GreenSocks

Laten we eens kijken hoe de CSS Shapes Module ons dezelfde vrijheid op internet biedt.

Introductie tot CSS-vormen

CSS Shapes stellen webontwerpers in staat om meer abstracte, geometrische lay-outs te maken, voorbij eenvoudige rechthoeken en vierkanten. De specificatie voorziet ons van nieuwe CSS-eigenschappen die omvatten -vorm buiten en shape marge. Browserondersteuning is redelijk, hoewel deze eigenschappen momenteel alleen beschikbaar zijn in Chrome, Opera en Safari, met de -webkit- voorvoegsel, vandaar -webkit-shape-buiten.

De -vorm buiten eigenschap zorgt ervoor dat inline inhoud zich (buiten) omwikkelt volgens de elementcurve in plaats van het boxmodel. Aanvankelijk was er ook -vorm binnen om de inhoud in een element te verpakken; tekst binnen een cirkelvormig element zou ook in een cirkelvorm worden gevormd. De implementatie is echter uitgesteld voor CSS Shapes Level 2.

Van boven naar beneden: shape-outside en shape-inside in actie.

De shape marge property bepaalt de marge rond welke vorm dan ook gebruikt -vorm buiten.

Laten we een paar voorbeelden bekijken.

Een vorm maken

De eenvoudigste manier om erachter te komen hoe CSS Shapes werkt, is waarschijnlijk door een cirkel te maken. Dus, hier is een div (onze cirkel), met verschillende paragrafen ernaast.

Lorem ipsum ...

Hier is wat basisstyling, inclusief de breedte en de hoogte van onze cirkel, de border-radius om het element vorm te geven, en een zweeftekst zodat de alinea zich om het element wikkelt.

.cirkel width: 250px; hoogte: 250 px; achtergrondkleur: # 40a977; grensradius: 50%; zweven: links;

Zoals we zouden doen, zijn de alinea's nu rond het element gewikkeld. Aangezien de eigenschap border-radius echter niet de werkelijke elementvorm definieert, vormt de alineaomloop niet de cirkelcurve.

Als we het element inspecteren via onze browser DevTools, zullen we ontdekken dat het element in feite nog steeds een vak is. Dus, ook al heeft onze div het uiterlijk van een cirkel, de border-radius heeft het niets gedaan werkelijk vorm van het element.

Let op de rechthoekige markering rondom het element.

Om ervoor te zorgen dat onze alinea aan de cirkelvorm voldoet, moeten we de werkelijk elementvorm door de -vorm buiten eigendom; in dit geval voegen we er een toe met de cirkel() functie doorgegeven als de waarde.

.cirkel width: 250px; hoogte: 250 px; achtergrondkleur: # 40a977; grensradius: 50%; zweven: links; -webkit-shape-outside: circle (); shape-outside: circle ();

Onze alinea's worden nu netjes rond de omtrek van de cirkel ingepakt.

Als we het element nu inspecteren via DevTools, zien we dat het element correct wordt weergegeven in een cirkel.

Let op het donkere hoogtepunt.

Bekijk met een paar marges hoe het een eenvoudige lay-out kan verbeteren:

De cirkel aanpassen

De cirkel() function neemt een aantal waarden voor het definiëren van de radius en de centrum coördinaat respectievelijk: cirkel (r bij x y). Standaard is de radiuswaarde afgeleid van de elementgrootte; als het element is 300px breed, bijvoorbeeld, de straal zal zijn 150px (de straal is de helft van de diameter van de cirkel).

Evenzo is de X en Y coördinaten worden gemeten ten opzichte van de grootte van het element en worden standaard ingesteld op 50% 50%; precies in het midden van het element.

De cirkel bevindt zich in het midden van het element.

Deze twee waarden komen van pas wanneer u de vorm van de vorm wilt wijzigen, terwijl u de feitelijke elementgrootte behoudt, of de vorm verplaatst terwijl u de elementpositie behoudt. In het volgende voorbeeld verminderen we de straal van de cirkel tot 60px en stel de middencoördinaat in op 30% 70%, die de cirkel naar linksonder in het elementvak moet verplaatsen.

De alinea's gaan nu voorbij door het elementvakje dat de cirkelgrootte volgt. Bekijk de demo.

Het is vermeldenswaard dat bij het wijzigen van de cirkel zowel de middencoördinaat als de straal expliciet moeten worden gedefinieerd; het toevoegen van slechts één van de is ongeldig.

cirkel (60 px bij 30% 70%) // correct. cirkel (60px) // ongeldig. cirkel (bij 30% 70%) // ongeldig.

Shape Box Model

CSS-vormen nemen hetzelfde over doosmodel principe als het element, maar toegepast buiten het bereik van het element zelf. Dit stelt ons in staat om het element apart in te stellen, bijvoorbeeld border-box tijdens het instellen van de vorm padding-box. Om de vorm te veranderen doosmodel, voeg een van de toe doosmodel trefwoorden, Inhoud-box, margin-box, border-box, of padding-box na de functie.

.cirkel width: 250px; hoogte: 250 px; achtergrondkleur: # 40a977; grensradius: 50%; zweven: links; opvulling: 10px; border: 20px solid #ccc; marge: 30px; -webkit-shape-outside: circle () padding-box; shape-outside: circle () padding-box;

Het standaard box-model van de vorm is ingesteld op margin-box. En in het volgende voorbeeld hebben we dit gewijzigd in padding-box om de browser te vertellen de elementmarge uit te sluiten bij het bepalen van de vormgrootte of de reeks. Nu moeten we de alinea door de rand laten gaan en onmiddellijk de opvulling van het element aanraken.

Het oranje vierkant is de marge, het gele vierkant is de rand en het groene vierkant is de opvulling,

Ik raad ten zeerste aan om onze gratis cursus over de grondbeginselen van CSS Box Model te bekijken voor meer informatie over hoe het box-model in detail werkt.

Meer vormen maken

De CSS Shapes-specificatie wordt geleverd met nog enkele vormfuncties:

ellips(): Zoals de naam aangeeft, maakt deze functie een ellipsvorm. We kunnen de ellipsradius configureren en de vormcentrumcoördinaat ook verplaatsen. Maar in tegenstelling tot de cirkel() functie, de ellips() functie past twee radiusmetingen toe, horizontaal en verticaal, vandaar ellips (100px 180px bij 10% 20%).
veelhoek(): Met deze functie kunnen we complexere vormen zoals driehoeken, zeshoeken en niet-geometrische vormen maken. Het gebruik van polygoon is niet zo eenvoudig als het maken van een cirkel, maar het hulpprogramma Pad naar veelhoekomzetting maakt het een beetje intuïtiever.

Afsluiten

In deze zelfstudie hebben we gekeken naar de basistoepassing van CSS Shapes; we creëerden een vorm, pasten de grootte, de positie en de aan doosmodel. Op het moment van schrijven zijn verschillende aspecten van CSS Shapes nog steeds erg ruw aan de randen, wat waarschijnlijk de reden is waarom we het nog niet breed genoeg gebruiken.

Zoals eerder vermeld in deze tutorial, de CSS Shapes -vorm binnen eigendom, waardoor we inhoud in een element kunnen omwikkelen en vormgeven, op het ijs zijn gezet.
De CSS Shapes-specificatie biedt een afzonderlijke eigenschap met de naam shape-box om het Shape Box-model te definiëren, hoewel het op dit moment niet toepasbaar lijkt op browsers.
Safari vereist de -webkit- voorvoegsel, met de nadruk dat deze functie experimenteel is.

Niettegenstaande, ondanks de trage vooruitgang en ongelijkheid in browsers op dit moment, kijk ik uit naar CSS Shapes! Zodra de grote browsers het oprapen, kan ik niet wachten om een aantal echt creatieve lay-outs op het web te zien!

Web ontwerp