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)を点滅させるのも同じ原理です。

<a 
  onclick="return confirm('メールソフトが起動します');" 
  href="mailto:email@example.com"
>電子メール</a>

ただ、あまり使いすぎるとうるさい仕様になるので程々に。

何が便利かといいますと、zen coding が使えること。この構文を覚える手間がありますが、習得してしまえば作業効率が格段に向上しますよ。CSS セレクタを理解しているとすぐに使いこなせるようになります。

他にも、コンテンツや要素の選択が簡単にできたり、選択した要素に親要素を追加したり、とかが簡単にできるようになります。わざわざマウスに持ち替える手間がなくて入力できます。

一例として、箇条書きリストを ul 要素でマークアップしてみましょう。

home
about
content

3行を選択した状態から Wrap With Abbreviation (control-shift-A) アクションを使います。コマンド実行シートが表示されるので

ul>li*>a

と入力して実行します。すると

<ul>
  <li><a href="">home</a></li>
  <li><a href="">about</a></li>
  <li><a href="">content</a></li>
</ul>

このように要素が補完された状態になります。ビデオを見るともっと理解が早まるかもしれません。

Demo video with current Zen Coding features

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

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

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

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

img {
  max-width: 100% !important;
  height: auto !important;
  width: expression(this.width > 540 ? 540: true); /*for ie6*/
}

これはウェブログへ画像を配置するときに画像サイズがコンテンツボックスを上回る時はサイズを調整して収まるようにするものです。

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

http://appling.jp/docs/flip-image.html

電線にTwitterBirdが止まっているイメージでタイトルバナー右横に設置しました。いかがでしょう? このアイコンをクリックすると、私のTwitterページへ移動するというものです。

さて、私のウェブログでは WordPress Child Theme を使っているのですが、設置方法をメモ代わりに書いておきます。

functions.php:

// add a Twitter Bird
function childtheme_twitterbird() { ?>
<div id="twitterbird">
  <a href="http://twitter.com/Pafuxu">
  <img src="twitter.png" width="80" height="80" /></a>
</div>
<?php }

add_action('thematic_header', 'childtheme_twitterbird');

style.css:

#twitterbird {
    position: absolute;
    top: 135px; right: 150px;
    z-index: 1000;
}

一つ前のエントリーで『ばび』さんから「マウスカーソルでさーっとなぞると」とアドバイスをいただいて文字色を変えるだけでは目立たないなぁと思えてきて、マウスオーバーすると文字を少しずらした方が目立つかもとやってみました。

li a:hover { margin-left: -5px; }
li a { -webkit-transition: margin-left 0.25s linear; }

右サイドメニューの「最近のエントリー」と「カテゴリー」に適用しているのでマウスオーバーして実際の動きを確かめてみてください。

a:link, a:visited { -webkit-transition: color 0.25s ease-in-out; }

a:hover セレクタを設定しているのであればプロパティを追加すればいいし、利用してなければ文字色を指定してこのままを書き入れましょう。上記をスタイルシートへ書き入れてください。

試しに、このウェブログのエントリー一覧でエントリータイトルやその他のハイパーリンクにマウスを近づけて動作を確認してみてください。

追記(2009-06-18): ばびさんからアドバイスをいただき、マウスイン/アウトで動作するように書き換えました。

練習サイト: 実践 CSS3 のまとめ

骨格が出来上がった状態で小休止。一応 W3C でチェックしてもらったら合格点をいただきました。後は、見た目をどうするかです。そのうち、ぼちぼちやっていこうと思います。