【月10万稼ぐ】本物のWeb制作3ヶ月独学ロードマップ

【CSSのみ】「filter」画像エフェクト3選+使い方|hue-rotate

今回はtransitionfilterプロパティ(invert hue-rotate brightness sepia saturate blur contrast grayscale) の応用です。画像が美しく変化するCSShoverアニメーションを3つご紹介いたします。htmlとcssだけしか使っていません。

 

この記事の信頼性(ゆうけんブログの筆者はこんな人)

  • 現役Webデザイナーが執筆
  • 最高月収7桁超のフリーランス
  • 完全未経験から独学でWeb制作スキルを習得
  • Twitterフォロワー数2,000人超(→@twinzvlog_yk
  • Web制作のメンター経験多数
  • 認定ランサー(ランサーズ最高ランク)

 

コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

こちらのデザイン・コードはすべて完全オリジナルなのでコピペ大歓迎です。

 

1. filter:blurの応用!hoverするとぼやけている画像が動的に変化するfilterエフェクト

動きは下の画像のような感じになります

コードを見る
<div>
  <div class="container">
    <div class="bg-img">
      <div class="image">
        <figure>
          <img class="image1" src="https://www.twinzlabo.com/wp-content/uploads/2020/06/slide-shoes.jpg" />
          <img class="image2" src="https://www.twinzlabo.com/wp-content/uploads/2020/06/slide-shoes.jpg" />
        </figure>
      </div>
    </div>
  </div>
</div>
.container {
  /* flexboxでcontainerの中身をど真ん中に設置 */
  display: flex;
  justify-content: center;
}
.bg-img {
  cursor : pointer;
  /* cursor: pointerを設定することでカーソルが画像の上にある時カーソルがpointerに変化 */
}
.bg-img .image {
	position: relative;
	width: 300px;
	height: 200px;
}
.bg-img figure {
	width: 300px;
	height: 200px;
	overflow: hidden;
  /* 画像のはみ出した箇所を隠す */
}
/* ぼやけて表示されている画像の設定 */
.bg-img .image1 {
	position: absolute;
  /* .image1の位置を指定 */
	left: 0;
	z-index: 100;
  /* ボックスの重なる順序を指定(レイヤー順序を指定できるイメージ) */
	transition: .8s ease-in-out;
  /* 時間を指定(ease-in-outで開始時と終了時が緩やかになる) */
  filter: blur(8px);
  /* ぼかし度合いの調整 */
    height: inherit;
    width: inherit;
    /* inheritは親要素で指定した値がそのまま受け継がれる */
}
/* 後から出てくるぼやけていない画像の設定 */
.bg-img .image2 {
	margin-left: 325px;
	transition: .8s ease-in-out;
  /* 画像が現れる時間を指定 */
  width: inherit;
  height: inherit;
  /* inheritは親要素で指定した値がそのまま受け継がれる */
}
/* hover後の設定 */
.bg-img figure:hover .image1 {
  filter: blur(0);
  /* ぼかしを0に指定 */
  transition: .9s ease-in-out;
  /* 画像が現れる時間を指定 */
}
.bg-img figure:hover .image2 {
	margin-left: 0px;
  /* 画像が右からぼやけがなくなる動きをつけるための調整 */
}
ここがポイント!
  1. hover前・hover後のimage1(ぼかしあり)・image2(ぼかしなし)クラスを用意
  2. .image1、.image2にtransitionでエフェクトの速度調整
  3. .image1にfilter:blur()でぼかし度合いを調整
  4. .image2のmargin-leftをhover前後で325→0に指定することで右から左へスライド
  5. 画像の階層・filter:blurの使い方・transitionで動きをつけるなど応用的な実装を実現

 

2. invert × hue-rotate × brightnesshoverで光り輝く星空のようなfilterエフェクト

動きは下の画像のような感じになります

コードを見る
<div class="container">
  <div class="image">
    <img src="https://images.unsplash.com/photo-1535007726788-fed8106a64cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80" style="background-size:cover;" class="img" alt="">
  </div>
</div>
/* hover前のスタイル */
img {
  margin: 0 auto;
  width: 350px;
  height: 220px;
  cursor: pointer;
  transition: 4000ms ease-in;
  /* エフェクトの速度調整 */
  filter: invert(3%) hue-rotate(0) brightness(500%);
  /* invertで階調反転・hue-rotateで色相回転・brightnessで明るさの度合いの指定 */
}
/* hover後のスタイル */
img:hover {
  filter: invert(0%) hue-rotate(2000deg) brightness(500%);
  /* hover後の階調反転・色相回転・明るさの度合いの指定 */
}
ここがポイント!
  1. hover前・hover後のimgスタイルを用意
  2. hover前のimgにtransitionでエフェクトの速度調整・filter: invert() hue-rotate() brightness()で階調反転・色相回転・明るさの調整
  3. hover後のimgにも同じくfilter: invert() hue-rotate() brightness()で階調反転・色相回転・明るさの調整
  4. 今回はhover前:invert(3%) hue-rotate(0) brightness(500%)、hover後:invert(0%) hue-rotate(2000deg) brightness(500%)で光り輝く星空のようなエフェクトを実現

 

3. contrast × grayscale × brightness × saturate × invert+hoverで感動するほどの景色に変わるfilterエフェクト

動きは下の画像のような感じになります

コードを見る
<div class="container">
  <div class="image">
    <img src="https://images.unsplash.com/photo-1468186402854-9a641fd7a7c4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80" style="background-size:cover;" class="img" alt="">
  </div>
</div>
/* hover前のスタイル */
img {
  margin: 0 auto;
  width: 350px;
  height: 220px;
  cursor: pointer;
  transition: 500ms ease-in;
  /* エフェクトの速度調整 */
  filter: contrast(100%) grayscale(100%) brightness(100%) saturate(100%) invert(3%);
  /* contrastでコントラスト,grayscaleで白黒の度合い,brightnessで明るさ,saturateで色彩 ,invertで階調反転の調整*/
}
/* hover後のスタイル */
img:hover {
  filter: contrast(105%) grayscale(0) brightness(250%) saturate(120%) invert(0%);
  /* hover後のfilterを指定 */
}
ここがポイント!
  1. hover前・hover後のimgスタイルを用意
  2. hover前のimgにtransitionでエフェクトの速度調整・filter: contrast() grayscale() brightness() saturate() invert()でコントラスト・白黒度合い・明るさ・色彩・階調反転を調整
  3. hover後のimgにも同じくfilter: contrast() grayscale() brightness() saturate() invert()でコントラスト・白黒度合い・明るさ・色彩・階調反転を調整
  4. 今回はfilterプロパティを応用して白黒画像が100倍美しく変化するエフェクトを実現

 

『絶対にリモートワーク!』という方におすすめの求人サイトをご紹介!

クラウドテック
Web制作案件の数
(5.0)
案件の単価
(4.0)
使いやすさ
(5.0)
案件獲得効率
(5.0)
初心者向け
(5.0)
オススメ度
(5.0)
総合評価
(5.0)
この講座のポイント

対象
Webデザイナー・エンジニア・グラフィックデザイナー・PM・マーケター・ライター

 

公式サイト
クラウドテック公式ページ

特徴

  • クラウドソーシング企業大手のクラウドワークスが運営する求人サイト
  • 実務未経験者でもOK
  • 登録社数14万社
  • フリーランス・個人事業主向け案件がケタ違いに多い
  • 報酬額や勤務地・職種など希望が通りやすい
  • Web制作・コーディングの高単価案件が多い
  • リモートワーク案件数は業界トップクラス
  • 最短3日で案件を獲得できる

 

現役Webデザイナーの筆者イチオシの求人サイト!フリーランス向けWeb制作案件なら確実に業界トップクラス。営業かけずに案件に困らなくなる一番の近道です。

ふたご

 

無料で登録してみる >>

 

 

まとめ

HTMLとCSSを使うと今回紹介したようなことも簡単にできてしまうんです。

 

『CSSアニメーションやエフェクトだけではなくWebサイトをゼロから作って稼いでいきたい』

『3ヶ月くらいで最低でも月10万円は稼ぎたい』

『営業とかやったことないけどWeb制作だけで稼いでいきたい』

 

こんな方のためにWeb制作で月80万超稼ぐ筆者が自身の経験を踏まえて【失敗しない】Webデザイナー(Web制作)独学ロードマップを執筆しました。

 

少額の投資で3ヶ月後には月10〜30万稼げるよう設計してあります。
(学習教材やAdobeなど最低限のコストはかかります)

 

ロードマップの構成
  1. Web制作に特化した『確実に身に付く』学習方法
  2. Web制作会社が喰いつく理想的なポートフォリオの作成手順
  3. 返信率10%以上!Web制作会社へのメール営業

 

有料公開も考えましたが「Webデザイナー(Web制作)はまだまだ稼げることを証明したい!」という思いが強く、期間限定で無料公開をすることにしました。

 

2021年半ばまでは無料公開する予定ではありますが前倒しすることもあり得ますのでご興味ある方はお早めにどうぞ!