CSS3 とほんのちょっとの JavaScript で雪を降らす – クリスマス Ver.

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

クリスマスが近づくにつれて, 昔書いたエントリー『CSS3 とほんのちょっとの JavaScript で雪を降らす』へのアクセス数が増えてってたので, クリスマスバージョンを作って見ました.(とはいってもジングルベルが流れるだけですが…)

-webkit-animation を使っているので webkit 系(chrome や safari)でしか動作しません.

Read More

CSS3 の Transforms プロパティを使って簡単 3D Cube 表示

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

Chrome が version 12 になったときにテンションが上がって作ったサンプルです.

それまでは Safari でしかサポートされていなかった CSS3 による Z軸の奥行き表現が Chrome でも使えるようになり, より CSS3 による豊かな表現が可能になりました.

作ったのはよかったのですが, それから仕事が忙しくなり半年間放置してたってのは反省…

iPhone でも普通に動くのでよかったら参考までに. iPhone は webkit をサポートしてない(正確にはネイティブ起動のsafariでは動くらしいが…)ので標準での 3D 表現って意味では唯一の方法かも.

Read More

CSS3 の HSL を使って汎用的な Web デザイン

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

前回に引き続き HSL についてです.

CSS3 の HSL を使って, 簡単に色調整ができる Web ページを作ってみました.

処理コストは度外視しています.

Read More

CSS3 で追加された HSL の使い方

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

CSS3 から色指定に HSL 色空間が追加されました. ここ最近は, ほぼ色指定には RGB ではなく HSL を多用するようになったので ざっくりとまとめました.

視認性を意識した色指定を直感的にできるのでぜひ使ってみてください.

Read More

HTML5 と CSS3 で Web 制作 : Step08 – wordpress で使えるようテーマ化

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

最後の最後は wordpress のテーマ化についてです. 詳しい説明はしません.

1Step 1Step 少しずつサイトを作ってきました. この流れて制作すれば簡単に wordpress へのテーマとして流用できますよ. っという軽い紹介です.

テーマはダウンロードできるようにしているので, wp のサイトを持っているかたはぜひ適応させて遊んでみてください.

thumb

Read More