●トップ > 勉強中 > HTML5+CSS3 > ７回目　CSS見出しをグラデーションで♪

７回目　CSS見出しをグラデーションで♪

2014-11-26

こちら、ベンダープレフィックスの記載必要

それでもＩＥ９では利用できないようです
未対応ブラウザのために　単色の背景も設定すること。

・linear-gradient 線形グラデーション
・radial-gradient　円形グラデーション←あまり使えそうにないのでお試し省略

ピンクでグラデーション

ピンクでグラデーション

--[ html ]-----------------------
<section>
<h1 class="gurade1">ピンクでグラデーション</h1>
</section>

--[ CSS ]------------------------
.gurade1{
background:#fd9eb2;
background: -webkit-linear-gradient(
#eb7e95 0%,
#fd9eb2 100%
);
background:linear-gradient(
#eb7e95 0%,
#fd9eb2 100%
);
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 30px;
    padding: 10px;
    width: 200px;
}

--[ CSS 失敗]------------------------
.gurade1{
background:#fd9eb2;
background: -webkit-linear-gradient(
0deg,　　
↑どうやらPCとスマホとでは読み込みが違うらしい。書かないとデフォルトで上(0%)から下(100%)へグラデがかかる
#eb7e95 0%,
#fd9eb2 100%
);
background:linear-gradient(
0deg,
↑どうやらPCとスマホとでは読み込みが違うらしい。書かないとデフォルトで上(0%)から下(100%)へグラデがかかる
#eb7e95 0%,
#fd9eb2 100%
);
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 30px;
    padding: 10px;
    width: 200px;
}