サイト内検索:

ピュアCSS3で実装されたGithubバッジがいろいろ使えそう。

You may have noticed my "Fork me on Github!" badge in the upper left corner. Are you using Safari? Great. Try to hover over it with your mouse. The badge will turn around and switch to its backside. For Chrome and Firefox 4.0 users, there's a fading between both sides. All other browsers will see just a switch without any transition.

ということで時々サイトの右上や左上にこんな感じのバッジというか装飾を見ることがあるかと思います。

それをCSS3で実現したのがこれです。

3d Github badge with pure CSS3 ··· Nico Hagenburger

CSS3に実装度合いによって動きが違うらしく、Chromeの新しいやつとかFirefox 4だとマウスを重ねるとメッセージがフェードしながら切り替わるようです。

で、これはGithub用のバッジなんですが、基本的にはHTMLに

<a id="github" href="https://github.com/hagenburger">
  <span>Fork me on GitHub!</span>
  <span>Get free lemonade!</span>
</a>

と書いて、あとはリンク先記事に記載されているCSSファイルを読み込めばいいだけなので、リンク先URLとこの「Fork me on GitHub」と「Get free lemonade!」の部分を書き換えればいろいろ他でも利用できるのではないかと思います。

ちなみにCSS3の実装が遅れているIE8などで見るとどうなるか、というと、結果としては何も表示されません。ま、それはそれでいいことだと思います。

blog comments powered by Disqus

2011年アルファブロガー受賞

新着DVD

モバイル

Powered by Movable Type 6.1.2

ブログ内検索

BlogPeople ReviewMe!

このサイトのレビューとか応援コメントを書いてもらえると励みになります。

Affi☆List for Amazon

バナー広告

このブログ記事について

このページは、nagasawaが2011年1月12日 18:20に書いたブログ記事です。

ひとつ前のブログ記事は「NYTimes.comがディープリンク機能を提供すると同時にそれを実現するJS「Emphasis」をオープンソースに。」です。

次のブログ記事は「日本映画の1位は「悪人」 キネ旬ベストテン」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。