CSS3だけでヘアライン調パネルを再現してみる

ヘッダに画像を指定するのを止めて、CSS3だけでヘアライン調（メタル調）を再現してみました。違和感なく再現できた気がするのでやり方を紹介します。

参考サイト

「ヘアライン CSS」で検索すると上位に表示される日本語サイトが紹介している「Brushed Metal」を参考にします。

Brushed Metal – Repeating background gradients
http://simurai.com/lab/2011/08/21/brushed-metal

CSSテスト1 参考サイトを真似する

「Brushed Metal」のCSSを抜粋するとこんな感じ。

.metal.linear {
  width: 100px;
  height: 80px;
  margin-bottom:10px;
  border-radius: .5em;
  background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
    
    linear-gradient(180deg, hsl(0,0%,78%)  0%, 
    hsl(0,0%,90%) 47%, 
    hsl(0,0%,78%) 53%,
    hsl(0,0%,70%) 100%);
}

これをブラウザに解釈させるとこうなります。

.metal.linear
CSSテスト2 CSSそのままに枠を広げる

次にこのCSSを幅いっぱいの枠に反映させるとどうなるか。ヘアライン風の縦縞は3種類の縦縞-webkit-repeating-linear-gradientの幅をパーセントで指定することでランダム感を出しているのですが、一つの縞が太すぎて違和感ありまくりです。

metal2
metal2のCSS.box{
    width:100%;
    height:100px;
    border:1px solid;
    margin-bottom:10px;}

.metal2 {
  background-image:
    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
    
    linear-gradient(180deg, hsl(0,0%,78%)  0%, 
    hsl(0,0%,90%) 47%, 
    hsl(0,0%,78%) 53%,
    hsl(0,0%,70%) 100%);
}
CSSテスト3 -webkit-repeating-linear-gradientの幅を%からpxに

縦縞の太さを%からpxに変更することで縦縞の違和感が気にならなくなりました。

metal3
metal3のCSS.metal3 {
  background-image:
    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6px, hsla(0,0%,100%, .1) 7.5px),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4px, hsla(0,0%,  0%,.03) 4.5px),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2px, hsla(0,0%,100%,.15) 2.2px),
    
    linear-gradient(180deg, hsl(0,0%,78%)  0%, 
    hsl(0,0%,90%) 47%, 
    hsl(0,0%,78%) 53%,
    hsl(0,0%,70%) 100%);
}
CSSテスト4 -webkit-repeating-linear-gradientの幅を整数化

-webkit-repeating-linear-gradientの幅が1.5pxなど小数点がついていても意味がないので整数化します。CSSテスト3よりも縦縞が細くなって本物っぽくなってきました。

metal4
metal4のCSS.metal4 {
  background-image:
    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 5px, hsla(0,0%,100%, .1) 7px),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0) 3px, hsla(0,0%,  0%,.03) 4px),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1px, hsla(0,0%,100%,.15) 2px),
     
    linear-gradient(180deg, hsl(0,0%,78%)  0%, 
    hsl(0,0%,90%) 47%, 
    hsl(0,0%,78%) 53%,
    hsl(0,0%,70%) 100%);
}
CSSテスト5 ベンダープレフィックスを取り除く

元の記事は2011年のもの。この頃はベンダープレフィックス付きの-webkit-repeating-linear-gradientでないと実現できなかったようですが、今は標準化されているのでベンダープレフィックスを取り除いたrepeating-linear-gradientに変更します。
またこの時「left」は「to right」に値を置き換える必要があります。

metal5
metal5のCSS.metal5 {
  background-image:
    repeating-linear-gradient(to right, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 5px, hsla(0,0%,100%, .1) 7px),
    repeating-linear-gradient(to right, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0) 3px, hsla(0,0%,  0%,.03) 4px),
    repeating-linear-gradient(to right, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1px, hsla(0,0%,100%,.15) 2px),
     
    linear-gradient(180deg, hsl(0,0%,78%)  0%, 
    hsl(0,0%,90%) 47%, 
    hsl(0,0%,78%) 53%,
    hsl(0,0%,70%) 100%);
}
CSSテスト6 自然に見せるための試行錯誤

グラデーションが水平だとわざとらしいので、適当に角度をつけて中心を右寄りにずらします。修正するのはlinear-gradient関数。180degを好みの数値に変更することで角度を調整でき、中心のオフセットはhsl()の後のパーセントの値を変更します。

metal6
metal6のCSS.metal6 {
  background-image:
    repeating-linear-gradient(to right, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 5px, hsla(0,0%,100%, .1) 7px),
    repeating-linear-gradient(to right, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0) 3px, hsla(0,0%,  0%,.03) 4px),
    repeating-linear-gradient(to right, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1px, hsla(0,0%,100%,.15) 2px),
       linear-gradient(350deg, hsl(0,0%,78%)  0%, 
       hsl(0,0%,90%) 37%, 
       hsl(0,0%,78%) 76%,
       hsl(0,0%,70%) 100%);}
}
CSSテスト7 真鍮風に変更する

linear-gradientに色相と彩度を追加することで、他の金属風にすることもできます。

metal7
metal7のCSS.metal7 {
  background-image:
    repeating-linear-gradient(to right, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 5px, hsla(0,0%,100%, .1) 7px),
    repeating-linear-gradient(to right, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0) 3px, hsla(0,0%,  0%,.03) 4px),
    repeating-linear-gradient(to right, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1px, hsla(0,0%,100%,.15) 2px),
       linear-gradient(350deg, hsl(60,60%,78%)  0%, 
       hsl(60,60%,90%) 37%, 
       hsl(60,60%,78%) 76%,
       hsl(60,60%,70%) 100%);}
}
スポンサーリンク