demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

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 from Star Wars. 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 three known bodies in the outer solar system with active volcanoes, the other two being the moons of Io and Triton. 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.

Enceladus

Discovered by Fredrick William Herschel in 1789, tiny Enceladus is one of only three known bodies in the outer solar system with active volcanoes, the other two being the moons of Io and Triton. 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.

Content Tabs With :target

css / navigation

Estimated reading time: 1 minute, 48 seconds

“Tab” navigation for a site is easy to create with , and you can use PHP or JavaScript to bring the link representing the current page to greater prominence. More complex is an “in-page” content tab system, in which the goal is to have a series of “slides” stacked on top of each other on a single page, with tabs to choose between them. It’s relatively easy to activate the slides when the user hovers over the tab, but changing the slides active on click is a bit harder to capture. Thankfully, there is a new CSS3 pseudo-element selector, :target, that can do 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. We’ll follow the basic markup of our simple image gallery example: the names of the moons are clickable definition terms, and our explanation and illustration of each is definition declarations.

<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:

dl#moons { position: relative; }
dl#moons dt { display: inline; }
dl#moons dt a { text-decoration: none; }
dl#moons dd { position: absolute; left: 0; background: #000; color: white; margin-left: 0; }
dl#moons dd p { text-align: justify; }
dl#moons dd img { width: 200px; height: 200px; float: right; margin: 20px; }
dd:target { z-index: 10; }

There are a few ways to explain target: you might think of it as the CSS equivalent to the for attribute in forms, except that it is used for everything else. Essentially it makes CSS aware of the relationship between id’s and links to those id’s, so that when links are clicked on we change the style of the target. In this case, we are altering the z-index of the target to an arbitrary number above 1.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.