はじめに
グラデーションを使った 10 個の見出しのサンプルです。
HTML は、言及していない限り下記の単純なものです。
<h2>グラデーションの見出しサンプル</h2>
グラデーションの色選びは、サイトカラーに最適な色とグラデーションを生成する「ColorSpace」をご参考ください。
単純に背景色がグラデーション
まずは最も単純な背景色がグラデーションの見出し。
CSS はこちら。
h2 {
background: linear-gradient(to right top, #9c27b0, #c21fa0, #de268f, #f23a7e, #ff536f);
border-radius: 8px;
color: #fff;
font-size: 24px;
line-height: 34px;
padding: 27px 24px;
}
変形
グラデーションの背景色はそのままに、変形した見出し。形を工夫すると、子ども向けサイトからホラー系サイトまで幅広く使えます。border-radius
は奥が深い。
CSS 。
h2 {
background: linear-gradient(to right top, #9c27b0, #c21fa0, #de268f, #f23a7e, #ff536f);
border-radius: 20px 80px 20px 50px/40px 30px 80px 20px;
color: #fff;
font-size: 24px;
line-height: 34px;
padding: 27px 24px;
}
パララックスな背景画像
グラデーションの背景色に加えて、背景画像も加えた見出し。パララックス効果で、視線を集めやすいのが魅力。
CSS 。
h2 {
background: linear-gradient(to right top, rgba(156, 39, 176, .8), rgba(194, 31, 160, .8), rgba(222, 38, 143, .8), rgba(242, 58, 126, .8), rgba(255, 83, 111, .8)), url(画像のパス) center/cover no-repeat fixed;
border-radius: 8px;
color: #fff;
font-size: 24px;
line-height: 34px;
padding: 27px 24px;
}
色相の変化
グラデーションの色相が、永遠に回転し続ける見出し。ただ、filter
に未対応の IE では色相が回転せず、ただのグラデーションになります。
また、filter
を使ったアニメーションは、ブラウザに負荷をかけるのが欠点です。
GPU アクセラレーションが可能なプロパティ transform
・opacity
を使わない限り、ブラウザに負荷をかけます。例えば、background-position
を使いグラデーションにアニメーションをつける方法もありますが、ブラウザに負荷がかかります。
CSS 。
h2 {
animation: headline 8s cubic-bezier(.4, 0, .2, 1) infinite alternate;
background: linear-gradient(to right top, #9c27b0, #c21fa0, #de268f, #f23a7e, #ff536f);
border-radius: 8px;
color: #fff;
font-size: 24px;
line-height: 34px;
padding: 27px 24px;
}
@keyframes headline {
100% {
filter: hue-rotate(360deg);
}
}
色の変化を抑える場合は、hue-rotate
の値を小さくします。
CSS 。
h2 {
animation: headline 3s cubic-bezier(.4, 0, .2, 1) infinite alternate;
background: linear-gradient(to right top, #9c27b0, #c21fa0, #de268f, #f23a7e, #ff536f);
border-radius: 8px;
color: #fff;
font-size: 24px;
line-height: 34px;
padding: 27px 24px;
}
@keyframes headline {
100% {
filter: hue-rotate(45deg);
}
}
背景画像と色相回転の組み合わせ
これまでのグラデーションの背景、背景画像、色相回転の 3 つを組み合わせた見出し。背景画像と色相回転の組み合わせは、相性が抜群。
CSS 。
h2 {
animation: headline 8s cubic-bezier(.4, 0, .2, 1) infinite alternate;
background: linear-gradient(to right top, rgba(156, 39, 176, .8), rgba(194, 31, 160, .8), rgba(222, 38, 143, .8), rgba(242, 58, 126, .8), rgba(255, 83, 111, .8)), url(画像のパス) center /cover no-repeat fixed;
border-radius: 8px;
color: #fff;
font-size: 24px;
line-height: 34px;
padding: 27px 24px;
}
@keyframes headline {
100% {
filter: hue-rotate(360deg);
}
}
非平行
下辺を斜めにした非平行の見出し。ただ、HTML にラッパーが必要です。
HTML 。
<div class="headline-wrap">
<h2>グラデーションの見出しサンプル</h2>
</div>
CSS 。
.headline-wrap {
border-radius: 8px;
overflow: hidden;
position: relative;
}
.headline-wrap:after {
background: linear-gradient(to right top, #9c27b0, #c21fa0, #de268f, #f23a7e, #ff536f);
border-radius: 8px;
bottom: 0;
content: '';
left: 0;
position: absolute;
right: 0;
top: 0;
transform: skewY(-3deg);
transform-origin: top left;
}
h2 {
color: #fff;
font-size: 24px;
line-height: 34px;
padding: 27px 24px 51px;
position: relative;
z-index: 1;
}
ボーダーがグラデーション
グラデーションにできるのは背景色だけではありません。ボーダーもシンプルでいい感じ。
CSS 。
h2 {
border-image: linear-gradient(to right, #9c27b0, #c21fa0, #de268f, #f23a7e, #ff536f) 1/0 0 4px;
border-style: solid;
color: #212121;
font-size: 24px;
line-height: 34px;
padding: 27px 24px;
}
border-image
の値をちょっとだけ変更すれば、上下のボーダーに。
CSS 。
h2 {
border-image: linear-gradient(to right, #9c27b0, #c21fa0, #de268f, #f23a7e, #ff536f) 1/4px 0;
border-style: solid;
color: #212121;
font-size: 24px;
line-height: 34px;
padding: 27px 24px;
}
はっきりグラデーションのボーダー
グラデーションはグラデーションでも、色をはっきりと分けたグラデーション指定のボーダー。
CSS 。
h2 {
border-image: linear-gradient(to right, #ff5252 40px, #12005e 40px) 1/0 0 4px;
border-style: solid;
color: #212121;
font-size: 24px;
line-height: 34px;
padding: 27px 24px;
}
ガーリー系サイトに合いそうなストライプ調も可能。
CSS 。
h2 {
border-image: repeating-linear-gradient(-45deg, #ff5252, #ff5252 2px, transparent 2px, transparent 6px) 16/0 0 6px;
border-style: solid;
color: #212121;
font-size: 24px;
line-height: 34px;
padding: 27px 24px;
}
文字色がグラデーション
あまり見かけない文字色のグラデーション。目立つことは間違いなし。ただ、IE は非対応。
CSS 。
h2 {
background: linear-gradient(to right, #9c27b0, #c21fa0, #de268f, #f23a7e, #ff536f);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-size: 24px;
line-height: 34px;
padding: 27px 24px;
}
スクロールで背景色が変化
見出しが「画面に入る時」と「画面から出る時」に、グラデーションの背景色が変わるアニメーション。
ただし、紹介している方法だけでは AMP で表現できません。
※見出しが画面内に入ってから 160px スクロールした地点で、背景色が変化します。
HTML 。
<div class="headline-wrap">
<h2>グラデーションの見出しサンプル</h2>
<div class="headline-background"></div>
</div>
CSS 。
.headline-wrap {
position: relative;
z-index: 0;
}
h2 {
color: #fff;
font-size: 24px;
line-height: 34px;
padding: 27px 24px;
}
.headline-background {
background: linear-gradient(to right top, #9c27b0, #c21fa0, #de268f, #f23a7e, #ff536f);
border-radius: 8px;
bottom: 0;
left: 0;
opacity: .5;
position: absolute;
right: 0;
top: 0;
transition: .3s cubic-bezier(.4, 0, .2, 1);
z-index: -1;
}
.headline-animation .headline-background {
opacity: 1;
}
JavaScript 。
(function() {
const headline = document.querySelectorAll('.headline-wrap');
const observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.intersectionRatio > 0) {
entry.target.classList.add('headline-animation');
} else {
entry.target.classList.remove('headline-animation');
}
});
}, {
rootMargin: '-160px 0px'
});
Array.prototype.forEach.call(headline, function(animation) {
observer.observe(animation);
});
})();