CSSでテキストを浮かせたり、グラデーションをかける方法

はじめに

文字をサクッとデコレーションしたいなというときに役立つ方法をいくつか調べたのでまとめてみました。

テキストにグラデーションをかける方法

仕組みとしては背景色にグラデーションを指定し、テキストでくり抜くというものです。
HTML

<h1>グラデーション</h1>

CSS

h1{
  color: #ACB6E5;//非対応のブラウザでの文字色を設定
  background: -webkit-linear-gradient(0deg, #ACB6E5, #86FDE8);//背景色にグラデーションを指定
  -webkit-background-clip: text;//テキストでくり抜く
  -webkit-text-fill-color: transparent;//くり抜いた部分は背景を表示
}

ブラウザが非対応だった時のため、文字の色を指定しておきます。

ちなみにゴールドにしたいときはこのようにします。
とてもゴージャスになります！！

h1{
  color: #DA8E00;
  background: -webkit-linear-gradient(-45deg, #F7DE05, #DA8E00, #EDAC06, #F7DE05, #ECB802, #DAAF08, #B67B03, #DA8E00, #EDAC06, #F7DE05, #ECB802, #EDAC06);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

浮き上がった文字

４方向に影をつけることで文字を作成できます。

<div class="sample1oya">
  <span class="sample1">浮いた文字</span>
</div>

.sample1oya{
  background  : #ffffff;
  padding     : 20px;
}
.sample1{
  display     : inline-block;
  font-size   : 160%;
  font-weight : bold;
  color       : #ffffff;
  text-shadow:  2px  2px 10px #777 ,
               -2px  2px 10px #777 ,
                2px -2px 10px #777 ,
               -2px -2px 10px #777;
}

動く影

animationを使うと影を動かすこともできます。

<div class="sample2oya">
  <span class="sample2">影が変化する</span>
</div>

.sample2oya{
  background : #fff;
  padding    : 20px;
}
.sample2{
  display    : inline-block;
  font-size  : 160%;
  font-weight: bold;
  color      : #fff;
  animation  : sample2Anime 4s linear infinite alternate;
}
@keyframes sample2Anime{
   0% { text-shadow:  2px  2px 10px #fff ,
                     -2px  2px 10px #fff ,
                      2px -2px 10px #fff ,
                     -2px -2px 10px #fff;}
 100% { text-shadow:  2px  2px 10px #777 ,
                     -2px  2px 10px #777 ,
                      2px -2px 10px #777 ,
                     -2px -2px 10px #777;}
}

インライン

htmlで下線を直接引く方法です。

<span style="text-decoration: underline">例文です</span>

終わり

以上簡単なデコレーション方法でした。