年賀状を書こう

つくばexpress.js #1

Fri Dec 20 2019

はじめまして

📛 はたけやまそうた

@chooblarin

フラー株式会社

🏠 新潟県新潟市

年末ですね…

年賀状、書いていますか？

年賀状とは

年賀状とは奈良時代よりある年始回りを起源に長く続く日本独自の習慣です。

<中略>

歴史ある年賀状という習慣での人との繋がりに感謝し、贈りたいものです。

出典: http://nenga.cardbox.biz/blog/trivia/12/

年賀状を書いてみました

縦書き

p {
  writing-mode: vertical-rl;
}

ルビをふる

お<ruby>慶<rp><rt>よろこ</rt></rp></ruby>び

イラストを追加

.yama {
  background: linear-gradient(
    to bottom,
    #43c6ac 0%,
    #191654 100%
  );
  clip-path: polygon(
    0 100%,
    12% 80%,
    32% 40%,
    45% 0,
    55% 0,
    68% 40%,
    88% 80%,
    100% 100%
  );
}

イラストをもっと追加

.hi {
  background:
    linear-gradient(
      to bottom,
      #cf0404 0%,
      rgba(255, 222, 25, 0.32) 68%,
      rgba(255, 222, 25, 0) 100%
    );
  border-radius: 50%;
  box-shadow: 0 0 1rem 0.5rem #fff4f6;
}

文字を読みやすくする

.brush {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px); /* 🧪experimental */
}

p {
  text-shadow:
    1px 1px 0 white,
    -1px 1px 0 white,
    1px -1px 0 white,
    -1px -1px 0 white;
}

Splitting.js

使い方

<p data-splitting>あめおめ</p>

Splitting();

こうして...

こうすると...

こうなります

<div data-splitting 
     class="words chars splitting"
     style="--word-total:1; --char-total:3;">

  <span class="word" data-word="あけおめ" style="--word-index:0;">

    <span class="char" data-char="あ" style="--char-index:0;">
      あ
    </span>

    <span class="char" data-char="け" style="--char-index:1;">
      け
    </span>

    <span class="char" data-char="お" style="--char-index:2;">
      お
    </span>

    <span class="char" data-char="め" style="--char-index:3;">
      め
    </span>

  </span>
</div>

できた

writing-mode

https://developer.mozilla.org/docs/Web/CSS/writing-mode

backdrop-filter

https://developer.mozilla.org/docs/Web/CSS/backdrop-filter

レガシーブラウザをケアする

@supports (backdrop-filter: blur(5px)) {
  .plz-use-modern-browser {
    visibility: hidden;
  }
}

完成したのがこちら

https://codepen.io/chooblarin/full/abzJvoB

来年もよろしくお願いします。

弊社ではエンジニア絶賛採用中！