2016-04

スポンサーリンク
CSS

線上のグラデーションを表現する

linear-gradient()関数を利用すると、指定した色から色へ滑らかに変化する線形グラデーションを表現できます。この関数は、画像を扱えるプロパティとして指定する。 画像を扱えるプロパティすべてに指定できることに仕様上なってます...
CSS

子要素を透視図法で表示したり、要素の裏面の表示方法を指定する

視点の距離を指定することで子要素で透視図法で表示するときに利用するのがperspectiveプロパティです。perspective関数に似て言いますが、perspective()関数がその要素自体に適用されるのに対して、perspectiv...
CSS

3次元上で子要素の描画方法を指定する

3次元の変形効果においうて、親要素と子要素をどのような関係で表示するかを指定するときに、使用するのがtransform-styleプロパティです。 transform-styleプロパティ 設定値 説明 f...
CSS

要素に3次元の変形効果を付けてみる

transformプロパティを利用すると、要素のボックスに2次元、3次元の変形効果を適用できます。3次元変形では横(X軸)、縦(Y軸)、ブラウザ画面に垂直(Z軸)の方向に関して、移動、拡大・縮小、回転の変形効果を適用し、遠近法(透視図法)で...
CSS

要素に2次元の変形効果を付けてみる

transformプロパティを利用すると、要素のボックスに2次元、3次元の変形効果を適用できます。2次元変形では横(X軸)、縦(Y軸)の方向に関して、移動、拡大・縮小、回転,傾斜の変形効果を適用できます。変形の種類は下記の関数を利用します。...
CSS

アニメーションを実行方向を指定したり、停止したりする

アニメーションを逆再生 アニメーションを繰り返すよう設定した場合に、折り返して逆向きで実行する(逆再生)するかを指定できるのがanimation-directionプロパティです。 animation-directionプロパテ...
CSS

アニメーションの速度のパターンを設定する

animation-timing-functionプロパティを使うと、アニメーションを実行する速度のパターンを指定できます。animation-timing-functionプロパティは、アニメーション全体ではなく、キーフレームごとに適用さ...
CSS

アニメーションのキーフレームとアニメーション時間を設定する

トランジションの機能を拡張したもので、CSS3アニメーションという物があります。トランジションと同じようにプロパティの値を変化させることで効果を実現します。トランジションでは変化の始まりと終わりのスタイルのみを指定することに対して、アニメー...
CSS

トランジションの速度のパターンを設定する

transtion-timing-functionプロパティを使うと、変化する速度のパターンをしていできます。キーワード、step関数、cubic-bezier関数のいずれかで指定する。 transtion-timing-func...
CSS

トランジション効果を付けてみる

トランジション、遷移と言ったりします。トランジションとは、あるスタイルを別のスタイルへスムーズに変化させる効果のことです。FlashやJavaScriptを使用せずにスタイルの変化を表現できます。トランジションでは、プロパティの値を変化させ...
スポンサーリンク
タイトルとURLをコピーしました