スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSS3を使ってGoogle +1(プラスワン)ボタンを作ってみた

Googleがウェブサイトに設置できる「+1」(プラスワン) ボタンを公開したということで、早速このブログにも設置しました。で、何となくCSSだけで「+1」ボタンを作ってみました。

CSS3をいくつか使っているのでFirefox、Chrome、Safariでご覧ください。

+ 1

HTMLの構造はそんなに複雑ではないですが、こういうのを作ってみるといい勉強になりますね。

HTML
<div id="main">
  <div id="red"></div>
  <div id="blue"></div>
  <div id="green"></div>
  <div id="yellow"></div>
  <div id="plusone">
    <span id="plus">+</span>
    <span id="one">1</span>
  </div>
</div>

次はCSSです。CSS3でグラデーション、角丸、ボックスシャドー、テキストシャドーなどを描いているので、IEだとうまく表示されません。Operaもグラデーションやボックスシャドーはダメです。

使っている4色(赤、青、緑、黄)はGoogleのロゴより若干薄い気がします。

CSS
#main {
  width:500px;
  height:250px;
  color:#4169E1;
  line-height:100%;
  text-align:center;
  text-shadow:1px 1px 1px #aaa ,2px 2px 1px #aaa;
}
#red {
  width:125px;
  height:30px;
  float:left;
  background:#DC143C;
  border-radius:15px 0 0 0;
}
#blue {
  width:125px;
  height:30px;
  float:left;
  background:#4169E1;
}
#green {
  width:125px;
  height:30px;
  float:left;
  background:#32CD32;
}
#yellow {
  width:125px;
  height:30px;
  float:left;
  background:#FFD700;
  border-radius:0 15px 0 0;
}
#plusone  {
  width:498px;
  height:218px;
  background: -moz-linear-gradient(center bottom, #bbbbbb 0%,#dddddd 30%,#ffffff 100%);
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #bbbbbb),color-stop(0.30, #dddddd),color-stop(1, #ffffff));
  clear:both;
  -moz-box-shadow: inset 0 -5px 15px 5px #bbbbbb;
  -webkit-box-shadow: inset 0 -5px 15px 5px #bbbbbb;
  box-shadow: inset 0 -5px 15px 5px #bbbbbb;
  border-radius:0 0 15px 15px;
  border:1px solid #999;
}
#plus {
  font:bold 200px/100% Arial;
}
#one  {
  font:italic bold 220px/100% Arial;
  margin-left:-20px;
}

Googleはソーシャル系のサービスでいまいち結果を出せずにいますが、今回の「+1」はどうでしょうか。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
そうですね。
Googleは、ソーシャル系に関していつも後追いのような気がしますが。
今回は、どうなのでしょうかね?
【2011/07/01 10:18】 | rijitarou #- | [edit]
SNSのGoogle + も出ましたが賛否両論あるみたいですね。
何にしても後発は乗り換えるそれなりの理由がないと厳しいですよね~。
【2011/07/02 09:25】 | 管理人 #E2ywrYdA | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。