ノラWEB屋 野良人(のらんど)- 個人営業のWEB屋さん

CSSでボーダーにグラデーションをかける方法3つ

2018年1月28日

枠線のグラデーションです。たまにしかやらなくて、毎回良い方法がないか調べてしまうため、3パターンのアプローチをまとめました。

    【前提】borderプロパティにグラデーションを指定する方法はない

    2017年1月現在、borderプロパティではグラデーションを実現することはできません。なので、疑似的にグラデーションの枠線を表現する方法を考えることになります。

    【方法1】背面要素の背景をグラデーション

    一番スタンダードな方法で、ググるといっぱい出てきます。要素を入れ子にして、背面の要素をグラデーションで塗りつぶし、全面の要素を背景色(白とか)で塗りつぶしてグラデーションの枠線を表現するものです。

    デモ

    サンプルコード

    html
    <div class="demo-area">
    	<div class="grad-demo1">
    		<div class="grad-demo1_inner">方法1のデモ</div>
    	</div>
    </div>
    
    css
    .grad-demo1{
      padding: 1px;
      background: linear-gradient(to right, #00f, #f00);
    }
    
    .grad-demo1_inner{
      padding: 16px;
      background-color: #fff;
    }
    

    【方法2】疑似要素の背景をグラデーション

    borderと疑似要素の組み合わせでグラデーションの枠線を表現します。ナナメのグラデーションには対応できませんが、一番お手軽じゃないかと思います。

    デモ

    サンプルコード

    html
    <div class="demo-area">
    	<div class="grad-demo2">方法2のデモ</div>
    </div>
    
    css
    .grad-demo2::before,
    .grad-demo2::after{
      content: '';
      display: block;
      width: calc( 100% + 32px );
      height: 1px;
      margin-left: -16px;
      background: linear-gradient(to right, #00f, #f00);
    }
    
    .grad-demo2::before{
      margin-bottom: 16px;
    }
    
    .grad-demo2::after{
      margin-top: 16px;
    }
    

    【方法3】border-imageプロパティによるグラデーション

    背景画像でやるとレスポンシブで枠線の太さが伸縮してブサイクになりますが、border-imageプロパティならキレイに表現きます。border-sliceの値の設定がちょっと分かりにくいかも。

    デモ

    サンプルコード

    html
    <div class="demo-area">
    	<div class="grad-demo3">方法2のデモ</div>
    </div>
    
    css
    .grad-demo3{
      padding: 16px;
      border: solid 1px transparent;
      border-image: url("img/bg.jpg") 1 stretch;
    }
    

    CSSでグラデーションを生成するジェネレーター

    最後にグラデーションのCSSコードを生成するツールを紹介しておきます。

    Ultimate CSS Gradient Generator – ColorZilla.com

    cssでグラデーションを指定する際には、このジェネレーターをよく使っています。GUIで設定できて、ベンダープレフィックスとかもつけて出力してくれるので便利。直感的に表示を確認しながら設定できるのが良いです。

    Sassのコードも生成できます。Compass依存です。

    まとめ:栃ノ心が優勝

    平成30年初場所は栃ノ心が初優勝となりました。

    この人はとくに上半身の筋肉がすごく鍛えられていてカッコイイ。脂肪が少なくて目立つというのもあるけど。体もデキていて、相撲も安定しているし、今場所特有の気持ちの乗りとか、上位陣不在・不調を差し引いても、単発にならず今後も引き続き活躍してくれるだろうという感じがします。

    逸ノ城も今場所は気持ちが前向きで強さが出ていてよかった。御嶽海はなんか調子の波とか上位陣キラーな感じを見ていると、ポスト稀勢の里っていう感じがしてきた。まわしの色も…。

    幕下以下で注目していたところでは、三段目では魁皇の浅香山部屋から魁勝が全勝優勝と素晴らしい成績。琴欧州の鳴門部屋からは、話題の虎来欧は怪我もあって振るわなかったけど欧翔山が勝ち越して勢い良いですね。

    このエントリーをはてなブックマークに追加