smash. ロゴっぽいタイトルをcssで作ってみた

スポンサーリンク
css

バーティカル(縦型)シアターアプリ「smash.」のロゴがかっこいい

「smash.」のロゴがとてもかっこいい。
https://smash-media.jp/

こんなロゴです。

アプリ起動時に表示される動きのついたロゴも、躍動感があってとてもかっこいい。

これを作っていきたいなと思ったのでやってみます。

実現方法

以下順に調べて作ってみました。

・文字
・平行四辺形の作り方
・ネオンカラーの作り方

完成品は以下になります。

See the Pen
Neon Title Like Smash. App
by Seiya Takahashi (@takasei)
on CodePen.

文字

まずフォントは、色々探してみて、今回はQuicksandというフォントにしました。程よく丸い感じのフォントで、aが筆記体のもので探していてこれにした感じです。

参考:https://fonts.google.com/specimen/Quicksand?preview.text=app%20crafts&preview.text_type=custom&query=Quicksand

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@700&family=Rubik:wght@700&display=swap');

body{
  font-family: 'Quicksand', sans-serif;
  background: #030824; --背景色は暗い色で実装
}

背景と同化しすぎてわかりづらいけど現状こんな感じ。

次に文字の枠の色を白にしたく、text-strokeプロパティを使用して実現しました。
透明度も表現したかったのでrgbaで記述しています。

.neonTitle要素に以下実装

   -webkit-text-stroke:1px rgba(255,255,255,0.8);

適用後

平行四辺形の作り方

平行四辺形をテキストの外に実装するポイントは以下でした。

1.cssの疑似要素(::before)をつかう
2.transformプロパティで長方形の状態から平行四辺形に変更する
3.テキストごとtransformプロパティがかからないように、タグを入れ子構造にする

具体的には以下のような感じで実装

.neonTitle{
  position: relative;
  font-size:60px;
  -webkit-text-stroke:1px rgba(255,255,255,0.8);
  color: transparent;
  z-index: 1;
  opacity:0.9;
}

.neonTitle span::before{
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
   left: 0;
   transform: skew(-6deg);
   margin: -25px;
   border-radius: 7px;
   border-style: solid;   
   border-color: rgba(255,255,255,0.8);
   border-width:3.5px;
}

適用後

transformプロパティについてはこちら参考になりました。:
http://www.htmq.com/css3/transform_skew.shtml

ネオンの実装の仕方

テキストと枠それぞれで異なるプロパティを使用して実現しました。

①テキストtext-shadowプロパティでぼかしを利用して表現

.neonTitle要素にこんな感じで実装

  text-shadow:
    0px 0px 5px rgba(236,64,164,0.8),
    0px 0px 10px rgba(236,64,164,0.8),
    0px 0px 15px rgba(236,64,164,0.8),
    0px 0px 20px rgba(236,64,164,0.8),
    0px 0px 30px rgba(236,64,164,0.8),
    0px 0px 35px rgba(236,64,164,0.8),
    0px 0px 40px rgba(236,64,164,0.8),
    0px 0px 45px rgba(236,64,164,0.8)
    ;

適用後
複数指定かつ、ぼかしのpxを大きくすることで調光を表現しています。

②枠:box-shadowプロパティを使用し上下左右対称に影をぼかす方法で表現

以下の記述方法に従って実装

box-shadow: 内側指定 左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色 ;

.neonTitle span::beforeの要素に以下を追加

    box-shadow: 
    inset 0 0 10px 10px rgba(236,64,164,0.8),
    0 0 15px 15px rgba(236,64,164,0.8);
  }

適用後

最後に

ネオンっぽさを出すためにアニメーションで点滅感を表現したいので、animationプロパティで表現してみました。

.neonTitle要素に以animationプロパティを追加

animation: flicker-neonTitle 1.5s infinite alternate;

.neonTitle span::before要素に以animationプロパティを追加

animation: flicker-neonBorder 1.5s infinite alternate;

以下追加で実装

/* Animate neon flicker-neonTitle */
@keyframes flicker-neonTitle {
    
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {  
     text-shadow:
     0px 0px 5px rgba(236,64,164,0.8),
     0px 0px 10px rgba(236,64,164,0.8),
     0px 0px 15px rgba(236,64,164,0.8),        0px 0px 20px rgba(236,64,164,0.8),
     0px 0px 30px rgba(236,64,164,0.8),
     0px 0px 35px rgba(236,64,164,0.8),
     0px 0px 40px rgba(236,64,164,0.8),
     0px 0px 45px rgba(236,64,164,0.8)
          ;
  }
    20%, 24%, 55% {        
        text-shadow: none;
        -webkit-text-stroke:1px rgba(255,255,255,0.8);
    }    
}
/* Animate neon flicker-neonBorder */
@keyframes flicker-neonBorder {
  
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { 
  box-shadow: 
    inset 0 0 10px 10px rgba(236,64,164,0.8),
    0 0 15px 15px rgba(236,64,164,0.8);
  }
    20%, 24%, 55% {        
        box-shadow: none;
        border-color: rgba(255,255,255,0.6);  --少し消えてる感を演出するため透明度を0.6に設定
    }    
}

ここまでできたら、ネオンの実装の仕方で追加したプロパティは重複している内容なので削除します。

適用後

背景を白にしたらこんな感じ

おわり

あたらめてよくみてみると文字内の艶感とか全然違っているので、また改善していきます。読んでいただきありがとうございました!

css
スポンサーリンク
app crafts

コメント

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