CSS の element() 関数をご存知？
発端 きっかけは調べ物でこちらのブログを閲覧したときです。ぜひアクセスしてみてください。9 割以上の方は何も気づかないでしょう。 Chrome でのスクリーンショット なぜなら Firefox 以外のブラウザでは表示されないからです。 Firefox でのスクリーンショット Firefox でアクセスすると、“Woah! What's this?” と書いてある右側のミニマップに気づくはずです。 Firefox でのスクリーンショット これの驚くところは、なんと要素の状態がリアルタイムでミニマップにも反映されます。上記スクリーンショットはテキストを選択した状態ですが、ミニマップにもテキストが選択された状態で表示されていることが確認できます。 実装 どのように実装されているかというと、なんと CSS の element() 関数のみの 1 行で実装できます。そして、Firefox は ele
生 WebGL と TypeScript で Vercel のロゴを作る
はじめに 完全に釣りタイトルです。Three.js などを使わずに生の WebGL で ▲ を描くというだけの話です。いわゆる WebGL の「Hello World」です。Vercel や Next.js とは一切関係ありません。 WebGL を詳細に解説しているサイトはいくつかあって、内容に関してはどれもすばらしいものです。ただ、何年も前のものなのでソースコードにまだ var が使われているものも多く、また独自関数で処理をまとめていることで、個人的には全体の流れが少しわかりにくくなっている気がします。さらに TypeScript を使っている日本語記事は見当たりませんでしたので、それらを補う形でまとめてみたいと思います。 なお、本記事では全体的な流れに焦点を当てているので、詳細な解説は下記サイトなどをご参考ください。 WebGLの基本 (日本語) wgld.org | WebGL (日
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
