We use Cookies to help personalize and improve Roll20. For more information on our use of non-essential Cookies, visit our Privacy Policy here.
Accept
Advertisement Create a free account

Animated Tabs

1527185224

Edited 1527189959
DXWarlock
Pro
Sheet Author
API Scripter
Anyone thats using using Brians tabs: <a href="https://app.roll20.net/forum/post/882997/css-wizar" rel="nofollow">https://app.roll20.net/forum/post/882997/css-wizar</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; }
1527189777
Coal Powered Puppet
Pro
Sheet Author
This is awesome.&nbsp; Thanks!
1527201893
Vince
Pro
Sheet Author
Very cool.&nbsp; Does it also have sound effects?&nbsp; ;-P
1527222987
Gold
Forum Champion
I love it, but would like a little talking paper-clip to tell me which folder to click.
1527240747

Edited 1527240838
DXWarlock
Pro
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: