Gebruiker: Bmulckhu: verschil tussen versies
Uit MediaWikiGids
| Regel 17: | Regel 17: | ||
{{#widget:Style-1|css= | {{#widget:Style-1|css= | ||
.insetrectangle-40-40-40-40 { | .insetrectangle-40-40-40-40 { | ||
| − | clip-path: inset-rectangle( | + | clip-path: inset-rectangle(40px, 40px, 40px, 40px, 1px, 1px); |
| − | -webkit-clip-path: inset-rectangle( | + | -webkit-clip-path: inset-rectangle(40px, 40px, 40px, 40px, 1px, 1px); |
} | } | ||
.star { | .star { | ||
-webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); | -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); | ||
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); | clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); | ||
| + | } | ||
| + | .rect { | ||
| + | clip-path: rectangle(150px, 100px, 150px, 150px, 1px,1px); | ||
} | } | ||
}} | }} | ||
[[Bestand: Community02.png|300px|thumb|Werkt niet...|class=insetrectangle-40-40-40-40]] | [[Bestand: Community02.png|300px|thumb|Werkt niet...|class=insetrectangle-40-40-40-40]] | ||
| + | [[Bestand: Community02.png|300px|thumb|Werkt niet...|class=rect]] | ||
[[Bestand: Community02.png|300px|thumb|Werkt|class=star]] | [[Bestand: Community02.png|300px|thumb|Werkt|class=star]] | ||
Versie van 20 mei 2019 om 16:41
Bart Mulckhuijse - Beheerder van MediaWikiGids
Enkele tests met clipping:
Bron: https://css-tricks.com/clipping-masking-css/
NB: Let op de -webkit- prefix om de styling ook in Safari browser toe te passen
Om niet steeds (en site-wide) CSS aan Mediawiki:Tweeki.css toe te hoeven voegen, kunt je ook het widget:Style-1 gebruiken.