Esferas con CSS3

Que el CSS3 sólo este disponible en algunos navegadores es una limitación importante porque no cabe duda que es muy poderoso y en el momento en que se extienda su uso, el diseño de los sitios web cambiará radicalmente.

Este es un ejemplo de CSSplay que utiliza gradientes, colores en formato RGBA y bordes redondeados.

El resultado, solo es visible en Firefox, Safari y Google Chrome e incluso en esos navegadores, habrá algunas leves diferencias:

Esta imagen muestra la forma en que se vería en Firefox:

Y esta otra como se vería en Safari y Chrome:

Estas serían las definiciones de estilo del demo:

<style type="text/css">
.holder {
  text-align: center;
  background: #777;
  padding: 30px 60px;
  height: 140px;
  width: 320px;
  margin: 0 auto;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
  background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
  -webkit-border-radius: 36px;
  -moz-border-radius: 36px;
  border-radius: 36px;
}
.colwhite { background:white; }
.colyellow { background:yellow; }
.colbrown { background:brown; }
.colgreen { background:green; }
.colblue { background:blue; }
.colpink { background:pink; }
.colred { background:red; }
.colblack { background:black; }
.ball{
  display: block;
  width: 72px;
  height: 72px;
  float: left;
  margin-right: 5px;
  margin-bottom: 5px;
  -webkit-border-radius: 36px;
  -moz-border-radius: 36px;
  border-radius: 36px;
  background-image: -moz-radial-gradient(36px 10px 45deg, circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 50%, rgba(0,0,0,1) 80%);
  background-image: -webkit-gradient(radial,36 36, 72, 36 10, 0, from(rgba(0,0,0,1)), to(rgba(255,255,255,1)), color-stop(0.85, rgba(255,255,255,0)), color-stop(0.4, rgba(0,0,0,1)));
}
</style>

Y el HTML:

<div class="holder">
  <div class="ball colwhite"></div>
  <div class="ball colyellow"></div>
  <div class="ball colbrown"></div>
  <div class="ball colgreen"></div>
  <div class="ball colblue"></div>
  <div class="ball colpink"></div>
  <div class="ball colred"></div>
  <div class="ball colblack"></div>
</div>

Y el resultado sería este: