cssでTikTok風にテキストを作ってみる

スポンサーリンク
css

誰もが見たことあるであろうTikTokのロゴっぽい文字をcssで作成してみました!

TikTokのロゴとは?

このようなロゴです。音符のデザインに、赤と青の線が周りについているようなデザインで、パッと目を引くようなデザインです。揺れているようにも見えます。

実現方法

以下の情報が必要だったため、調べてみました。

  • 文字をずらして表現するプロパティ → text-shadowプロパティで実現
  • 赤色のcolor → Vivid pink(Hex値:#ee1d52)
  • 青色のcolor → Slightly desaturated cyan(Hex値:#69c9d0)

これらの情報があれば実現はできそうでしたので、早速やってみます。

text-shadowプロパティを少し紹介

少しだけtext-shadowプロパティに関して調べたので紹介しておきます。
ポイントとしては以下になります。

・テキストに影を追加するプロパティ
・text-shadow: 影の左右の位置 影の上下の位置 ぼかし 影の色; の形で記述する
・ぼかしの部分は設定しなくても良い
・カンマで繋ぐことで、一つのテキストに対して複数の影を設定できる

詳しくはこちらを参照:https://developer.mozilla.org/ja/docs/Web/CSS/text-shadow

例えば、赤と青の色の影をそれぞれ左右10,上下10ずつ反対に追加した場合はこのような感じになります。

参考:https://www.bad-company.jp/text-shadow

実際に作ってみた

実際につくってみたものが以下になります。
背景が白と黒の2バージョンを作成してみました。ボタン押下でテキスト内の文字がTikTokっぽく現れます。

黒バージョン

See the Pen
Text like TikTok black
by Seiya Takahashi (@takasei)
on CodePen.

白バージョン

See the Pen
Text like TikTok white
by Seiya Takahashi (@takasei)
on CodePen.


全てのテキストがこのデザインだと見づらくなるかもなので、テキストの一部にこのようなデザインを追加したり、他の色で試してみてもおもしろいかも。

css
スポンサーリンク
app crafts

コメント

タイトルとURLをコピーしました