Cool Bg

ubuntu-style bg with semi-transparent blue cricle

by James Doyle

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
  <div id="box">
      <p>Hey there. This is a little demo sentence.</p>
    </div>
</body>
</html>

CSS

body {
    background: #222 url(http://dl.dropbox.com/u/6913105/dotbg2.png);
}
#box p {
    font-size:3em;
    opacity:0;
    color: #fff;
    padding-top: 30%;
    -webkit-transition: all 1s ease;
}
#box {
    margin: 55px auto 0;
    height: 400px;
    width: 400px;
    text-align:center;
    background: hsla(192, 77%, 50%, 0.1);
    box-shadow: 0px 2px 10px #000;
    border-radius: 50%;
    -webkit-transition: all 1s ease;
}
#box:hover {
    background: hsla(192, 77%, 50%, 1);
    border-radius: 2%;
}
#box:hover p {
    opacity:1;
}