Template

Flip card

From Dogcraft Wiki

(base technically works but there is a lot of weirdness going on)
 
m (most of the wierdness should be goneish)
Line 43: Line 43:
</div>
</div>


</noinclude><includeonly><div class="flip-card mw-customtoggle mw-customtoggle-fliptrigger" style="perspective:1000px; display:inline-block;"><div class="{{{class|}}} flip-card-inner" style="transition: transform 0.8s; transform-style: preserve-3d; background-color:{{{background|#E9EDEF}}}; max-width:{{{width|300px}}}; border-radius:5px; {{{style|}}} {{#if:{{{link|}}}|box-shadow: 0 2px 3px rgba(85, 85, 85, 0.2), 0 0 0 1px rgba(85, 85, 85, 0.2); transition: box-shadow ease-in-out 0.2s;|}}"><div class="flip-card-front" style="max-width:300px; position:relative;">[[File:{{{file|File missing}}}|frameless|{{{width|300px}}}]]{{#if: {{{link|}}}|[[{{{link|Main_Page}}}|<span class="{{{linkclass|}}}" style="position:absolute; width:100%; height:100%; top:0; left:0;"></span>]]|}}
</noinclude><includeonly><div class="flip-card mw-customtoggle mw-customtoggle-fliptrigger" style="perspective:1000px;"><div class="{{{class|}}} flip-card-inner" style="height:100%; transition: transform 0.8s; transform-style: preserve-3d; background-color:{{{background|#E9EDEF}}}; max-width:{{{width|300px}}}; {{{style|}}} {{#if:{{{link|}}}|box-shadow: 0 2px 3px rgba(85, 85, 85, 0.2), 0 0 0 1px rgba(85, 85, 85, 0.2); transition: box-shadow ease-in-out 0.2s;|}}"><div class="flip-card-front" style="max-width:300px; position:relative; outline:solid #8b0024 4px; border-radius:5px; height:100%; overflow:clip;">[[File:{{{file|File missing}}}|frameless|{{{width|300px}}}]]<span style="position:absolute; top:0; left:0; height:100%; width:100%;"></span>
{{Header|{{{title|Title}}}|margin=margin:0; height:100%;}}</div>
{{Header|{{{title|Title}}}|margin=margin:0; height:100%;}}</div>
<p style="overflow:clip; padding:0 5px; -webkit-backface-visibility:hidden; backface-visibility:hidden; transform:rotateY(180deg); position:absolute; top:0; left:0; background:inherit; outline:solid #8b0024 4px; border-radius:5px; max-height:100%;" class="flip-card-back">{{{content|}}}</p>
<div style="overflow:clip; padding:0 5px; -webkit-backface-visibility:hidden; backface-visibility:hidden; transform:rotateY(180deg); position:absolute; top:0; left:0; background:inherit; outline:solid #8b0024 4px; border-radius:5px; height:100%;" class="flip-card-back">{{{content|}}}{{#if: {{{link|}}}|[[{{{link|Main_Page}}}|<span class="{{{linkclass|}}}" style="position:absolute; width:100%; height:100%; top:0; left:0;"></span>]]|}}</div>
</div></div><span class="mw-collapsible" id="mw-customcollapsible-fliptrigger"></span></includeonly>
</div><span class="mw-collapsible" id="mw-customcollapsible-fliptrigger"></span></div></includeonly>

Revision as of 00:56, 19 April 2022

This page was last modified on 19 April 2022, at 00:56. (11 months ago)
Background Dragon Slayer - Retriever by Ironboundred