[CSS]シャドウとグラデーションを巧みに使ったかわいらしいテキストエフェクト -Milky Effect

テキストにtext-shadow、背景に美しいlinear-gradientを効果的に使い、かわいらしいエフェクトに仕上げたスタイルシートを紹介します。

スタイルシートは、日本語に適用してもなかなかです。

日本語でもかわいいですね

ブログのタイトルや見出しにもよさそう

実際の動作は下記ページで確認できます。

Milky Font Effect

実装は簡単で、コピペで利用できます。

HTML

p要素などに、classを添えておきます。

<p class="milky">美しい日本語</p>

CSS

エフェクトの大切なポイントは「text-shadow」と「background」、カラーを変更しても面白そうですね。

.milky {
  font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;;
  text-transform: uppercase;
  display: block;
  font-size: 72px;
  color: #f1ebe5;
  text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff;
  font-weight: bold;
  letter-spacing: -4px;
  text-align: center;
  background: linear-gradient(to bottom, #ece4d9 0%,#e9dfd1 100%);
  position: absolute;
  padding: 20px 70px;
  top: 20%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 20px;
}