Solar System with CSS3

by Ravindra Athreya

HTML

<div class="wrap clearfix">
  
    <section>
        <header class="clearfix">
            <h4>Our Solar System</h4>
            <p>An experiment with CSS3 border-radius, transforms &amp; animations.</p>
            <p class="disclaimer">Animation properties currently only work on -webkit browsers (Chrome or Safari).</p>
        </header>
    </section>
  
    <section class="clearfix">
  
        <ul class="solarsystem">
          <li class="sun"><a href="#sun"><span>Sun</span></a></li>
          <li class="mercury"><a href="#mercury"><span>Mercury</span></a></li>
          <li class="venus"><a href="#venus"><span>Venus</span></a></li>
          <li class="earth"><a href="#earth"><span>Earth<span class="moon"> &amp; Moon</span></span></a></li>
          <li class="mars"><a href="#mars"><span>Mars</span></a></li>
          <li class="asteroids_meteorids"><span>Asteroids &amp; Meteorids</span></li>
          <li class="jupiter"><a href="#jupiter"><span>Jupiter</span></a></li>
          <li class="saturn"><a href="#saturn"><span>Saturn &amp; <span class="ring">Ring</span></span></a></li>
          <li class="uranus"><a href="#uranus"><span>Uranus</span></a></li>
          <li class="neptune"><a href="#neptune"><span>Neptune</span></a></li>
          <li class="pluto"><a href="#pluto"><span>Pluto</span></a></li>
        </ul>
        
        <ul id="descriptions">
            <li>
            <h2 id="sun">Sun</h2>
            <p>The Sun is a star, a hot ball of glowing gases at the heart of our solar system. Its influence extends far beyond the orbits of distant Neptune and Pluto. Without the Sun's intense energy and heat, there would be no life on Earth. And though it is special to us, there are billions of stars like our Sun scattered across the Milky Way galaxy.</p>
            </li>
            
            <li>
            <h2 id="mercury">Mercury</h2>
            <p>Sun-scorched Mercury is only slightly larger than Earth's Moon. Like the Moon, Mercury has...

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: #080e24 url(bg.jpg) repeat;
    color: #626668;
}

a[title]:hover:after{
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0; 
  top: 100%;
  white-space: nowrap; 
  z-index: 20px;
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px;  
  border-radius: 5px;  
  -moz-box-shadow: 0px 0px 4px #222;  
  -webkit-box-shadow: 0px 0px 4px #222;  
  box-shadow: 0px 0px 4px #222;  
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);  
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);  
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);  
}

div.wrap {
    width: 960px;
    margin: 0 auto;
    padding: 60px 0;
}
a.about, a.twitter {
    display: block;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #32312b;
    padding: 7px 28px;
    text-decoration: none;
    color: #eee5a2;
    font-size: 12px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-transition: all 0.15s ease-in;
    -moz-transition: all 0.15s ease-in;
    -o-transition: all 0.15s ease-in;
    transition: all 0.15s ease-in;
}
a.twitter {
       right: 220px;
}
a.about:hover, a.twitter:hover {
    background: #aa4200;
    color: #fff;
}
section {
    display: block;
    position: relative;
}
header {
    text-align: center;
}
header h1 {
    font-size: 126px;
    line-height: 1;
    color: #eee5a2;
    text-transform: uppercase;
    text-shadow: 5px 5px #32312b;
}
header p {
    font-size: 24px;
    color: #6a695f;
    margin: 0 0 10px;
}
header p.disclaimer {
    font-size: 13px;
   ...

JavaScript

$(function(){
            $('ul#descriptions h2').hover(function(){
              $('ul.solarsystem li.' + $(this).attr('id') ).toggleClass('active');
              
            })
          });