知っておくと役に立つCSS #CSS

スクロール時のカクカクを直す

overflow: scroll;はiOS Safariだとスクロールするとカクカクする
スムーズにスクロールするよう下記CSSもセットで書いてあげる

.element {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

コピペさせないCSS

user-select：コピー無効化
touch-callout：iOSで文章等を長押しした際に表示されるポップアップメニューを無効化

.element {
  user-select: none;
  -webkit-user-select: none;
  touch-callout: none;
  -webkit-touch-callout: none;
}

半透明のぼかしガラスを実装

Safari / iOS Safariのみサポート中　　参考: Can I use

.element {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

フォントを綺麗に見せる

テキストにアンチエイリアスをかけて綺麗に見せる小技。
海外のしゃれたサイトはよく使っている。windowsには全く変化がない。

.element {
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: antialiased;
}

ブラウザに優しいアニメーション

JavaScriptやCSSで要素をアニメーション(変形)させるCSSに付与する
hoverしたら、このプロパティ変化しますよー！的な感じで使う

※ 事前に要素がアニメーションする事をブラウザにお知らせしておくことで、要素の変更・レンダリング処理が速くなり、滑らかなアニメーション処理が行われる。（らしい）

.element {
  will-change: transform;
}

.element:hover {
  transform:  rotate(90deg); 
}

形に沿ってテキストを回り込ませる

IE(Edge), 狐, Opera以外はサポート中 　参考: Can I use
※未対応ブラウザは円形に回り込まない。

.element-img {
  width: 20em;
  height: 20em;
  float: left;
  border-radius: 25em;
  shape-outside: circle(50%);  // 円形に沿ってテキストを回り込ませる
}

背景色と背景画像をブレンドする

このCSSを使うと背景色と背景画像にフィルタ効果をつけて、いい感じにブレンドすることができる。
※ photoshopのレイヤー効果をCSSで付けれる

IE(Edge), 狐, Opera以外はサポート中 　参考: Can I use

.element-bg {
    background-image: 
    linear-gradient(lightblue 0%, pink 100%), linear-gradient(to right, pink 30%, white 100%), url("背景画像");
    background-blend-mode: hue; // 色相効果でブレンド
}

background-blend-modeプロパティ一覧

プロパティ	効果の説明
normal	初期値(ブレンドしない )
multiply	乗算
screen	スクリーン
overlay	オーバーレイ
darken	比較(暗)
lighten	比較(明)
color-dodge	覆い焼き
color-burn	焼きこみ
hard-light	ハードライト
soft-light	ソフトライト
difference	差の絶対値
exclusion	除外
hue	色相
saturation	彩度
color	カラー
luminosity	輝度

CSSの条件分岐

特定ブラウザにしかサポートされていないCSSを使用する場合に用いる。
@supportsを使用して、メディアクエリのようにCSSでif文を書くことができる


.element-img {
    width: 20em;
    height: 20em;
    float: left;
    margin: 0.25em 2em 1em 0;
}

/* ※shape-outsideがサポートされているブラウザのみ、以下のスタイルが適用される */
@supports (shape-outside: circle()) {
    .element-img {
        shape-outside: circle(50%);
        border-radius: 25em;
    }    
}