Single post in Free CSS, Userscripts, etc
Forum Index > Other > Other Art > Free CSS, Userscripts, etc >
Hi! Someone asked me how the template works where you can navigate left and right with arrows. I'm not sure what the best way to explain it - if I explain it line by line it may be too dense to read. But if you'd prefer that kind of post I'll make it!
I think I'll try to give a basic rundown of what's happening, and a very minimal, commented version of the CSS. I think that'll make it easier to try it out yourself and use it for your own templates.
As always if you have any suggestions, questions or you get stuck please post and I'll try my best to explain.
It is actually a .tabbed_interface. Usually when you click the n-th tab it takes you to the n-th page. We use CSS selectors to identify two special tabs:
- One
- Two
- Three
- Four
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam placerat tempor felis vitae consequat. Donec at sapien sapien. Nulla lectus ipsum, ultricies id maximus eget, luctus id tellus.
Donec pellentesque ligula sit amet purus efficitur suscipit. Nunc nisi arcu, vulputate vel tortor et, volutpat malesuada lorem.
Etiam fermentum erat ac ultrices elementum. Ut at nibh justo. Vestibulum odio orci, sodales eu sapien et, consequat viverra risus.
Duis posuere sem enim, sit amet iaculis purus accumsan finibus. Proin ante arcu, ullamcorper a neque in, tempor ultricies metus. Donec at ipsum interdum, elementum mauris quis, efficitur dolor.
[sc=tabbed_interface horizontal]
[ul]
[li]One[/li]
[li]Two[/li]
[li]Three[/li]
[li]Four[/li]
[/ul]
[sc=tab]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam placerat tempor felis vitae consequat. Donec at sapien sapien. Nulla lectus ipsum, ultricies id maximus eget, luctus id tellus.[/sc]
[sc=tab]Donec pellentesque ligula sit amet purus efficitur suscipit. Nunc nisi arcu, vulputate vel tortor et, volutpat malesuada lorem.[/sc]
[sc=tab]Etiam fermentum erat ac ultrices elementum. Ut at nibh justo. Vestibulum odio orci, sodales eu sapien et, consequat viverra risus.[/sc]
[sc=tab]Duis posuere sem enim, sit amet iaculis purus accumsan finibus. Proin ante arcu, ullamcorper a neque in, tempor ultricies metus. Donec at ipsum interdum, elementum mauris quis, efficitur dolor.[/sc]
[/sc]
[style]
/* ignore whitespace between elements */
.tabbed_interface {
white-space: nowrap;
&>ul>li,
&>div {
white-space: pre-line;
}
}
/* reset styles */
.tabbed_interface,
.tabbed_interface > ul,
.tabbed_interface > ul > li,
.tabbed_interface > div {
padding: 0;
margin: 0;
background: none;
box-shadow: none;
border: none;
border-radius: 0;
}
.tabbed_interface {
--tab-height: 50px;
--tab-width: 50px;
& > ul {
position: relative;
min-height: var(--tab-height);
/* previous tab */
& > li {
position: absolute;
height: var(--tab-height);
width: var(--tab-width);
background: black;
color: white;
}
/* current tab */
& > li.tab-active {
display: none;
}
/* next tab */
& > li.tab-active + li {
left: 50px;
}
/* after the next tab */
& > li.tab-active + li ~ li {
display: none;
}
}
}
[/style]
It is actually a .tabbed_interface. Usually when you click the n-th tab it takes you to the n-th page. We use CSS selectors to identify two special tabs:
- The tab right before the current tab. This will be the left arrow.
- The tab right after the current tab. This will be the right arrow
Avatar by Kaelwolfur.
Sent from my PokéNav