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 .
×
Create a free account

Animated Tabs

1527185224

Edited 1527189959
DXWarlock
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; }
This is awesome.&nbsp; Thanks!
1527201893
vÍnce
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
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: