Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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

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

という特徴も持っている

参考:linear-gradient(MSDN)

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

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

スクリーンショット 2018-12-02 23.40.52.png

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

よくある実装1

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)吹き出しを作成する場合

スクリーンショット 2018-12-03 1.12.58.png
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等でも似たような記述を見た(かつブラウザ間でかなり挙動が違う)ことを考えるとこれがスタンダードなのでしょうか。 

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away