はじめに
文字をサクッとデコレーションしたいなというときに役立つ方法をいくつか調べたのでまとめてみました。
テキストにグラデーションをかける方法
仕組みとしては背景色にグラデーションを指定し、テキストでくり抜くというものです。
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;}浮き上がった文字
４方向に影をつけることで文字を作成できます。
<divclass="sample1oya"><spanclass="sample1">浮いた文字</span></div>.sample1oya{background:#ffffff;padding:20px;}.sample1{display:inline-block;font-size:160%;font-weight:bold;color:#ffffff;text-shadow:2px2px10px#777,-2px2px10px#777,2px-2px10px#777,-2px-2px10px#777;}動く影
animationを使うと影を動かすこともできます。
<divclass="sample2oya"><spanclass="sample2">影が変化する</span></div>.sample2oya{background:#fff;padding:20px;}.sample2{display:inline-block;font-size:160%;font-weight:bold;color:#fff;animation:sample2Anime4slinearinfinitealternate;}@keyframessample2Anime{0%{text-shadow:2px2px10px#fff,-2px2px10px#fff,2px-2px10px#fff,-2px-2px10px#fff;}100%{text-shadow:2px2px10px#777,-2px2px10px#777,2px-2px10px#777,-2px-2px10px#777;}}インライン
htmlで下線を直接引く方法です。
<spanstyle="text-decoration: underline">例文です</span>終わり
以上簡単なデコレーション方法でした。