またまた昔書いたエントリーのサンプルを jsdo.it に移植しました.

元々のエントリーは『HTML5 と CSS3 で Web 制作』. 画像を使わずに, HTML5 と CSS3 のみでっぽいサイトを作成しています.

Step by Step 形式でまとめたので, 徐々に Web ページが出来ていく感じを 楽しんでもらえたらなとおもいます.

jsdo.it を使って作っています. fork してイジったり前回の step との差分を見たりと色々やれるので ぜひ活用して遊んで下さい!!

※サンプルの実行結果は jsdo.it の fullscreen モードで見てください!!

CSS3 で 3Dっぽいボールを作ってバウンドさせてみました.

元ネタは『CREATING AN ANIMATED 3D BOUNCING BALL WITH CSS3』です.

元ネタは英語なのと色々と説明を端折っていたので, 私なりに作っていく過程を jsdo.it を使って Step by Step 形式でまとめてみました.

正月に CSS3 で鏡餅の年賀状を作ったとき(こちら)は ちょっと苦労しましたが, 今回は見た目のわりには手間が少なかったのでぜひみなさんも作ってみてください.

すべて jsdo.it で作っているので実際に動かしたり, fork してコードをイジったりして遊んで下さい.

昔書いた HTML5 に関するエントリー 『HTML5 でコーディングしてみよう!』 のサンプルを jsdo.it に移植したので改めて解説します.

fullscreen 用に作ってあります. fork して色々イジって遊んでください.

Step by Step で HTML5 や CSS3 を学びたい方は過去に書いた『HTML5 と CSS3 で Web 制作』をどうぞ.

以前, 『CSS3 の text-shadow を使って文字を強調したり装飾したり』という エントリーを書いたときに改めて text-shadow の便利さに気付かされました.

より使いこなそうと, プレビューしながら値をいじれるツールを探したのですが, あるにはあるものの複数の text-shadow を指定できるようなツールはありませんでした.

なので, tmlib.js と dat.GUI を使って自分で作ってみました. よかったら使って下さい.

久々に CSS3 についてのエントリーです.

以前書いた, 『CSS3 の display:box; を使ったフレキシブルな段組みレイアウト』 が大変好評だったので, CSS3 関連のエントリーもちょくちょく投稿していこうかなと思います.

今回は, text-shadow についてまとめました. text-shadow はその名の通りテキストに影をつけるプロパティです.

しかし, そんな単純なプロパティだったらわざわざエントリーにしません. text-shadow プロパティはオフセット値やぼかし具合が指定可能であることはよく知られています. が, なんとこれいくらでも指定できちゃうんです!! コンマ区切りで!

複数の text-shadow を指定することで文字をぼかしたり強調したり光らせたり燃やしたりといったさまざまな装飾が簡単に行えます.

そんな活用例をサンプルとしてまとめましたのでよかったら参考にしてください.

昨日, コリスさんの記事で紹介されていた reveal.js に一目惚れしてしまったので使い方をまとめてみました.

reveal.js の使い方を reveal.js を使って解説しています. 簡単にオシャレでシンプルなプレゼンを作れるのでぜひ遊んでみてください.