CSS styling is a complicated World Anvil function that offers you very tight management over what your world seems to be like—from particulars like textual content shade to the general theme of the world, and even animated parts. So if you wish to see what CSS is able to on World Anvil, listed here are a bunch of superior examples from our group!
CSS is a coding language used all all through the online, so it’s a complicated function! However you may nonetheless type your world with out CSS: Try our information to styling your world with out CSS.
1. Style-appropriate themes
Some of the necessary issues about visible type is carrying the world’s style and tone. A darkish theme with gothic letters? That’s darkish fantasy, or possibly noir. Translucent panels that appear to be holograms? Science fiction! The colours themselves additionally maintain a number of data; for instance, pastel colours are sometimes used for cozy fantasy. Our pre-made themes cowl the favored genres, however this can be a good place to begin in case you’re considering of designing your individual theme.
For instance, the Yonderverse, by Mochimanoban, has a really clear style in its theme. The title font, the sunshine blue theming, and the transparency and glow results all work collectively to provide this world a transparent futuristic look:
To make a theme that’s applicable to your world, begin by interested by what emotions you need your readers to have. Then, take a look at different worlds (and even web sites exterior of World Anvil) to know what design patterns are typical in your style.
2. Alternate themes
Inside a world you may also have variations to the primary theme for particular pages! For instance, within the Yonderverse, Mochimanoban used tropical-inspired colours for the planet of Hothiri and a gradient within the Glassy Trench to make the reader expertise the thought of diving into the depths of the ocean. Try the Yonderverse to see these examples!
Use the article-specific CSS to use distinctive kinds to a particular article. Examine the information to learn the way!
One other nice instance of different themes is Solaris, by nnie, the place she created a light-weight variant of her theme. In her case, she has set it so the world respects the browser’s theme desire, with an choice to let the person choose their most well-liked theme as effectively. Discover the theme switcher on the high left, and try Solaris to see it stay!
The theme selector is finished with subscriber teams! When a subscriber views a web page, a novel class is added to the web page, which means which you can type all the web page based mostly on which subscriber group the reader belongs to. Examine this Study web page for extra data.
Respecting the browser or working system desire is finished purely with CSS, so it’s past the scope of this weblog put up or our documentation. However try this web page from Mozilla’s CSS documentation to get began!
3. Elements that add to the article
Past the general CSS theme, you may also create particular elements that elevate the themes or story you’re telling in your article. There are such a lot of examples of this on World Anvil, however let’s check out a handful of them!
Interactive damaged mirror (kitoypoy)
In kitoypoy’s World of Wizard’s Peak, there’s an artifact often called the Cracked Mirror, which reveals alternate variations of themselves. So to drive the purpose house, kitoypoy recreated the mirror with CSS! Whenever you mouse over every of the shards, an alternate model of the character is revealed:
Try Concordant Academy of Command to observe the magic occur! (You’ll have to scroll right down to see the mirror)
Disorienting animation (Demongrey)
Of their article a couple of situation that causes excessive disorientation, Demongrey added a CSS animation impact to provide the reader an identical feeling. The phrases on the high of the article fade out and in of existence, turning into readable for only a second earlier than they develop into blurred once more:
Try “Misplaced” to see the animation in motion.
Interactive leaflet (Leijona)
Leijona, of their world of Nebelfels, determined to jot down an data sheet for college kids… and wrote it as in case you, the reader, was the scholar! In order that they used CSS to create a button that, when clicked, flips the data sheet so you may see what’s written on the opposite facet of the paper!
Try Scholar’s information to Tanningen to see it stay!
Portrait variants (eccbooks)
Eccbooks, creator of The Blood of Seven Queens, additionally used a flip animation, however in a very completely different method! His article concerning the Headless Horseman reveals a portrait of the character, and while you mouse over the portrait, it flips round to disclose what he regarded like earlier than his head was reduce off:
Try Headless Horseman and mouse over the character portrait to see the impact!
All of those examples, and every little thing else we’ll see on this weblog put up, makes heavy use of customized containers, which allow you to create distinctive CSS results in particular areas of the article. Examine to information to customized containers for particulars!
4. CSS styling to create further navigation instruments
World Anvil has a ton of instruments to arrange your content material, however you will get much more with artistic makes use of of CSS! Listed below are three superior examples from the group:
Navigation containers, aka navboxes (Nulcheck)
For those who’ve spent any period of time on Wikipedia, you’ve most likely seen these on the backside of many articles: a field full of hyperlinks to associated articles. These are nice to provide your readers a transparent sense of scope a couple of subject. For instance, you may have a navbox with all animals in your world sorted by class (i.e. mammals, reptiles, and many others) or by habitat. Or, like this instance by Nulcheck, a navbox with all areas of their world of Legends of the Dragonguard:
Try Ardenfell, by Nulcheck, (scroll to the underside) to see the navbox.
To construct a navbox, you’ll want a closely stylized desk. And, since tables on World Anvil can’t have merged cells, you’ll must insert tables inside tables to duplicate the impact of getting some cells be bigger than others. The consequence might be a really dense block of BBCode, so it’s really helpful to put all of this in a variable so you may insert the navbox anyplace with a single BBCode tag. Examine the information to tables and the information to variables for particulars!
Arrange your content material with tabs (Those2Nerds)
Tabs are an effective way to arrange items of content material of the identical kind as a result of they break down the data into smaller paragraphs that you just don’t even have to scroll down on to learn! On this character article by Those2Nerds, they use tabs to explain the connections between the character and numerous elements of the world (different individuals, areas, and even their RPG marketing campaign!):
Examine Angela, by Those2Nerds, (scroll to the underside) to see the tabs!
Historic occasions with mini-timelines (nnie)
World Anvil has a devoted timeline function that works nice to signify your world’s historical past, and even the historical past of a personality or location. However fairly often, particular person articles will solely point out two or three occasions, and that’s the place this mini-timeline can come in useful! On this article, nnie determined to current three main occasions associated to it like a timeline:
Examine the Scorching of Mercury, by nnie, to see it stay!
5. CSS and the Rule of Cool
There are such a lot of different issues you are able to do with CSS—we’ve barely scratched the floor. And typically, the one motive you have to use CSS is that it seems to be cooler that method. So, to shut this weblog put up, let’s check out a pair extra examples!
Hidden random tables (Catoblepon)
The world of Vaelis, by Catoblepon, is an interactive narrative story, and in one of many chapters they use a random desk to randomly decide the results of an occasion. Usually, random tables show each single choice and spotlight the consequence—however on this article, to maintain the thriller, they hid all choices besides the consequence! The article seems to be a lot cleaner this manner:
Try Tuskfair Ranch and click on the Roll button!
To do that, you’ll want to make use of interactive tables for the random desk mechanics, wrapped in a customized container that hides every little thing however the chosen choice.
Parallax results (Nulcheck)
Nulcheck, creator of Legends of the Dragonguard, has custom-made their homepage a lot it barely seems to be like a World Anvil world! Its most eye-catching function is the parallax impact: the foreground and background scroll at completely different speeds:
The impact solely works on the true web page, so be sure that to take a look at Legends of the Dragonguard to see it!
How are you utilizing CSS in your world? Go away a remark and share yours! Examine the information to CSS to study extra about utilizing CSS on World Anvil to type your world.
