あちこちオードリー 背景のネオン看板をcssで作ってみた

スポンサーリンク
css

オードリーが好きであちこちオードリーを見ていておしゃれなセットを発見

かっこいいなと思い、cssで作ってみました。

完成品

See the Pen
Neon Title Poster
by Seiya Takahashi (@takasei)
on CodePen.

解説

以下順に作っていきました。

  • 文字
  • 内枠
  • 外枠

文字

文字作成にあたってのポイントは以下です。

・フォントはQuicksandを使用
transformプロパティで文字を斜めに変更
・linear-gradientで文字の上下を段々透明にさせる(後述の枠線とのつながり感upのため)

html

<span class="text">app crafts</span>

css

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

body{
  font-family: 'Quicksand', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;  
  min-height: 100vh;
  background:#000;
}

.text{
  text-align: center;
  width:370px;
  padding: 0px 10px 10px 10px;  
  color:#fff;
  font-size:67px;
  transform: rotate(
55deg);
  -webkit-text-stroke:3px rgba(255,255,255,0.8);
  color: transparent;
  background-image: linear-gradient(to bottom, transparent, #000 20%, #000 85%, transparent);
  z-index: 3;
  text-shadow:
     0px 0px 25px rgba(255,255,255,0.8);
}

現状こんな感じ。

内枠

・position:absolute;で絶対位置で配置し要素を重ねる
z-index:2;で文字の奥側に枠が来るように表現
box-shadowプロパティで枠線の内外にぼかした色味を表現

html

<span class="border-inside"></span>

css

.border-inside{
  height:270px;
  width:200px;
  border:solid;
  border-color: #fff;
  border-radius:15px;
  position:absolute;
  color:#fff;
  z-index:2;
  box-shadow: 
    inset 0 0 3px 3px rgba(255,255,255,0.8),
    0 0 3px 3px rgba(255,255,255,0.8);
}

こんな感じ。

外枠

・position:absolute;で絶対位置で配置し要素を重ねる
z-index:2;で文字の奥側に枠が来るように表現
box-shadowプロパティで枠線の内外にぼかした色味を表現
・height,widthは内枠と被らないように少し高めに設定する

html

<span class="border-outside"></span>

css

.border-outside{
  height:290px;
  width:220px;
  border:solid;
  border-color: #fff;
  border-radius:15px;
  position:absolute;
  color:#fff;
  z-index:2;
  box-shadow: 
    inset 0 0 3px 3px rgba(255,255,255,0.8),
    0 0 3px 3px rgba(255,255,255,0.8);
}

これで完成です。

終わりに

linear-gradientによって文字の上下をグラデーションで透明にしていくところは、あるとないとで大きく仕上がりが変わってくるので、細かいもののかなり大事だなと思いました。
読んでいただきありがとうございました!

適応前

適用後

css
スポンサーリンク
app crafts

コメント

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