CSS3 でスターウォーズを再現

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

チャーンチャーーンチャンチャチャチャーンチャーンチャンチャチャチャーンチャンチャンチャチャーン♪♪

ってことで CSS3 でスターウォーズのあのシーンを再現してみました. Safari の専売特許だった perspective が, つい最近 Chrome でも使えるようになったので早速使ってみた次第です.

webkit のみ, つまり chrome と safari で動きます. あと音楽が流れるのでご注意ください.

Read More

CSS3 とほんのちょっとの JavaScript で雪を降らす

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

最近暑いですねぇ. ってことで雪を降らしてみました. 去年は, JavaScript と Canvas エレメントでこんなのを作りました.

今回は CSS3 とほんのちょっとの JavaScript コードで簡単にできます.

Read More

CSS コンポーネント化計画第一弾!! Button コンポーネント

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

CSS コンポーネント化計画第一弾!!(第一弾で終わるかもw) っということでボタンをコンポーネント化したいと思います. 作る前にコンポーネントについて少しだけ.

コンポーネント化に至るまで

みなさん, 毎回 Web ページを作るたびに HTML と CSS の同じようなコードを毎回書いていませんか? 私は書いていました. 同じコードを書くということはゲームプログラマにあるまじき行為です. いつも, もどかしさを感じながらコーディングをしていました.

速度を考えるとそのページに最適化されて最小限のコードであるにこしたことはありません. しかし, このハイスペック化の進んだこのご時世, 本当に速度を重視した作りである必要があるのでしょうか?

少なくとも私には必要ありません. CPU は i7, 16GB のメモリと SSD を搭載した私の PC ではちょっと重い程度のサイト ではビクともしません.(軽く自慢.スイマセン) まぁ通信速度の問題はありますがそのへんも最近は高速化が進んでいるので…

そこで, これからはスピードよりもユーザビリティの時代が来るのでは?. っと思い CSS のコンポーネント化をしていくことにしました. コンポーネント化とは構成要素という意味で, それ自体が独立していてそれらを組み合わせることで色々なモノを作ることができるもののことを指します.

簡単にいうとプログラミングでいうライブラリ化のようなものです. コンポーネントを使い回して楽して楽しい Web サイト創りをしましょう!!

今回は第一弾ということで頻繁に使用するボタンコンポーネントを作ります.

CSS3 をバリバリ使用しているので一部のブラウザ(IE)では正常に動作しない可能性があります. Chrome, firefox は確認済みです.

Read More

CSS3 を使って Mac の Dock っぽい表現

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

CSS3 のおかげでスゴイ表現が簡単できるようになりました. 今回はその中から, transition と display:box , gradient , box-reflect を使用して Mac の Dock っぽいものを作ってみました. もどきなので, 山なりに大きくはならずマウスが乗っているアイコンのみが大きくなります. JavaScript を一切使用せずにこういった表現ができるとは… いやぁ~CSS3 恐るべし!!

映り込み表現の為に使用している box-reflect は webkitのみで動作します.

Read More

CSS3 の transition プロパティでアニメーションさせてみよう!!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

CSS3 には transition というプロパティがあり, これを指定することで簡単にアニメーションを付けることができます. サンプルをいくつか作ってみたので参考までに.全て hover することで変化するようにつくっています.

他のCSS プロパティ同様(IE意外は)簡単に設定, 動作させることができるのでよかったら試してみてください. 実際にこのブログでも使っています.記事に hover した際に縁に表示される影や, サイドバーのリンクを hover した際の拡大などに使用しています.

Read More