ykokw.xyz blog logo

Blog Posts

No results for 'undefined'Powered by Algolia

Vaporwave 自体はインターネット発の音楽ジャンルです。 レトロフューチャーな雰囲気が好きなので自分のブログで再現しようとしました。 途中で技術ブログはもうちょいシンプルにしようと思ってやめちゃったのですが(趣味ブログとかで復活するかも) もったいないしいつか復活するかもしれないときのためにメモしておきます。。。

CodePen

背景

body {
  display: block;
  width: 100%;
  height: 100vh;
  background: linear-gradient(180.15deg, #a6c1ee 49.88%, #fbc2eb 122.63%);
}

格子模様

  • 親要素側で子要素を3D空間に配置するように設定し、perspectiveを設定
body {
  display: block;
  width: 100%;
  height: 100vh;
  background: linear-gradient(180.15deg, #a6c1ee 49.88%, #fbc2eb 122.63%);
  transform-style: preserve-3d; // 追加
  perspective: 350px;  // 追加
}

格子模様をcssで作る

  • 親のbody要素に対してleftとかbottomとか指定するためのabosulte
position: absolute;
  • 格子の横幅を画面の2倍に

    • 100%だと斜めにして奥行き出したときに格子が見切れてしまう
    • 2倍にした分、leftを指定して中心を設定
width: 200%;
left: calc(100% * -0.5);
  • bottom: 回転 + 奥行き設定で床っぽくするためにbottom: 0にする
bottom: 0;
  • background-imageは複数画像を指定できる

  • liner-gradientで指定色を5%くらいにすると線になる

    • transparent = 透明色
    • 最初にangle指定ができるので2つめは90°曲げてる
  • background-sizeを小さくしてリピートさせると線の繰り返しになる

    • それを縦横合わせて格子模様にする
background-image:
linear-gradient(
  transparent 95%,
  rgba(79, 253, 242, 1) 5%
),
linear-gradient(
  90deg,
  transparent 95%,
  rgba(79, 253, 242, 1) 5%
);
background-size: 20px 10px;
background-repeat: repeat;
  • transformでrotate3dを指定してx軸をもとに60°回している
  • transform-originで要素変形の起点を中心の下側にしている

    • 要素の下側がx軸となって回転するので、ちょうどパタリと倒れていくイメージ
transform: rotate3d(1, 0, 0, 60deg);
transform-origin: center bottom;

コンテンツ部分

  • メインのコンテンツ部分がスクロール域だけどスクロールバーは端に表示したかった

    • body -> div.contentWrapper -> articleという3段構え
    • divでスクロール設定
    • articleは背景とかmargin設定
<html>
  <body>
    <div class="contentWrapper">
      <h1>aesthetic blog template</h1>
      <article>
...(略)
  • bodyはoverflow: hiddenとmarginリセットを追加
body {
  display: block;
  width: 100%;
  height: 100vh;
  background: linear-gradient(180.15deg, #a6c1ee 49.88%, #fbc2eb 122.63%);
  transform-style: preserve-3d;
  perspective: 350px;
  overflow: hidden;  // 追加
  margin: 0;  // 追加
}
  • div.contentWrapperで幅をいっぱいにしつつoverflow: scroll設定
.contentWrapper {
  display: block;
  width: 100%;
  height: 100%;
  overflow: scroll;
}
  • articleで見えている部分の色とマージンを設定

    • position: relativeを指定しないとz-indexが活きないので格子模様が重なってしまう
  • (どうでもいいけど)背景色とくっきり目のbox-shadowがレトロ感出ている気がする
article {
  position: relative;
  display: block;
  max-width: 720px;
  margin: 0 24px 30px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 5px 5px 1px rgba(0, 0, 0, 0.25);
  z-index: 10;
  padding-left: 32px;
  color: #5f5f5f;
}

This content is built with Gatsby