求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

CSS3 - イメージフィルター

CSS3 - イメージフィルター

  • Photoshopで画像加工を行わないで同じ効果を得る

f:id:web-0220:20190322233916j:plain


元画像

f:id:web-0220:20190321135347j:plain

<figure class="sample"><img src="img/01.jpg" alt=""></figure>
<figure class="sample blur"><img src="img/01.jpg" alt=""></figure>
<figure class="sample brightness"><img src="img/01.jpg" alt=""></figure>
<figure class="sample contrast"><img src="img/01.jpg" alt=""></figure>
<figure class="sample grayscale"><img src="img/01.jpg" alt=""></figure>
<figure class="sample opacity"><img src="img/01.jpg" alt=""></figure>
<figure class="sample sepia"><img src="img/01.jpg" alt=""></figure>
<figure class="sample saturate"><img src="img/01.jpg" alt=""></figure>
<figure class="sample mix"><img src="img/01.jpg" alt=""></figure>
ぼかしを調整(blur
  • 「ぼかしの長さ」を指定します

f:id:web-0220:20190321140729j:plain

.blur {
  -webkit-filter: blur( 6px );
  filter: blur( 6px );
}
明るさを調整(brightness)
  • 値が1(または100%)の場合がフィルターをかけないのと同じ
  • 0%に近いほど暗くなります
  • 100%を超えて指定すると明るくなります

f:id:web-0220:20190321141748j:plain

.brightness {
  -webkit-filter: brightness( 50% );
  filter: brightness( 50% );
}
明暗の差を調整(contrast)
  • 1(または100%)が元の画像と同じ
  • 0%に近いほどグレーになります

f:id:web-0220:20190321144401j:plain

.contrast {
  -webkit-filter: contrast( 2 );
  filter: contrast( 2 );
}
白黒に(grayscale)
  • 1(または100%)になると完全にグレースケール表示になります

f:id:web-0220:20190321144926j:plain

.grayscale {
  -webkit-filter: grayscale( 100% );
  filter: grayscale( 100% );
}
不透明度を調整(opacity)
  • 0に近づくほど透明になり、0で完全に見えなくなります

f:id:web-0220:20190321145808j:plain

.opacity {
  -webkit-filter: opacity( 0.3 );
  filter: opacity( 0.3 );
}
セピア調に(sepia)
  • 1(または100%)に近づくほど、完全なセピアに近付きます

f:id:web-0220:20190321150749j:plain

.sepia {
  -webkit-filter: sepia( 80% );
  filter: sepia( 80% );
}
鮮やかさを調整(saturate)
  • 0では変化がありません
  • 1(または100%)に近づくほど、色が鮮やかになります

f:id:web-0220:20190321152546j:plain

.saturate {
  -webkit-filter: blur( 6px );
  filter: saturate( 1.0 );
}
組み合わせる

f:id:web-0220:20190321153210j:plain

.mix {
  -webkit-filter: contrast(1.4) saturate(1.8);
  filter: contrast(1.4) saturate(1.8);
}

figure要素

  • figure要素は、挿絵、図表、写真、コードなどに注釈を付けるために使われます
  • figure要素は、そのセクションから参照されます
  • 無理に使う必要はない(キャプションつけない場合は特に)
  • キャプションが必要な場合には、figcaption要素を記述します
  • 注釈となる figcaption要素は、必須ではありません