webサイト制作の勉強|2018年9月クラス用ブログ

webサイト制作の勉強に関する解説ブログです。

jqueryでのパララックス

パララックスとは、視差効果のことです。
Webデザインにおけるパララックスはスクロールなどの動作に応じて、複数のレイヤー(層)にある要素を異なるスピードで動かすことで、「立体感や奥行きを演出」、「フェード・拡大縮小・回転などの視覚的エフェクト」を演出する手法を指します。




最近は一時期よりは減りましたが、シングルページの縦長ページではまだまだ見かけるデザインです。
シングルページはページデザインが単調になりがちなので、パララックスやスクロールアニメーションを使って、アイキャッチを作りましょう。


pogg-sweetpotatopie.com




on-ze.com

background-clipとtext-fill-colorを使ってcssを使って文字で画像を切り抜く

以前、Photoshopクリッピングマスクを使い、文字で画像を切り抜く加工を行いましたが、css3の「background-clip」と「text-fill-color」を使う事で同じような表現が出来るようになります。

background-clip

background-clipプロパティは、背景の適用範囲を指定する際に使用します。テキスト部分に背景画像を適応させたい場合、

-webkit-background-clip: text;

と指定します。
※注意 2017月12月現在、-webkit-のベンダープレフィックスが記述が必要です。



さらに

-webkit-text-fill-color: transparent;


codepen.io

画像や要素をcssでクリッピングする「clip-path」

clip-pathプロパティ

clip-path CSS プロパティは要素のどの部分を表示するかを定義するクリッピング領域を作ります。クリッピング領域の内側が表示され、外側は隠されます。クリッピング領域はインラインや外部 SVG を参照する URL、または circle() のようなシェイプとして指定されたパスです。


photoshopなどの画像制作ツールを使わずに画像などをクリッピング出来る「clip-path」プロパティ。filterプロパティ同様、cssで画像を加工出来るので、複数の画像を用意する必要が無くなり、bodyの幅によって画像の形を変える事も出来ます。
「clip-path」プロパティは便利でメリットも多いですが、一部ブラウザーではまだ対応していないので、注意が必要です。
「clip-path」プロパティとアニメーションを組み合わせる事で色々な表現が出来るようになります。


「clip-path」プロパティ

inset() … 内側へのオフセット(通常は長方形となる)
circle() … 円
ellipse() … 楕円
polygon() … 多角形

clip-path: circle(50% at 50% 50%);

Clippy — CSS clip-path maker




複雑な形の場合、「clip-path」プロパティを頭の中で考えて数値にしていくのは大変なので、こういった便利なジェネレーターを使いましょう。
Clippy — CSS clip-path maker





digipress.digi-state.com


www.webprofessional.jp

CSS3 filterでの画像加工

今までPhotoshopで行っていた、ぼかしやグレースケールなどの加工がcssだけで可能になりました。
それにより、フェルタ毎に複数の画像を用意する必要がなくなります。



cssのfilterプロパティで出来る事

  • grayscale(グレースケール)
  • saturate(彩度)
  • sepia(セピア)
  • hue-rotate(色相)
  • invert(色の反転)
  • blur(ぼかし)
  • brightness(明るさ)
  • contrast(コントラスト)
  • drop-shadow(ドロップシャドウ)
grayscale(値)

値:0~100%
備考:値が大きいほど、画像の色が白黒に近づく

saturate(値)

値:0~上限なし
備考:値が大きいほど、色が鮮やかになる。値の上限が無く、例えば10000%という値も設定可能。

sepia(値)

値:0~100%
備考:値が大きいほど、色が黒褐色に近づく。

hue-rotate(値)

値:0deg~360deg(上限・下限なし)
備考:360deg(1周)で元の色に戻る(-360degでも同じ)

invert(値)

値:0~100%
備考:値が大きいほど、写真のネガっぽくなる。

blur(値)

値:0px~上限なし
備考:値が大きいほど、ぼかしの度合いが大きくなる。値の上限が無く、例えば1000pxという値も設定可能


brightness(値)

値:0~上限なし
備考:値が大きいほど、明るさが大きくなる。値を値の上限が無く、0.67といった少数での値を指定可能。ちなみに値を0にすると色は真っ黒になる。

drop-shadow(値1 値2 値3 rgba(値4,値5,値6,値7)

値1~3:下限上限なし
値4~6:0~255
値7:0~上限なし
備考:値1は横方向への影、値2は縦方向への影、値3は影のぼかし具合を表す
値4~6で色の指定する(色の三原色rgb)
値7で明るさを指定する









migo-media.com