読者です 読者をやめる 読者になる 読者になる

WebEngine

web、プログラミング関係について書いていきます。あなたの優しい眼差しがブログの成長につながりますのでどうぞよろしく。

CSS3で光沢を表現する

ナビゲーションをつくる

今回は以下のナビゲーションにlinear-gradientを施す形で光沢を表現します。

f:id:web-engine:20161101150726p:plain

コードは以下の通り。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>DEMO</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Works</a></li>
    <li><a href="#">Links</a></li>
  </ul>
</nav>

</body>
</html>


body {
  margin: 0;
  padding: 0;
}

nav {
  background-color: #ddd;
}

nav ul {
  overflow: hidden;
  list-style: none;
}

nav li {
  float: left;
  width: 100px;
  border-right: #fff 1px solid;
  font-weight: 700;
}

nav li:first-child {
  border-left: #fff 1px solid;
}

nav a {
  display: block;
  text-decoration: none;
  text-align: center;
  background-color: #f36;
  padding: 10px 0;
  color: #fff;
}

nav a:hover {
  opacity: 0.7;
}


見てわかる人もいるかもしれませんが、前回の記事のコードをちょっと加工しただけです。

ナビゲーションに光沢を施してみる

CSSに以下の記述を追加します。

nav a {
  display: block;
  text-decoration: none;
  text-align: center;
  background-color: #f36;
  padding: 10px 0;
  color: #fff;

  /* ここから先を追記 */

  background: -webkit-linear-gradient(
    top,
    #ffced7 0%,
    #f74657 49%,
    #f10013 51%,
    #fe2951 100%
  );
  background: -ms-linear-gradient(
    top,
    #ffced7 0%,
    #f74657 49%,
    #f10013 51%,
    #fe2951 100%
  );
  background: linear-gradient(
    to bottom,
    #ffced7 0%,
    #f74657 49%,
    #f10013 51%,
    #fe2951 100%
  );

  /* ここまで追記 */

}


以下はGoogle chromeでの表示結果です。

f:id:web-engine:20161101150748p:plain

ベンダープレフィックスをつけているので、FireFoxとIE10以上でも表示されます。その 他のブラウザでは確認していません。
linear-gradientはIE9以下ではサポートされていません。F12ボタン(Windowsの場合)を 押して開発者ツールでブラウザのバージョンを下げれば、そのことがわかります。

linear-gradientの注意点

上記コードでlinear-gradientを施した際、ベンダープレフィックスつきの書式と、ついていない書式で違う部分が あります。(それ以外は同じということなのでコピペが有効)
topto bottomの部分ですね。今回のグラデーションの場合、上から下へのグラデーションと なっているわけですが、linear-gradientでは、プレフィックスつきの場合は起点の名前を、そうでない (ベンダープレフィックスではない)場合は、to ××で方向を指定します。

上記のナビは光沢にするため%なんかを使っていますが、基本形は下記のような感じになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>DEMO</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="grad_box"></div>
</body>
</html>


body {
  margin: 0;
  padding: 0;
}

#grad_box {
  width: 200px;
  height: 200px;
  background: #ddd;
  background: -webkit-linear-gradient(top, #ffced7, #fe2951);
  background: -ms-linear-gradient(top, #ffced7, #fe2951);
  background: linear-gradient(to bottom, #ffced7, #fe2951);
}


f:id:web-engine:20161101150803p:plain

現在ではフラットデザインが主流となっているので使用場面が限られますが、それでも覚えておいて損はないはずです。