α-wwwiki

user:none (1670 bytes)

{div {@ style="
  width:500px; 
  color:white; 
  text-align:center; 
  padding:10px; 
  margin:20px auto;
  border-radius:10px; box-shadow: 0 0 15px black;
  background:   -moz-radial-gradient(50% 50%, circle, white 0%, black 150%);
  background:-webkit-radial-gradient(50% 50%, circle, white 0%, black 150%);
  "} 
  {img {@ src="data/farnsworth_view.jpg" width="300" title="Farnworth"}}
  {br}
  Look, it's a box that looks like it's was convex!
  It's all an illusion though, it's just a circle gradient inside.
}

{div {@ style="
  width:500px; 
  color:white; 
  text-align:center; 
  padding:10px; 
  margin:20px auto;
  border-radius:2px; box-shadow: 0 0 15px black;
  -moz-transform:rotate(-3deg); 
  -webkit-transform:rotate(-3deg); 
  background:-moz-radial-gradient(50% 50%, circle, black 0%, white 100%);
  background:-webkit-radial-gradient(50% 50%, circle, black 0%, white 100%);
  "}
  {img {@ src="data/farnsworth_view.jpg" width="300" title="Farnworth"}}
  {br}
  Look, it's a box that looks like it's got lifted corners!
  It's all an illusion though, it's just an inverse circle gradient inside.
}

{div {@ style="
  width:500px; 
  color:white; 
  text-align:center; 
  padding:10px; 
  margin:20px auto;
  border-radius:2px; box-shadow: 0 0 15px black;
  background:-moz-radial-gradient(50% 50%, circle, black 0%, white 100%);
  background:-webkit-radial-gradient(50% 50%, circle, black 0%, white 100%);
  -moz-transform:skew(-0deg, 10deg);
  -webkit-transform:skew(-0deg, 10deg);
  "} 
  {img {@ src="data/farnsworth_view.jpg" width="300" title="Farnworth"}}
  {br}
  The same with a skew effect.
}