CSS3 の text-shadow プロパティを編集, プレビュー, 生成できる Web ツール『text-shadow Generator』を作りました!!

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

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

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

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

Read More

CSS3 の text-shadow を使って文字を強調したり装飾したり

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

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

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

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

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

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

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

sample

Read More

オシャレなスライドショーを簡単に作れちゃう reveal.js の使い方を reveal.js を使って解説してみた.

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

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

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

追記: 『reveal.jsベースのプレゼンをWeb上で作れちゃうオンラインエディタ『rvl.io』の使い方をrvl.ioを使って解説してみた』というエントリーを公開しました. とても便利なので, よかったらこちらも参考にしてくださいな♪

http://tmlife-storage.googlecode.com/svn/trunk/reveal.js-guide/index.html#/

Read More

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