Vorlage:W502 pair: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
(Die Seite wurde neu angelegt: „Testbild <div class='testbild'><!-- --><onlyinclude><!-- Bilder -->{{#vardefine: img1 |{{{1|kasuga_lanterns3.jpg}}} }}<!-- -->{{#vardefine: img2 |{{{2|kas…“) |
|||
| (7 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 63: | Zeile 63: | ||
class | class | ||
| − | -->{{#vardefine:max|{{#if:{{{max|}}}|imax }}}}<!-- | + | -->{{#vardefine:max|{{#if:{{{max|}}}|imax }}}}<!-- |
| + | polygon | ||
| + | |||
| + | -->{{#vardefine:polygon1 | ||
| + | |calc({{{slashStart|15}}}% - .2rem) 0, 100% 0, 100% 100%, calc({{{slashEnd|5}}}% - .2rem) 100% | ||
| + | }}<!-- | ||
| + | -->{{#vardefine:polygon2 | ||
| + | |{{{slashStart|15}}}% 0, 100% 0, 100% 100%, {{{slashEnd|5}}}% 100% | ||
| + | }}<!-- | ||
| + | |||
| + | -->{{#vardefine:showPopup | ||
| + | | {{#ifeq:{{{noviewer|}}}|1 | ||
| + | | 0 | ||
| + | | {{{ref|0}}} | ||
| + | }} | ||
| + | }}<!-- | ||
| + | -->{{#vardefine:showPopup2 | ||
| + | | {{#var:showPopup}} | ||
| + | }}<!-- | ||
HTML | HTML | ||
| Zeile 72: | Zeile 90: | ||
grid-template-columns: {{#var:rw1}}fr {{#var:rw2}}fr; | grid-template-columns: {{#var:rw1}}fr {{#var:rw2}}fr; | ||
'> | '> | ||
| − | <div style='margin-right: calc(-10% - .1rem);'> | + | <div class=pairImg1 style='margin-right: calc(-{{{overlap|10}}}% - .1rem);'> |
{{Dia | {{Dia | ||
| img={{#var:img1}} | | img={{#var:img1}} | ||
| Zeile 82: | Zeile 100: | ||
| r={{#var:r1}} | | r={{#var:r1}} | ||
| b={{#var:b1}} | | b={{#var:b1}} | ||
| − | | | + | | showPopup={{#var:showPopup}} |
}} | }} | ||
</div> | </div> | ||
| − | <div style='margin-left: calc(-10% - .1rem); | + | <div class=pairImg2 style='margin-left: calc(-{{{overlap|10}}}% - .1rem); |
| − | clip-path: polygon( | + | clip-path: polygon({{#var:polygon1}}); |
| − | background: #ccc; | + | background: {{{slashColor|#ccc}}}; |
z-index:2; | z-index:2; | ||
'> | '> | ||
<div style=' | <div style=' | ||
| − | clip-path: polygon( | + | clip-path: polygon({{#var:polygon2}}); |
| + | transform: translateZ(0); | ||
'> | '> | ||
{{Dia | {{Dia | ||
| Zeile 102: | Zeile 121: | ||
| r={{#var:r2}} | | r={{#var:r2}} | ||
| b={{#var:b2}} | | b={{#var:b2}} | ||
| − | | | + | | showPopup={{#var:showPopup2}} |
| − | |||
}} | }} | ||
</div></div><!-- | </div></div><!-- | ||
| Zeile 111: | Zeile 129: | ||
-->{{#css: | -->{{#css: | ||
| + | .pairImg1 .scite-citeref-number { | ||
| + | float: left | ||
| + | } | ||
}}<!-- | }}<!-- | ||
Aktuelle Version vom 6. November 2023, 15:04 Uhr
Testbild
Parameter:
- Div: hell
- Bilder: rw, rh
- Bild1: 1, w1, rw1, rh1, t1, r1, l1, lr1
- Bild2: 2, w2, rw2, rh2, t2, r2, l2, lr2
- Text: 3, 4, caption, ref
rw1 und rw2 ändern die Proportionen, sollten aber zusammen 480 ergeben (500 - 4%)