Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
D&D 2024 has arrived! Pre-order the new core rulebooks now and get an exclusive pre-order bonus for free!
Create a free account

Animated Tabs


Edited 1527189959
Sheet Author
API Scripter
Anyone thats using using Brians tabs: <a href="" rel="nofollow"></a>... I made some animated ones, I'm sure all the css wizards in here could do it without the 3 hours it took me to figure it out, but I thought it was amazing :) If you want to add them to your sheet, CSS is included (html is the same). div.sheet-tab-content { &nbsp; &nbsp; display: none; } div.sheet-tab-relative_main { &nbsp; &nbsp; position: relative; } input.sheet-tab1:checked~div.sheet-tab1, input.sheet-tab2:checked~div.sheet-tab2, input.sheet-tab3:checked~div.sheet-tab3, input.sheet-tab4:checked~div.sheet-tab4, input.sheet-tab5:checked~div.sheet-tab5 { &nbsp; &nbsp; display: block; } input.sheet-tab { &nbsp; &nbsp; width: 150px; &nbsp; &nbsp; height: 20px; &nbsp; &nbsp; position: relative; &nbsp; &nbsp; cursor: pointer; &nbsp; &nbsp; z-index: 1; &nbsp; &nbsp; opacity: 0; &nbsp; &nbsp; background:blue; } input.sheet-tab+span::before { &nbsp; &nbsp; content: attr(title); &nbsp; &nbsp; border: solid 1px black; &nbsp; &nbsp; text-align: center; &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; color: #eee; &nbsp; &nbsp; width: 149px; &nbsp; &nbsp; height: 25px; &nbsp; &nbsp; font-weight: bold; &nbsp; &nbsp; font-size: 18px; &nbsp; &nbsp; text-shadow: -1px -1px 0 #222, 1px -1px 0 #222, -1px 1px 0 #222, 1px 1px 0 #222; &nbsp; &nbsp; position: absolute; &nbsp; &nbsp; top: auto; &nbsp; &nbsp; left: 10px; &nbsp; &nbsp; background-color: #4f82af; &nbsp; &nbsp; transition: height 1s; } input.sheet-tab:checked+span::before { &nbsp; &nbsp; background: -webkit-linear-gradient(top, #fefcea 0%, #f1da36 100%); &nbsp; &nbsp; color: #000000; &nbsp; &nbsp; height:34px; &nbsp; &nbsp; background-color: #f1da36; &nbsp; &nbsp; text-shadow: 0px 0px 0 #fff; } input.sheet-tab:not(:checked)+span::before { &nbsp; &nbsp; transition: height 1s, background-color 5s ease; } input.sheet-tab2+span::before { &nbsp; &nbsp; left: 160px; } input.sheet-tab3+span::before { &nbsp; &nbsp; left: 310px; } input.sheet-tab4+span::before { &nbsp; &nbsp; left: 460px; } input.sheet-tab5+span::before { &nbsp; &nbsp; left: 610px; } div.sheet-tab-content { &nbsp; &nbsp; border: 1px solid #bcbcbc; &nbsp; &nbsp; margin: 2px 2px 2px 2px; &nbsp; &nbsp; padding: 2px; }
This is awesome.&nbsp; Thanks!
Sheet Author
Very cool.&nbsp; Does it also have sound effects?&nbsp; ;-P
Forum Champion
I love it, but would like a little talking paper-clip to tell me which folder to click.

Edited 1527240838
Sheet Author
API Scripter
Gold said: I love it, but would like a little talking paper-clip to tell me which folder to click. Somehow I think my players already have one as a browser add-on: