CSS3: グローテキスト

最近、ちょこちょこ見かけるようになったグローテキスト。

Glow Text (リンク先で実際の動きを見れます)

.glow {
-webkit-animation-direction: alternate;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: glow;
}
@-webkit-keyframes glow {
0% {
color: black;
}
100% {
color: red;
}
}

ボタン周辺(box-shadow)を点滅させるのも同じ原理です。

jQueryを使ってトグルスイッチ

久しぶりのエントリーとなりました。なんとか生きてます。

jQueryのslidetoggleメソッドを使ってスライドするメニューを作ってみました。ボタンを押すと下へメニューがするするっと降りてくるものです。言葉では伝えにくいのでデモをご覧ください。また、サンプルファイルを用意してますのでご利用ください。

jquery-slidetoggle.png

デモを見る
サンプルをダウンロードする

これを作成しようと思ったきっかけは、コードエディタのEspressoがバージョンアップしたので、どのくらい機能向上したのかを確かめるためでもありました。印象は、いくぶんか安定性は増したもののまだまだ不安定な部分が見受けられます。かなり良い感じに仕上がってきているので残念です。

あと、コード補完を選択するショートカットキーに Control-N および Control-P が使えないのがすごく残念。これを変えられるだけでも印象はすごく変わってくるのになぁ。まだまだ、重要なドキュメントはCodaで編集することになりそうです。

CSSで画像を裏返す

スタイルシートだけでここまでできるようになるのですね。すばらしい!!

カーソルを画像の上に持っていくと画像が反転してテキストを表示してくれるという動作をします。ウィジェットの設定画面を表示する動作に似ています。ただ、このプロパティはここ最近リリースされたWebKit Nightly Buildでしか動作しません。Safari 4.0.2でも動作しないことを確認しております。