Share
In de vorige tutorial hebben we een glimp opgevangen van CSS Shapes, waarmee we de ware vorm van een element konden definiëren. We hebben de basis besproken; een cirkel maken en er een paar regels tekst omheen wikkelen. Laten we nu meer complexe vormen verkennen, waardoor onze paginalay-outs rijker en minder boxy worden.
Voorbij eenvoudige vormen zoals cirkels en rechthoeken die we ook kunnen maken polygonen; vormen bestaande uit meerdere (meestal vijf of meer) zijden, zoals een vijfhoek of een zeshoek. Om er een te maken, gebruiken we de CSS veelhoek() functie die meerdere door komma's gescheiden waarden gebruikt die de vormcoördinaten definiëren:
Accentsconagua
.vorm float: links; achtergrondformaat: bevatten; achtergrondherhaling: geen herhaling; marge: 30px; breedte: 265 px; hoogte: 265 px; vormmarge: 20px; .pentagon background-image: url ('... /img/pentagon.svg'); shape-outside: veelhoek (32px 126px, 163px 32px, 293px 127px, 244px 282px, 82px 281px); Met de bovenstaande code hebben we vijf coördinaten toegevoegd, waardoor een vijfhoekige vorm is gegenereerd. Als u een andere coördinaat aan de functie toevoegt, wordt de vorm omgezet in een zeshoek, een meer voor een zevenhoek, een andere voor een achthoek, enzovoort.
Het handmatig maken van een polygoonvorm is niet zo eenvoudig als het maken van een cirkel of een ellips, vooral als de polygoon complex is en tientallen coördinaten bevat. Gelukkig is er een handige tool die het maken van CSS Shapes intuïtiever maakt.
CSS Shapes Editor is een Chrome-extensie. Zodra u het hebt geïnstalleerd, wordt een nieuw tabblad met de naam vormen in DevTools onder de Elements tab, in lijn met de andere subtabbladen (stijlen, Computer, enz.)
De vormen tabblad bevat een -vorm buiten eigenschap gekoppeld aan een plus + teken om ons te helpen CSS Shape-functies toe te voegen. Laten we het selecteren veelhoek() en het element op de pagina, dan kunnen we beginnen met het tekenen van de vorm in de browser net als een grafische toepassing.
Terwijl we tekenen, werkt de browserextensie onze polygoonfunctie bij met de respectieve coördinaten van de getrokken vorm en voegt deze tegelijkertijd toe als een inline-stijl aan het element. Als u klaar bent, kopieert u de gegenereerde code en plakt u deze in uw stylesheet.
Gegenereerde polygooncoördinatenMet behulp van deze zelfde techniek kunnen we eenvoudig elke vorm of vorm tekenen en toepassen op onze webpagina, bijvoorbeeld:
Afbeelding van Drama toevoegen aan een regenachtige scène met Adobe PhotoshopEen andere mogelijke waarde die we kunnen gebruiken in de -vorm buiten propertyis het url () functie; dezelfde functie die we elders in CSS gebruiken om een achtergrondafbeelding toe te voegen. In dit geval de url () functie schakelt de -vorm buiten eigenschap om een elementvorm te definiëren op basis van de afbeelding.
U kunt ervoor kiezen om de url () functie in plaats van veelhoek() wanneer je een bijzonder complexe afbeelding hebt, met veel bochten en hoeken en je wilt dat je inhoud er soepel overheen gaat. Of, wanneer het gaat om door gebruikers gegenereerde inhoud waarin het definiëren van de vorm lastig kan zijn.
We gaan deze ara-papegaai van Unsplash gebruiken. Eerst moet u een versie met transparantie maken, bijvoorbeeld:
De vorm van onze ara papegaaiDe originele papegaaienafbeelding wordt als achtergrondafbeelding aan de container toegevoegd:
.container achtergrondherhaling: geen herhaling; background-image: url ('... /img/parrot.png'); Voor de vorm zelf voegen we dat toe aan een ander element in de container en deze keer gebruiken we een andere CSS Shape-eigenschap genaamd shape-beeld-drempel.
.vorm shape-marge: 15px; shape-outside: url ('... /img/parrot-shape.png'); shape-image-threshold: 0; Deze eigenschap stelt de drempel in van minimale transparantie die de vorm van de afbeelding bepaalt; er is een getal tussen nodig 0 naar 1 als de waarde. Dus als je een enigszins transparante afbeelding hebt, wil je deze misschien instellen 0.8 of 0.5. Daar hebben we onze waarde voor bepaald 0 omdat het gebied rond de papegaaienvorm volledig transparant is.
Het resultaat zou er ongeveer zo uit moeten zien:
Browserondersteuning voor CSS Shapes is redelijk; maar verwacht niet veel van Firefox, Internet, Explorer of Edge. Ook hebben we verschillende opties om op de vraag van Stephen in de vorige tutorial te antwoorden.
"Dit is een gave, maar oprechte vraag: wat is de fallback voor IE / FF? Het lijkt erop dat all-in gaan met een vormlay-out voor veel gebruikers op sommige rare plaatsen terecht zou komen. "- Stephen Bateman
Ten eerste kunnen we Modernizr gebruiken. Modernizr is een betrouwbare JavaScript-bibliotheek voor het testen van browsereigenschappen. Zorg ervoor dat u de CSS-vormen en de CSS toevoegen klassenoptie bij het downloaden van de bibliotheek. Vervolgens kunt u de opmaakstijlen opgeven wanneer CSS Shape niet wordt ondersteund, en wel als volgt:
/ ** * Wanneer de browser "CSS Shape" niet ondersteunt. * / .no-shapes .shape shape-outside: polygon (); / ** * Stijlen wanneer de browser "CSS Shape" ondersteunt. * / .shapes .shape
Als het laden van Modernizr te veel lijkt, omdat je alleen hoeft te testen of de browser CSS heeft ingeschakeld, kun je de volgende JavaScript-regels toevoegen.
if ('undefined' === type document.querySelector ('. shape'). style.shapteOutside) document.body.classList.add ('no-css-shape'); Elke eigenschap in CSS wordt geleverd met zijn equivalent onder het JavaScript-stijlobject, waardoor we dynamisch stijl via JavaScript kunnen toevoegen. Deze code detecteert of de browser de shapeOutside methode, en waar dat niet het geval is, voegen we de no-css-vorm klasse die we kunnen gebruiken om de fallback-stijlen toe te voegen.
.vorm shape-outside: polygon (); .no-shapes .shape
Ten slotte kunnen we de CSS gebruiken @ondersteuning syntaxis in het stylesheet, bijvoorbeeld.
@supports (shape-outside: circle ()) .shape shape-outside: circle ();
Het is aan u om te beslissen welke aanpak het beste bij uw project past.
Een groot voordeel van CSS Shapes is dat het een natuurlijke terugval heeft. Geen buistelevisie. Heb een vierkant. http://t.co/u9D6y6Apfc pic.twitter.com/mfg8BFTMgP
- Jen Simmons (@jensimmons) 11 februari 2015
In deze zelfstudie hebben we ontdekt hoe de. Te gebruiken veelhoek() functie in CSS Shape en hebben geleerd hoe we veelhoeken gemakkelijk kunnen tekenen met behulp van een Chrome-extensie. We hebben ook geleerd hoe we een afbeelding kunnen gebruiken om vormen voor ons te tekenen; vooral nuttig bij te complexe vormen. Tenslotte, ondanks de redelijke ondersteuning van CSS Shapes, hadden we het over het gebruik van sierlijke alternatieven voor niet-ondersteunde browsers.
