JavaScript + Ajax 実践サンプル集 - CSS3でボックスを3Dの円球に変える

CSS3でボックスを3Dの円球に変える

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、CSS3のスタイルシート(radial gradient overlays)を利用してボックスを3Dの円球に変えます。このサンプルは、Firefox, Safari/Chrome用に最適化されています。IE8で表示すると円が四角になります。

このサンプルを編集して試してみる

FirefoxとSafari/Chromeでは、異なるスタイルを宣言する必要があります。

.ball
{
  display: block;
  width: 72px;
  height: 72px;
  float: left;
  margin-right: 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)) );
}

CSS部HEAD部BODY部

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
.holder
{
  text-align: center;
  background: #040;
  padding: 30px 60px;
  height: 72px;
  width: 616px;
  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;
  -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)) );
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
<link href="DhtmlAdvanced/css3Spheres/style.css" rel="stylesheet" type="text/css" />

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
<div id="wrapper">
  <div id="info">
    <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>
    <br />
    <p style="float:right; margin: 10px;" >
      source: <a href="http://cssplay.co.uk/">cssplay.co.uk</a></p>
  </div>
</div>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

CSS3でボックスを3Dの円球に変える

JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

CSS3でボックスを3Dの円球に変える

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!