cssを使ってテキストにシャドウとグラデーションを同時にかけたい

該当のソースコード

html
1<h1>新店舗<br>オープニングスタッフ募集<br><span>合格<span>祝金</span></span>キャンペーン</h1>

css
1h1 {
2    color: #fff;
3    text-shadow: 0px 0px 5px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 20px rgba(0, 0, 0, 1), 0px 0px 30px rgba(0, 0, 0, 1);
4  }
5
6h1 span {
7    color: #fccc00;
8  }
9
10 h1 span>span {
11    background: linear-gradient(135deg, rgba(244, 218, 88, 1) 38%, rgba(247, 245, 187, 1) 42%, rgba(244, 218, 88, 1) 52%, rgba(254, 220, 64, 1));
12    -webkit-background-clip: text;
13    color: transparent;
14  }

実現したいこと

テキストにシャドウとグラデーションを同時にかけたいです。
今回の場合だと基本白文字で「合格」の部分が単色の黄色、「祝金」の部分にお金っぽいゴールドのグラデーションをかけたい感じです。

発生している問題・エラーメッセージ

グラデーションが消えてテキストシャドウだけが表示されている状態(黒くつぶれている状態)になります。

よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

対策

h1の真下に、h1::beforeで全く同じ文字「新店舗オープニングスタッフ募集合格祝金キャンペーン」を配置して、そちらにテキストシャドウをつけてみました。

contentの文字列の改行方法

::before ::afterのcontent: ""の中に書く文章は以下の方法でbrのような改行をすることができます。

css
1selector::before {
2  content: "ここで→\A改行";
3  white-space: pre;
4}

結果↓

ここで
改行

完成コード例

動作確認用サンプル：https://jsfiddle.net/e6uygjk5/

html
1<h1>新店舗<br>オープニングスタッフ募集<br><span class="single-color">合格<span class="gradation">祝金</span></span>キャンペーン</h1>

css
1h1 {
2  color: #fff;
3  
4  /* 削除 */
5  /* text-shadow: 0px 0px 5px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 20px rgba(0, 0, 0, 1), 0px 0px 30px rgba(0, 0, 0, 1); */
6
7  /* 追加 */
8  position: relative;
9}
10
11/* 追加 */
12h1::before {
13  content: "新店舗\Aオープニングスタッフ募集\A合格祝金キャンペーン";
14  white-space: pre;
15  display: block;
16  position: absolute;
17  top: 0;
18  left: 0;
19  text-shadow: 0px 0px 5px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 20px rgba(0, 0, 0, 1), 0px 0px 30px rgba(0, 0, 0, 1);
20  z-index: -1;
21}
22
23/* 追加 */
24h1 .single-color {
25  color: red; /* 見やすくするために「合格」を赤色に変更しました */
26}
27
28/* 追加 */
29h1 .gradation {
30  display: inline-block;
31  position: relative;
32  background: linear-gradient(135deg, rgba(244, 218, 88, 1) 38%, rgba(247, 245, 187, 1) 42%, rgba(244, 218, 88, 1) 52%, rgba(254, 220, 64, 1));
33  -webkit-background-clip: text;
34  color: transparent;
35}