[Compass,CSS3]CompassのCSS3モジュールをまとめてみた(2)

予定は未定でしたが2度めの更新ですよ。

今回は「あ~見たことある~」的なところでいくつかピックアップしてみました。

時間的変化 transition

↓↓↓コンパイル後↓↓↓

値がある場合

↓↓↓コンパイル後↓↓↓

値を入れる場合は

transition-durationのあとにtransition-delayを書くのがポイント。

グラデーション linear-gradient , radial-gradient

↓↓↓コンパイル後↓↓↓

linearは値なしの場合はなく()内の値を「開始位置(left,center,right,top,bottom)と角度(deg)、開始色、途中色、終了色)」を書くことでカスタマイズできます。
radialも値なしの場合はなく()内の値を「開始位置(left,center,right,top,bottom)と角度(deg)、形状(circle,ellipse)、開始色, 途中色, 終了色」を書くことでカスタマイズできます。

透明度 opacity

↓↓↓コンパイル後↓↓↓

まとめ

今回はまーまー使う中でもベンダープレフィックスが面倒なものをピックアップしてみました。
これだけでも作業効率は格段にあがるんじゃないでしょうか?

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク