CSS3

写真をCSSのみで補正する方法

CSS3のfilterを活用すれば可能です。

.hoge {
	-webkit-filter: xxx();
	filter: xxx();
}

CSSで写真をモノクロ調にしたい場合

grayscale(グレースケール)を指定します。

//0(初期値) - 100[%] 
.hoge {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

CSSで写真をセピア調にしたい場合

sepia(セピア)を指定します。

//0(初期値) - 100[%] 
.hoge {
	-webkit-filter: sepia(100%);
	filter: sepia(100%);
}

CSSで写真の彩度を変更したい場合

saturate(彩度)を指定します。

//0 - 100(初期値)[%]
.hoge {
	-webkit-filter: saturate(0%);
	filter: saturate(0%);
}

CSSで写真の色相を変更したい場合

saturate(彩度)を指定します。

//0(初期値) - 360[deg] 
//360degは0degと同じになる
.hoge {
	-webkit-filter: hue-rotate(360deg);
	filter: hue-rotate(360deg);
}

CSSで写真の階調を反転したい場合

invert(階調反転)を指定します。

//0(初期値) - 100[%] 
.hoge {
	-webkit-filter: invert(100%);
	filter: invert(100%);
}

CSSで写真を透過させたい場合

opacity(透過度)を指定します。

//0 - 100(初期値)[%] 
//opacity: xx%;とほぼ一緒
.hoge {
	-webkit-filter: opacity(0%);
	filter: opacity(0%);
}

CSSで写真の明るさを変更したい場合

brightness(明るさ)を指定します。

//0 - 100(初期値)[%] 
//brightness(0%) で真っ黒になる
.hoge {
	-webkit-filter: brightness(0%);
	filter: brightness(0%);
}

CSSで写真のコントラストを変更したい場合

contrast(コントラスト)を指定します。

//0 - 100(初期値)[%] 
.hoge {
	-webkit-filter: contrast(0%);
	filter: contrast(0%);
}

CSSで写真をぼかしたい場合

blur(ぼかし)を指定します。

//0(初期値)- 任意の値[px] 
.hoge {
	-webkit-filter: blur(5px);
	filter: blur(5px);
}

複数の効果を組み合わせることも可能ですが、行列計算で処理が行われていますので、効果の順番によっては結果が異なってくることには注意が必要です。

cssで背景を透過させたい時の方法

アルファチャンネルを指定してすることで背景のみを透過させることが可能です。

.hoge {
    background-color: rgba(255,255,255,0.5);
}

ちなみに文字も透過させたい場合はopacityを使用します。

.hoge {
    opacity: 0.5;
}

CSSだけでタブの切り替えを実現させる方法

<!-- ↓タブ切り替えエリア↓ -->
<div class="tabArea">
    <div id="tab01">
        <div id="tab02">
            <!-- ↓タブ↓ -->
            <ul class="tab scroll_noNav">
                <li><a href="#tab01">1111</a></li>
                <li><a href="#tab02">2222</a></li>
            </ul>
            <!-- ↑タブ↑ -->
            <div class="tabContents">
                <!-- ↓タブ 1 の内容↓ -->
                <div class="tab01">
                    <section>
                        <h1>1111</h1>
                        <p>1111</p>
                    </section>
                </div>
                <!-- ↑タブ 1 の内容↑ -->
                <!-- ↓タブ 2 の内容↓ -->
                <div class="tab02">
                    <section>
                        <h1>2222</h1>
                        <p>2222</p>
                    </section>
                </div>
                <!-- ↑タブ 2 の内容↑ -->
            <!-- .tabContents --></div>
        </div>
    </div>
</div>
<!-- ↑タブ切り替えエリア↑ -->
.tabArea {
    #tab01:target .tab01, #tab02:target .tab02 {
        display: block;
    }
    #tab01:target .tabContents div:not([class="tab01"]), #tab02:target .tabContents div:not([class="tab02"]) {
        display: none;
    }
    #tab01:target a[href$="tab01"], #tab02:target a[href$="tab02"] {
        //アクティブなタブのスタイルを書く
    }
    #tab01:not(:target) #tab02:not(:target) a[href$="tab01"] {
        //どちらも選択されていないときの最初のタブ1のスタイルを書く
    }
}

CSS3で要素の下部にラインアニメーションを表示させる方法

特定の要素に下線が引かれるようなアニメーションを追加したいとき。

<p class="hoge">この下に下線を表示</p>

左から右へ下線が表示されるアニメーション

.hoge{
  position: relative;
  display: inline-block;
  font-size: 2em;
}
.hoge:before{
  position: absolute;
  top: 1.3em;
  left: 0;
  content: "";
  display: inline-block;
  width: 0;
  height: 2px;//線の厚み
  background: #000;//線の色
  transition: 2s;
}
.hoge:hover:before{
  width: 100%;
}

右から右へ下線が表示されるアニメーション

.hoge{
  position: relative;
  display: inline-block;
  font-size: 2em;
}
.hoge:before{
  position: absolute;
  top: 1.3em;
  right: 0;
  content: "";
  display: inline-block;
  width: 0;
  height: 2px;//線の厚み
  background: #000;//線の色
  transition: 2s;
}
.hoge:hover:before{
  width: 100%;
}

中央から左右へ下線が表示されるアニメーション

.hoge:before,
.hoge:after{
  position: absolute;
  top: 1.3em;
  content: "";
  display: inline-block;
  width: 0;
  height: 2px;//線の厚み
  background: #000;//線の色
  transition: 2s;
}
.hoge:before{
  left: 50%;
}
.hoge:after{
  right: 50%;
}
.hoge:hover:before,
.hoge:hover:after{
  width: 50%;
}