Maak alle blokjes na zoals op: sinds1971.nl/cssvoordedames
Good old float (right en left) werkt nog steeds prima als het over afbeeldingen gaat.
Voor lay-out wordt het eigenlijk alleen nog gebruikt als ook heel oude browsers ondersteund moeten worden. Grid, flexbox, positioning, transforms en een beetje columns maken daarvoor tegenwoordig de dienst uit.
Houdt caniuse.com in de gaten voor de support voor deze nieuwere methodes.
Je kunt elementen verplaatsen met transform. Met de translate functie zorg je ervoor dat je de elementen verplaatst t.o.v. hun eigen positie. Percentages refereren naar de maat van het element zelf.
De eerste <span> is 0.5em naar beneden en naar links verplaatst. De tweede <span> is 20% naar beneden en naar links verplaatst.
Nb. Inline elementen kunnen niet getransformeerd worden. Je kunt van die elementen de display property de value inline-block geven om dat op te lossen.
Je kunt elementen ook verplaatsen door de position property de value relative te geven. Die elementen kun je vervolgens verplaatsen met de properties: left, right, top en/of bottom.
Elementen verplaatst je t.o.v. van hun eigen positie. Percentages refereren naar de maat van de parent van het element.
De eerste <span> is 0.5em naar beneden en naar links verplaatst. De tweede <span> is 20% naar beneden en naar links verplaatst.
Nb. Top en bottom een percentage geven werkt alleen als de parent van het element een "expliciete" hoogte heeft.
Je kunt elementen ook verplaatsen door de position property de value absolute te geven. Die elementen kun je vervolgens verplaatsen met de properties: left, right, top en/of bottom.
Elementen verplaatst je t.o.v. de eerste (grand)parent die zelf gepositioneerd is. Percentages refereren naar de maat van die eerste (grand)parent.
Elementen worden uit de normale flow gehaald. Dit houdt o.a. in dat de ruimte die een element innam wordt vrijgegeven.
De eerste <span> is 0.5em naar beneden en naar links verplaatst. De tweede <span> is 20% naar beneden en naar links verplaatst.
The shape-outside property controls how content will wrap around a floated element’s bounding-box. Typically this is so that text can reflow over a shape such as a circle, ellipse or a polygon.
It’s important to note that this property will only work on floated elements for now, although this is likely to change in the future. The shape-outside property can also be manipulated with transitions or animations.
The shape-outside property controls how content will wrap around a floated element’s bounding-box. Typically this is so that text can reflow over a shape such as a circle, ellipse or a polygon.
The basic-shape CSS data type represents a shape used in the clip-path, shape-outside, and offset-path properties.
The shape-outside property controls how content will wrap around a floated element’s bounding-box. Typically this is so that text can reflow over a shape such as a circle, ellipse or a polygon.
This polygon function creates any shape that has three or more vertices. It’s important to note that if this property is going to be animated it requires the same number of vertices when you declare the animated state.
