I'm literally a bunch of poorly-disguised slivers hiding in a hat and trench coat.

I enjoy making decks, but what I enjoy even more is making deck pages as I'm having a blast experimenting with CSS. Additioanlly, I love easter eggs. So I tend to hide them in all of my deck pages.

multimedia says... #1

Whoa, the 3D model of Atraxa is amazing. What a great site/resource for 3D models. Unfortunately, I don't think you're going to be able to use the awesome 3D model and also control it when it's split up in the panel-headings of the accordion :(

https://sketchfab.com/models/7b4d84cb93884c32b66eb876a35623ec/embed?autospin=0.2&autostart=1&preload=1

It's not an image therefore the background property in CSS can't recognize it. If you could find or create an animated .gif of the 3D model in action then you could use that as the background.


You can't split the 3D model among all the accordion panels and control it, but you can add it to a single panel within the accordion and control it.

<iframe width="640" height="480" src="https://sketchfab.com/models/7b4d84cb93884c32b66eb876a35623ec/embed?autospin=0.2&amp;autostart=1&amp;preload=1" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

This is an HTML iframe; HTML creates a separate page within the deck page which can go inside of a panel of the accordion. This iframe will mimic what you see when you go to the 3D model site to see and control the 3D model.

Use this code to add the iframe to a panel in the accordion:

===accordion
===panel:3D Model
<div class="3d-model">
<iframe width="640" height="480" src="https://sketchfab.com/models/7b4d84cb93884c32b66eb876a35623ec/embed?autospin=0.2&amp;autostart=1&amp;preload=1" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</div>
===endpanel
===endaccordion

I've wrapped the iframe in a div with class 3d-model. I've done this so you have more control of how the iframe fits into the panel. The iframe itself has attributes of width and height that can be changed. These are good to size the iframe, but putting it in a div gives you even more control over how it's placed into the panel.


February 8, 2019 9:49 a.m. Edited.

Please login to comment

Said on multimedia...

#1

Hello again my favorite mentor,

I come to you with yet another problem. I'm trying to embed the following 3D model into my accordion:

<div class="sketchfab-embed-wrapper"><iframe width="640" height="480" src="https://sketchfab.com/models/7b4d84cb93884c32b66eb876a35623ec/embed?autospin=0.2&amp;autostart=1&amp;preload=1" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

<p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;">
    <a href="https://sketchfab.com/models/7b4d84cb93884c32b66eb876a35623ec?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Atraxa, Praetors&#39; Voice</a>
    by <a href="https://sketchfab.com/Felipe.B.B?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Felipe.B.B</a>
    on <a href="https://sketchfab.com?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a>
</p>
</div>

My accordion's code is rather simple - mind you this is just a sample I have from another accordion I'll be basing this one off of:

@import url('https://fonts.googleapis.com/css?family=Trade+Winds'); /*Declared a new font*/

#custom .panel-heading {
    position: relative;
    height: 80px;
    z-index: 1;
}
 
#custom .panel-heading:after {
    background: url("https://sketchfab.com/models/7b4d84cb93884c32b66eb876a35623ec/embed?autospin=0.2&amp;autostart=1&amp;preload=1");
    

    background-size: 100% 524px;
    background-repeat: no-repeat;
    background-color: black;  
    content: "";
    padding: 0px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;  
}
 
#custom .panel-default:first-child .panel-heading:after { background-position: 100% -85px; }
#custom .panel-default:nth-child(2) .panel-heading:after { background-position: 100% -165px; }
#custom .panel-default:nth-child(3) .panel-heading:after { background-position: 100% -245px; }
#custom .panel-default:nth-child(4) .panel-heading:after { background-position: 100% -325px; }
  
#custom h4.panel-title {
    font-family: 'Trade Winds', cursive;
    font-weight: 950;
    text-shadow: 0 0 30px black;
    color: rgb (0,0,0); 
    text-align: center;
    padding-top: 20px;
}

.panel-title /*defines the size of the text on the accordion*/
{
	    font-size: 16px;
}
 
#custom .panel-default /*changes the opacity of the accordion background*/
{
background: rgba(71,61,50,0.5);
}

Is there any way to fit the previously mentioned image into my accordion code?

February 2, 2019 10:01 p.m.

Said on The Queen's Egg...

#2

Hey Nephs,

Many thanks for your comment. I love the Sliver tokens. So much so that I now play Brood Sliver every chance I get. I've only got one copy of Teferi's Protection and it's in my Dino deck. I'll give it a try in this deck at some point. Good suggestion though. Thanks again for commenting!

February 2, 2019 5:45 p.m.

Decks

The Predator of Predators

Commander / EDH* LVL_666

SCORE: 112 | 63 COMMENTS | 10859 VIEWS | IN 46 FOLDERS

The Queen's Egg

Commander / EDH LVL_666

SCORE: 331 | 462 COMMENTS | 55487 VIEWS | IN 190 FOLDERS

Finished Decks 7
Prototype Decks 3
Drafts 0
Playing since Apocalypse
Points 90
Avg. deck rating 152.67
T/O Rank 1127
Helper Rank 373
Favorite formats Commander / EDH
Good Card Suggestions 159
Venues Amazing Spiral, Titan Games & Hobbies, Games and Stuff, Comics to Astonish, Chesapeake Sports Cards, No Land Beyond, MTGFirst
Last activity 2 weeks
Joined 3 years