Gebruiker: Bmulckhu: verschil tussen versies
Uit MediaWikiGids
| (25 tussenliggende versies door dezelfde gebruiker niet weergegeven) | |||
| Regel 3: | Regel 3: | ||
[http://wiki.werkvanbart.nl Mijn persoonlijke website] | [http://wiki.werkvanbart.nl Mijn persoonlijke website] | ||
| − | [[ | + | Kladblok: |
| + | * [[{{FULLPAGENAME}}/kladblok1|Test maximale grootte importeren bestanden External Data]] | ||
| + | * [[{{FULLPAGENAME}}/kladblok2|POST voor PURGE]] | ||
| + | * [[{{FULLPAGENAME}}/kladblok3|Discord Widget]] | ||
| − | [[Bestand: Community02.png|class=clip-circle-60-c]] | + | Enkele tests met clipping: |
| + | |||
| + | Bron: https://css-tricks.com/clipping-masking-css/ | ||
| + | NB: Let op de <code>-webkit-</code> prefix om de styling ook in Safari browser toe te passen | ||
| + | |||
| + | [[Bestand: Community02.png|300px]] | ||
| + | [[Bestand: Community02.png|300px|class=clip-border-30-30-30-30]] | ||
| + | |||
| + | [[Bestand: Community02.png|300px|class=clip-circle-60-c]] | ||
| + | |||
| + | Om niet steeds (en site-wide) CSS aan Mediawiki:Tweeki.css toe te hoeven voegen, kunt je ook het [[widget:Style-1]] gebruiken. | ||
| + | |||
| + | {{#widget:Style-1|css= | ||
| + | .insetrectangle-40-40-40-40 { | ||
| + | clip-path: inset-rectangle(40px, 40px, 40px, 40px, 1px, 1px); | ||
| + | -webkit-clip-path: inset-rectangle(40px, 40px, 40px, 40px, 1px, 1px); | ||
| + | } | ||
| + | .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%); | ||
| + | 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); | ||
| + | } | ||
| + | .rect-2 { | ||
| + | -webkit-clip-path: polygon(20% 20%, 80% 20%, 80% 80%, 20% 80%); | ||
| + | clip-path: polygon(20% 20%, 80% 20%, 80% 80%, 20% 80%); | ||
| + | } | ||
| + | |||
| + | .crop-1 { | ||
| + | width: 150px; | ||
| + | height: 300px; | ||
| + | overflow: hidden; | ||
| + | } | ||
| + | |||
| + | .crop-1 img { | ||
| + | width: 400px; /* totale breedte van afbeelding achter clipping mask */ | ||
| + | height: 300px; /* totale hoogte van afbeelding achter clipping mask */ | ||
| + | margin: -100px 0 0 -50px; /* afsnijden van boven, afsnijden van links */ | ||
| + | } | ||
| + | |||
| + | .crop-2 { | ||
| + | width: 150px; | ||
| + | height: 300px; | ||
| + | overflow: hidden; | ||
| + | } | ||
| + | |||
| + | .crop-2 img { | ||
| + | margin: -100px 0 0 -50px; /* afsnijden van boven, afsnijden van links */ | ||
| + | } | ||
| + | }} | ||
| + | <div class="row"> | ||
| + | [[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 zoals inset...|class=rect-2]] | ||
| + | [[Bestand: Community02.png|300px|thumb|Werkt|class=star]] | ||
| + | </div> | ||
| + | == Cropping == | ||
| + | |||
| + | Met clipping blijft de afbeeldingen even groot... er ontstaat een witte rand. | ||
| + | Met behulp van CSS-cropping kan de afbeelding worden bijgesneden. | ||
| + | <div class="crop-1"> | ||
| + | [[Bestand: Community02.png]] | ||
| + | </div> | ||
| + | |||
| + | Met behulp van de wikitekst: | ||
| + | <pre> | ||
| + | .crop-2 { | ||
| + | width: 150px; | ||
| + | height: 300px; | ||
| + | overflow: hidden; | ||
| + | } | ||
| + | |||
| + | .crop-2 img { | ||
| + | margin: -100px 0 0 -50px; /* afsnijden van boven, afsnijden van links */ | ||
| + | } | ||
| + | </pre> | ||
| + | en | ||
| + | <pre> | ||
| + | <div class="crop-2"> | ||
| + | [[Bestand: Community02.png|400px]] | ||
| + | </div> | ||
| + | </pre> | ||
| + | Resultaat: | ||
| + | |||
| + | <div class="crop-2"> | ||
| + | [[Bestand: Community02.png|400px]] | ||
| + | </div> | ||
| + | |||
| + | |||
| + | Idee: Dit kan netjes in een sjabloon worden samengevoegd: | ||
| + | <pre> | ||
| + | {{crop | ||
| + | |vlgnr=2 | ||
| + | |bestand=Community02.png | ||
| + | |breedte=150px | ||
| + | |hoogte=300px | ||
| + | |schaal= 400px | ||
| + | |van_boven=100px | ||
| + | |van_links=50px | ||
| + | }} | ||
| + | </pre> | ||
| + | {{crop | ||
| + | |vlgnr=3 | ||
| + | |bestand=Community02.png | ||
| + | |breedte=150px | ||
| + | |hoogte=300px | ||
| + | |schaal= 400px | ||
| + | |van_boven=100px | ||
| + | |van_links=100px | ||
| + | }} | ||
| + | |||
| + | == Zoekformulier Adlib == | ||
| + | |||
| + | {{#widget:Adlib simple search}} | ||
Huidige versie van 14 mrt 2021 om 19:43
Bart Mulckhuijse - Beheerder van MediaWikiGids
Kladblok:
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.
Cropping
Met clipping blijft de afbeeldingen even groot... er ontstaat een witte rand. Met behulp van CSS-cropping kan de afbeelding worden bijgesneden.
Met behulp van de wikitekst:
.crop-2 {
width: 150px;
height: 300px;
overflow: hidden;
}
.crop-2 img {
margin: -100px 0 0 -50px; /* afsnijden van boven, afsnijden van links */
}
en
<div class="crop-2"> [[Bestand: Community02.png|400px]] </div>
Resultaat:
Idee: Dit kan netjes in een sjabloon worden samengevoegd:
{{crop
|vlgnr=2
|bestand=Community02.png
|breedte=150px
|hoogte=300px
|schaal= 400px
|van_boven=100px
|van_links=50px
}}
Zoekformulier Adlib