知っておくと役に立つCSS

  • 65
    いいね
  • 0
    コメント

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

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;
    }    
}

参考

http://www.lottejackson.com/learning/supports-will-change-your-life