Home
- Code:
<div id="sheet"><header>Sheet</header>
<section class="post-tab"><input type="radio" name="sheet-tabs" id="tab-splash" checked><label for="tab-splash"><img src="https://data.whicdn.com/images/316036591/original.gif"></label><article class="tab-content">THIS IS WHERE YOU PUT THINGS I GUESS</article></section>
<section class="post-tab"><input type="radio" name="sheet-tabs" id="tab-character"><label for="tab-character"><img src="https://media.discordapp.net/attachments/220987360228278272/538578456712183819/character.gif"></label><article class="tab-content">CHARACTER APP IF YOU WANT I GUESS</article></section>
<section class="post-tab"><input type="radio" name="sheet-tabs" id="tab-items"><label for="tab-items"><img src="https://media.discordapp.net/attachments/220987360228278272/538577895157792778/items.gif"></label><article class="tab-content">ITEMS AND WEAPONS AND STUFF I GUESS</article></section>
<section class="post-tab"><input type="radio" name="sheet-tabs" id="tab-story"><label for="tab-story"><img src="https://media.discordapp.net/attachments/220987360228278272/538576511083610132/story.gif"></label><article class="tab-content">STORY AND THREADS AND QUESTS AND ALL THAT GOOD STUFF</article></section>
<section class="post-tab"><input type="radio" name="sheet-tabs" id="tab-magic"><label for="tab-magic"><img src="https://media.discordapp.net/attachments/220987360228278272/538577144805195777/magic.gif"></label><article class="tab-content">MAGIC SPELLS AND SHIET</article></section>
</div>
<style>#sheet{animation: ripple 1.5s cubic-bezier(.19,1,.22,1) infinite;min-height:calc((80px + 5px) * 5 + 5px);width:calc(100% - 90px);position:relative;}#sheet header{white-space:nowrap;display:inline-block;padding:5px;color:azure;text-transform:full-width;font-variant:all-petite-caps;font-size:2rem;z-index:2;position:relative;background:rgb(9,9,25);width:100%;box-sizing:border-box;}#sheet input:not(:checked)~label~.tab-content{visibility:hidden;}#sheet input:not(:checked)~label{padding:0;height:80px;width:80px;}#sheet input:checked~label{padding:0;height:90px;width:90px;margin-top:-5px;margin-right:-5px;}#sheet input:not(:checked)~label img{filter:grayscale(100%);}.tab-content{background:rgba(9,9,12,0.3);color:azure;margin:5px;}.post-tab label{position:absolute;background:transparent!important;right:-85px;z-index:5;}.post-tab label img{height:100%;width:100%;}.post-tab label[for="tab-splash"]{top:5px;}.post-tab label[for="tab-character"]{top:calc(80px * 1 + 5px * 2);}.post-tab label[for="tab-items"]{top:calc(80px * 2 + 5px * 3);}.post-tab label[for="tab-story"]{top:calc(80px * 3 + 5px * 4);}.post-tab label[for="tab-magic"]{top:calc(80px * 4 + 5px * 5);}@keyframes ripple {0%{background-image:repeating-radial-gradient(#02225f,#0b1c5f,#021f5e,#02225f 10%);}10%{background-image:repeating-radial-gradient(#02225f,#0b1c5f,#021f5e,#02225f 20%);}20%{background-image:repeating-radial-gradient(#02225f,#0b1c5f,#021f5e,#02225f 30%)}30%{background-image:repeating-radial-gradient(#02225f,#0b1c5f,#021f5e,#02225f 40%)}40%{background-image:repeating-radial-gradient(#02225f,#0b1c5f,#021f5e,#02225f 50%)}50%{background-image:repeating-radial-gradient(#02225f,#0b1c5f,#021f5e,#02225f 60%)}60%{background-image:repeating-radial-gradient(#02225f,#0b1c5f,#021f5e,#02225f 70%)}70%{background-image:repeating-radial-gradient(#02225f,#0b1c5f,#021f5e,#02225f 90%)}85%{background-image:repeating-radial-gradient(#02225f,#0b1c5f,#021f5e,#02225f 100%)}100%{background:#0b1c5f}}</style>
Can't post it in the other thread, so I had to make a new one.
