279 views
この記事は最終更新から 629日 が経過しています。
1. やりたいこと
文字色をグラデーションさせたい。
画像を用意せず、CSSだけでこれを実現したい。
2. やってみる
(1) シンプルに赤→青 (0度)
文字の下側の矩形領域は、文字背景に使っているグラデーションを確認するためだけに表示している。
https://www.dogrow.net/hp/sample/00141/01
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>BLOG No.141</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>虹色文字</p><br />
<div></div>
</body>
</html>
style.css
p{
margin: 1rem;
font-size: 4rem;
font-weight: bold;
display: inline-block; /* グラデーション範囲を狭めるため */
line-height: 1; /* 文字の上下の余白分もグラデーション領域に消費されることを回避 */
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
background-image: linear-gradient(#FF0000, #0000FF);
}
div{
display: inline-block; /* グラデーション範囲を狭めるため */
height: 20rem;
width: 20rem;
background-image: linear-gradient(#FF0000, #0000FF);
}
(2) シンプルに赤→青 (時計回りに90度)
HTMLは同じ。CSSだけ変えた。
https://www.dogrow.net/hp/sample/00141/02/
style.css
p{
margin: 1rem;
font-size: 4rem;
font-weight: bold;
display: inline-block; /* グラデーション範囲を狭めるため */
line-height: 1; /* 文字の上下の余白分もグラデーション領域に消費されることを回避 */
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
background-image: linear-gradient(90deg, #FF0000, #0000FF);
}
div{
display: inline-block; /* グラデーション範囲を狭めるため */
height: 20rem;
width: 20rem;
background-image: linear-gradient(90deg, #FF0000, #0000FF);
}
(3) 赤→緑→青の３色グラデーション (時計回りに120度)
HTMLは同じ。CSSだけ変えた。
https://www.dogrow.net/hp/sample/00141/03/
style.css
p{
margin: 1rem;
font-size: 4rem;
font-weight: bold;
display: inline-block; /* グラデーション範囲を狭めるため */
line-height: 1; /* 文字の上下の余白分もグラデーション領域に消費されることを回避 */
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
background-image: linear-gradient(120deg, #FF0000 0%, #00FF00 50%, #0000FF 100%);
}
div{
display: inline-block; /* グラデーション範囲を狭めるため */
height: 20rem;
width: 20rem;
background-image: linear-gradient(120deg, #FF0000 0%, #00FF00 50%, #0000FF 100%);
}
(4) 応用、文字の塗りつぶしに画像ファイルを使う
HTMLは同じ。CSSだけ変えた。
絵心がないために汚いノイズ文字になってしまったが、水玉等きれいな背景画像を使えば見栄えもよさそうだ。
https://www.dogrow.net/hp/sample/00141/04/
style.css
p{
margin: 1rem;
font-size: 4rem;
font-weight: bold;
display: inline-block; /* グラデーション範囲を狭めるため */
line-height: 1; /* 文字の上下の余白分もグラデーション領域に消費されることを回避 */
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
background-image: linear-gradient(90deg, #FF0000, #0000FF);
}
div{
display: inline-block; /* グラデーション範囲を狭めるため */
height: 20rem;
width: 20rem;
background-image: linear-gradient(90deg, #FF0000, #0000FF);
}