2010年10月アーカイブ

PerlでQRcode

| コメント(0) | トラックバック(0)

QRcodeが気になったのでCPAN module(GD::Barcode::QRcode)を用いて作ってみた。


webkit-transition

| コメント(0) | トラックバック(0)

まずは こちら のCSSで重要な役割を果たしているwebkit-transitionの話。


-webkit-transition

これは以下のような構文です。
-webkit-transition: <何を> <どれくらいの時間で> <どのように>

例えば
div.foo {
    opacity: 1.0;
    -webkit-transition: opacity 1s linear;
}
div.foo:hover {
    opacity: 0.0;
}
と書いた場合、'foo'というクラスを持ったdiv要素にマウスを乗っけた場合(クリックはせずポインタを乗せた状態)1秒を書けてdiv要素が透明になって消えていきます。

これは<opacity>について<1秒>で<線形>に変化させる事を示しています。

<どのように>については default, ease, ease-in, ease-out, ease-in-out, linearなどいろいろ有りますが違いについては、 このサイト を見るとよくわかると思います。

これから説明しますが、webkit-transformと組み合わせることでもっとダイナミックなことも可能です。

makritsmartjp.com/amadana ではページの移動や商品イメージのスライドをwebkit-transition: marginで対応しています。

ぜひいろいろと試してみてください!!
MakeitSmart!の開発メモなどを更新していきたいと思います。

このアーカイブについて

このページには、2010年10月に書かれたブログ記事が新しい順に公開されています。

次のアーカイブは2010年12月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。