年賀状を書こう
つくばexpress.js #1
Fri Dec 20 2019
はじめまして
📛 はたけやまそうた
@chooblarin
フラー株式会社
🏠 新潟県新潟市
年末ですね…
年賀状、書いていますか？
年賀状とは
年賀状とは奈良時代よりある年始回りを起源に長く続く日本独自の習慣です。
<中略>
歴史ある年賀状という習慣での人との繋がりに感謝し、贈りたいものです。
年賀状を書いてみました
縦書き
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
backdrop-filter
レガシーブラウザをケアする
@supports (backdrop-filter: blur(5px)) {
.plz-use-modern-browser {
visibility: hidden;
}
}
来年もよろしくお願いします。
弊社ではエンジニア絶賛採用中！