linear-gradientを使ったいつもと違う実装例

はじめに

linear-gradient()はグラデーションを作るCSSだが

• 「（色経由点を使用して）色が変わらない」設定を作れる
• imageと同様にsizeやpositionの指定が書ける
• backgroundプロパティなので複数指定ができる

という特徴も持っている

参考：linear-gradient(MSDN)

これを利用することで、よくある実装とは違うアプローチを取れることがある。

例１）色付きのシークバーを実装する場合

linear-gradientを利用するとちょっとシンプルに書ける

よくある実装¹

before.html

    <div class="bar-wrapper">
        <input type="range" class="bar"/>
        <span class="bar-fill"></span>
    </div>

before.scss

// px値は適当
.bar {
    -webkit-appearance: none;
    margin: 0;
    background: gray;
    height: 5px;
    width: 400px;
    position: absolute;
    &-fill{
        -webkit-appearance: none;
        background: #54C4FF;
        height: 5px;
        width: 200px;
        display: block;
        position: absolute;
    }
    &-wrapper{
        position: relative;
        width: 400px;
    }
   // -webkit-slider-thumbは割愛
}

参考：http://jsdo.it/kingpanda/8UZS

linear-gradient版

「色経由点まで同じ色（緑）で、同じ位置にある色経由点（グレー）から最後まで色が同じのグラデーション」と解釈できる
グラデーションのred 0% ,red 50% ,gray 50% ,gray 100%の50％の部分をよしなにjsでいじればよい

after.html

 <input type="range" class="bar"/>

after.scss

.bar {
    -webkit-appearance: none;
    margin: 0;
    appearance: none;
    height: 5px;
    width: 400px;
    //↑ここまでは同じ。
    background: linear-gradient( 90deg ,#54C4FF 0% ,#54C4FF 50% ,gray 50% ,gray 100% );
    //↑これだけで良い
}

例2）吹き出しを作成する場合

linear-gradientは<image> データ型（の亜種）を作成するので、これを組み合わせると疑似要素を使わなくて良い。

よくある実装

before.html

<div class="balloon1">
吹き出し
</div>

before.scss

.balloon1 {
    position: relative;
    display: inline-block;
    margin: 1.5em 0;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    color: #555;
    font-size: 16px;
    background: #e0edff;
    &:before{
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -15px;
        border: 15px solid transparent;
        border-top: 15px solid #e0edff;
    }
}

参考：CSSで作る！吹き出しデザインのサンプル19選

linear-gradient版

※HTMLは変わらないので割愛

after.scss

//SASS,SCSS環境であれば三角形のサイズを変数に入れると良い
.balloon1 {
    position: relative;
    display: inline-block;
    margin: 1.5em 0;
    padding: 7px 10px 22px;
    min-width: 120px;
    max-width: 100%;
    color: white;
    font-size: 16px;
    background-image: linear-gradient( #55c500, #55c500 calc( 100% - 15px ), transparent calc( 100% - 15px ), transparent 100%),
      linear-gradient( -45deg, transparent 50%, #55c500 50%),
      linear-gradient( 45deg, transparent 50%, #55c500 50%);
    background-size: auto auto, 15px 50%, 15px 50%;
    background-repeat: no-repeat;
    background-position: left top, bottom left calc(50% + 7.5px), bottom right calc(50% + 7.5px)
}

※執筆時点でかなり眠いので座標計算形はもっといい方法があるかもしれない。あとサイズもやや怪しい

最後に

明らかに本来の用途ではないが、ごく稀に助けられる場面がある。
ただ使いすぎると可読性を悪くしてしまうのでそのへんはケースバイケースなのかもしれない。

---

1. <input type="range">自体があまり使われていないタグなので情報は少ないですが、別の個人ブログやstackoverflow等でも似たような記述を見た（かつブラウザ間でかなり挙動が違う）ことを考えるとこれがスタンダードなのでしょうか。 ↩