Titan
Titan

Saturn's largest moon is unique in several respects: it is the only known satellite in the solar system to have a dense atmosphere (one primarily composed of nitrogen), and the only known to have lakes on its surface (as it is far too cold to support liquid water, these bodies are liquid methane).

Titan was discovered in 1655 by the Dutch astronomer Christiaan Huygens. Today, the moon is considered by many scientists to be a possible habitat for non-terrestrial life. Its atmosphere is similar to that of the early Earth, and the potential of an "underground sea" of liquid water, along with tantalizing chemical imbalances in the atmosphere and crust, suggest that simple life may be present, operating in a methane, rather than water-based, environment.

Iapetus
Iapetus

Iapetus, the third largest moon of Saturn, is fascinating both tonally and morphologically: its stretched shape and equatorial ridge cause it to resemble nothing so much as a walnut, while the extreme difference in albedo between one hemisphere and the other bring to mind an Oreo cookie. It also has a significant crater, Turgis, that is nearly 40% of the moon's diameter, with a rim scarp that towers 15 kilometres high.

Mimas
Mimas

Mimas was discovered by William Hershel, the same year as Enceladus. The most remarkable feature of Mimas is its massive primary impact crater, which from certain angles causes the moon to look very much like the Death Star. The crater, named after its discoverer, is over 130 kilometres across: if a crater of equivalent scale was formed on Earth, it would be wider than Canada.

Mimas is also remarkable for the fact that it is the smallest object in the solar system to have formed into a sphere under the influence of its own self-gravitation.

Enceladus
Enceladus

Discovered by Fredrick William Herschel in 1789, tiny Enceladus is one of only four known bodies in the outer solar system with active volcanoes, the other three being the moons of Io, Triton and possibly Titan. In the case of Enceladus, these are cryovolcanoes: eruptions of water, nitrogen and ammonia, rather than molten rock.

Just 500 kilometres in diameter, Enceladus is far too small to generate its own heat. Instead, its geological activity is mostly likely caused by its orbit around Saturn, with the gas giant constantly pulling and squeezing on the small satellite, warming the interior of the moon.

As a source of water, Enceladus is conjectured to harbour life, while also being the wellspring for the ice crystal content of Saturn's E ring.

The appearence of “tab” navigation is relatively easy to create, but making a tab bring up its own content without moving to a new page is more complex, especially if you want to activate it on click, rather than hover… particularly if you are determined to only use CSS. Thankfully, the :target selector can do much of the work for us.

First, let’s create some basic markup. Let’s say we were going to create a series of slides about some of Saturn’s moons: Titan, Mimas, Enceladus and Iapetus. I’ll use markup similar to the simple CSS image gallery: the names of the moons are clickable definition terms, and the explanation of each is a definition declaration. 

<dl id="moons">
	<dt><a href="#titan">Titan</a>
	<dd id="titan"><img src="titan.jpg" alt="Titan">
		<p>Saturn's largest moon is unique in several respects.
	</dd>
	<dt><a href="#iapetus">Iapetus</a>
	<dd id="iapetus"><img src="iapetus.jpg" alt="Iapetus">
		<p>Iapetus is the third largest moon of Saturn.</p>
	</dd>
</dl>

Note the id value on each <dd>, and the href links within each <dt>. These go to anchor links, just as we have explored in the past. Next, the associated CSS to produce the basic appearance of the tabs: I've written this in Sass, but vanilla CSS would work too: 


$bgcolor: #222;
* {
	box-sizing: border-box;
}
body {
	margin: 3rem;
	background: $bgcolor;
}
dl#moons { 
	line-height: 1.5;
	font-family: Avenir, sans-serif;
	position: relative;
	width: 50rem;
		dt { 
			display: inline-block; 
			margin-right: .5rem;
			position: relative;
			z-index: 5;
				a { 
					text-decoration: none; 
					padding: 1rem;
					border: 1px solid black;
					background: #555;
					display: block;
					min-width: 8rem;
					font-weight: 600;
					border-radius: 10px 10px 0 0;
				&:hover, &:focus { 
					background: #222;
					}
				&:visited {
					background: #aaa;
					}
			}
		}

Then the <dd> elements and their content. I've added a border-top to the <dd> elements to provide the impression that the tabs are positioned above the <dd> tags; in reality, they both start at the same point. This is done to counteract the jump behavior associated with anchor links: without it, the page would scroll instantly to the position of the associated panels after a click, obscuring the tabs. As it is, activated tabs will always be forced to the very top of the page.

I've also provided the images with a circle wrap to make the best use of the limited space inside each info window. 

dd { 
	position: absolute; 
	left: 0; 
	margin-left: 0;
	top: 0;
	padding: 2rem 1rem 1rem 1rem;
	border-top: 3.6rem solid $bgcolor;
	width: 100%;
	background: #000;
	color: white;
	opacity: 0;
	transition: .3s opacity;
		a { 
			color: white;
		}
		img { 
			max-width: 100%; 
			float: right; 
			margin: 1rem;
			shape-outside: circle();
			}
		}
}

target makes CSS aware of the relationship between elements with id attributes and links to those elements. One opportunity this affords us to change the state of the target when the associated link is clicked on: in this case, its z-index and opacity: 

dd#titan:target, dd#iapetus:target, dd#enceladus:target,dd#mimas:target { 
	z-index: 4; 
	opacity: 1;
}

We could make any of the information windows appear by default by sharing the appropriate anchor in a URL; for example: http://thenewcode.com/291/Pure-CSS-Tab-Navigation#iapetus

Alternatively, we could use JavaScript to activate one of the tabs by default: 

document.querySelector('a[href="#titan"]').click();

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/GJdPeW